{% extends "page.html" %}

{% block main %}

<div class="container-fluid" style="margin:50px 50px 50px 50px">
  <div class="row">
    <form id="request-token-form" class="col-md-offset-3 col-md-6">
      <div class="text-center">
        <button type="submit" class="btn btn-lg btn-jupyter">
          Request new API token
        </button>
      </div>
      <div class="form-group">
        <label for="token-note">Note</label>
        <input
          id="token-note"
          class="form-control"
          placeholder="note to identify your new token">
        <small id="note-note" class="form-text text-muted">
          This note will help you keep track of what your tokens are for.
        </small>
        <br><br>
        <label for="token-expiration-seconds">Token expires</label>
        {% block expiration_options %}
        <select id="token-expiration-seconds"
                class="form-control">
          <!-- unit used for each value is `seconds` -->
          <option value="3600">1 Hour</option>
          <option value="86400">1 Day</option>
          <option value="604800">1 Week</option>
          <option value="" selected="selected">Never</option>
        </select>
        {% endblock expiration_options %}
        <small id="note-expires-at" class="form-text text-muted">
          You can configure when your token will be expired.
        </small>
      </div>
    </form>
  </div>

  <div class="row">
      <div id="token-area" class="col-md-6 col-md-offset-3" style="display: none;">
        <div class="panel panel-default">
          <div class="panel-heading">
            Your new API Token
          </div>
          <div class="panel-body">
            <p class="lead text-center">
              <span id="token-result"></span>
            </p>
            <p>
              Copy this token. You won't be able to see it again,
              but you can always come back here to get a new one.
            </p>
          </div>
        </div>
      </div>
  </div>

  {% if api_tokens %}
  <div class="row">
    <h2>API Tokens</h2>
    <p>
      These are tokens with full access to the JupyterHub API.
      Anything you can do with JupyterHub can be done with these tokens.
      Revoking the API token for a running server will require restarting that server.
    </p>
    <table class="table table-striped">
      <thead>
        <tr>
          <td>Note</td>
          <td>Last used</td>
          <td>Created</td>
          <td>Expires at</td>
        </tr>
      </thead>
      <tbody>
        {% for token in api_tokens %}
        <tr class="token-row" data-token-id="{{token.api_id}}">
          {% block token_row scoped %}
          <td class="note-col col-sm-5">{{token.note}}</td>
          <td class="time-col col-sm-3">
            {%- if token.last_activity -%}
            {{ token.last_activity.isoformat() + 'Z' }}
            {%- else -%}
            Never
            {%- endif -%}
          </td>
          <td class="time-col col-sm-3">
            {%- if token.created -%}
            {{ token.created.isoformat() + 'Z' }}
            {%- else -%}
            N/A
            {%- endif -%}
          </td>
          <td class="time-col col-sm-3">
            {%- if token.expires_at -%}
            {{ token.expires_at.isoformat() + 'Z' }}
            {%- else -%}
            Never
            {%- endif -%}
          </td>
          <td class="col-sm-1 text-center">
            <button class="revoke-token-btn btn btn-xs btn-danger">revoke</button>
          </td>
          {% endblock token_row %}
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
  {% endif %}

  {% if oauth_clients %}
  <div class="row">
    <h2>Authorized Applications</h2>
    <p>
      These are applications that use OAuth with JupyterHub
      to identify users (mostly notebook servers).

      OAuth tokens can generally only be used to identify you,
      not take actions on your behalf.
    </p>
    <table class="table table-striped">
      <thead>
        <tr>
          <td>Application</td>
          <td>Last used</td>
          <td>First authorized</td>
        </tr>
      </thead>
      <tbody>
        {% for client in oauth_clients %}
        <tr class="token-row"
          data-token-id="{{ client['token_id'] }}">
          {% block client_row scoped %}
          <td class="note-col col-sm-5">{{ client['description'] }}</td>
          <td class="time-col col-sm-3">
            {%- if client['last_activity'] -%}
            {{ client['last_activity'].isoformat() + 'Z' }}
            {%- else -%}
            Never
            {%- endif -%}
          </td>
          <td class="time-col col-sm-3">
            {%- if client['created'] -%}
            {{ client['created'].isoformat() + 'Z' }}
            {%- else -%}
            N/A
            {%- endif -%}
          </td>
          <td class="col-sm-1 text-center">
            <button class="revoke-token-btn btn btn-xs btn-danger">revoke</button>
          {% endblock client_row %}
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
  {% endif %}
</div>
{% endblock main %}

{% block script %}
{{ super() }}
<script type="text/javascript">
require(["token"]);
</script>
{% endblock script %}