<!-- 
 Copyright 2018 The MIT Internet Trust Consortium
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
 You may obtain a copy of the License at
 
   http://www.apache.org/licenses/LICENSE-2.0
 
 Unless required by applicable law or agreed to in writing, software
 distributed under the License is distributed on an "AS IS" BASIS,
 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
-->

<script type="text/html" id="tmpl-token-table">
  <div class="well well-small">
    <button class="btn btn-small refresh-table">
      <i class="icon-refresh"></i>
      <span data-i18n="common.refresh">Refresh</span>
    </button>
    &nbsp;
  </div>

  <div class="tabbable">
    <ul class="nav nav-tabs">
      <li class="active">
        <a data-target="#token-access-tab" data-toggle="tab" href="#"
          ><span data-i18n="token.token-table.access-tokens"
            >Access Tokens</span
          >
          <span class="label label-info" id="access-token-count">?</span></a
        >
      </li>
      <li>
        <a data-target="#token-refresh-tab" data-toggle="tab" href="#"
          ><span data-i18n="token.token-table.refresh-tokens"
            >Refresh Tokens</span
          >
          <span class="label label-info" id="refresh-token-count">?</span></a
        >
      </li>
    </ul>

    <div class="tab-content">
      <div class="tab-pane active" id="token-access-tab">
        <div>
          <p data-i18n="token.token-table.text">
            Access tokens are usually short-lived and provide clients with
            access to specific resources. ID Tokens are specialized access
            tokens to facilitate log on using OpenID Connect.
          </p>
        </div>

        <div
          id="access-token-table-empty"
          class="alert alert-info"
          data-i18n="token.token-table.no-access"
        >
          There are no active access tokens.
        </div>

        <div class="pagination paginator-access"></div>

        <table id="access-token-table" class="table table-hover table-striped">
          <thead>
            <tr>
              <th data-i18n="common.client">Client</th>
              <th data-i18n="token.token-table.token-info">
                Token Information
              </th>
              <th data-i18n="common.expires">Expires</th>
              <th></th>
            </tr>
          </thead>
          <tbody></tbody>
        </table>

        <div class="pagination paginator-access"></div>
      </div>

      <div class="tab-pane" id="token-refresh-tab">
        <div>
          <p data-i18n="token.token-table.text-refresh">
            Refresh tokens are usually long-lived and provide clients with the
            ability to get new access tokens without end-user involvement.
          </p>
        </div>

        <div
          id="refresh-token-table-empty"
          class="alert alert-info"
          data-i18n="token.token-table.no-refresh"
        >
          There are no active refresh tokens.
        </div>

        <div class="pagination paginator-refresh"></div>

        <table id="refresh-token-table" class="table table-hover table-striped">
          <thead>
            <tr>
              <th data-i18n="common.client">Client</th>
              <th data-i18n="token.token-table.token-info">
                Token Information
              </th>
              <th data-i18n="common.expires">Expires</th>
              <th></th>
            </tr>
          </thead>
          <tbody></tbody>
        </table>

        <div class="pagination paginator-refresh"></div>
      </div>
    </div>

    <div class="well well-small">
      <button class="btn btn-small refresh-table">
        <i class="icon-refresh"></i>
        <span data-i18n="common.refresh">Refresh</span>
      </button>
      &nbsp;
    </div>
  </div>
</script>

<script type="text/html" id="tmpl-access-token">
  <td>
    <span title="<%- client.clientId %>"
      ><%- client.clientName != null ? client.clientName : (
      client.clientId.substr(0,8) + '...' ) %></span
    >
    <div class="client-more-info-block"></div>
    <% if (token.refreshTokenId != null) { %>
    <br />
    <span
      class="label label-important"
      title="This access token was issued with an associated refresh token."
      data-i18n="[title]token.token-table.associated-refresh"
      >+ <i class="icon-time icon-white"></i> Refresh</span
    >
    <% } %>
  </td>

  <td>
    <div class="token-value">
      <code
        class="token-substring"
        style="cursor: pointer"
        data-i18n="[title]token.token-table.click-to-display"
        title="Click to display full token value"
        ><%- token.value.substr(0,27) %> ...</code
      >
      <input
        type="text"
        readonly
        style="cursor: text"
        class="token-full input-xxlarge"
        value="<%- token.value %>"
      />
    </div>
    <div class="scope-list"></div>
  </td>

  <td><%- formattedExpiration %></td>

  <td>
    <button class="btn btn-danger btn-delete pull-right">
      <i class="icon-trash icon-white"></i>
      <span data-i18n="common.revoke">Revoke</span>
    </button>
  </td>
</script>

<script type="text/html" id="tmpl-refresh-token">
  <td>
    <span title="<%- client.clientId %>"
      ><%- client.clientName != null ? client.clientName : (
      client.clientId.substr(0,8) + '...' ) %></span
    >
    <div class="client-more-info-block"></div>
    <span
      class="label label-info"
      title="Number of associated access tokens"
      data-i18n="[title]token.token-table.number-of-tokens"
      ><%- accessTokenCount %></span
    >
  </td>

  <td>
    <div class="token-value">
      <code
        class="token-substring"
        style="cursor: pointer"
        data-i18n="[title]token.token-table.click-to-display"
        title="Click to display full token value"
        ><%- token.value.substr(0,27) %> ...</code
      >
      <input
        type="text"
        readonly
        style="cursor: text"
        class="token-full input-xxlarge"
        value="<%- token.value %>"
      />
    </div>
    <div class="scope-list"></div>
  </td>

  <td><%- formattedExpiration %></td>

  <td>
    <button class="btn btn-danger btn-delete pull-right">
      <i class="icon-trash icon-white"></i>
      <span data-i18n="common.revoke">Revoke</span>
    </button>
  </td>
</script>
