{#
  Template variables:

  user - currently viewed user
  tokens - list of ApiToken entities

  #}

{% set action = h.url_for("user.api_tokens_revoke", id=user['name']) %}
<div>
<form hx-post="{{ action }}" class="form" hx-swap="none" autocomplete="off"
    hx-on::after-request="$('#revoke-tokens-button').attr('disabled', true)">
  {{ h.csrf_input() }}

  <table class="table table-stripped table-condensed table-header table-hover table-bordered" id="api-tokens-table">
    <thead>
      <tr>
        {% block head_cells %}
          <th scope="col">{{ _('Token') }}</th>
          <th scope="col">{{ _('Created') }}</th>
          <th scope="col">{{ _('Last access') }}</th>
        {% endblock head_cells %}
      </tr>
    </thead>
    <tbody>
      {% for token in tokens %}
        <tr id="token-{{ token.id }}">
          {% block token_cells scoped %}
            <td>
              <div class="form-check">
                <label class="form-check-label radio">
                  <input class="form-check-input" type="checkbox" value="{{ token.id }}" name="token"
                    onchange="$('#revoke-tokens-button').attr('disabled', !$('[name=token]:checked').length)">
                  <code>
                    {{ token.name }}
                  </code>
                </label>
              </div>
            </td>
            <td>
              {{ h.render_datetime(token.created_at, with_hours=True) }}
            </td>
            <td>
              {{ h.render_datetime(token.last_access, with_hours=True) or _('Never') }}
            </td>
          {% endblock token_cells %}
        </tr>
      {% endfor %}
    </tbody>
  </table>

  <div class="btn-group">
    <button id="revoke-tokens-button" type="submit" class="btn btn-danger" disabled
      data-module="confirm-action" data-module-content="{{ _('Are you sure you want to revoke these tokens?') }}">
      <i class="fa fa-times"></i> {{ _('Revoke tokens') }}
    </button>
  </div>
</form>
</div>