{% extends 'layout.html' %}
{% set breadcrumbs = breadcrumb_page('prefs') +  breadcrumb_page(self) %}
{% block content %}
  {# Header #}
  <div class="sticky-top mb-2 bg-white border-bottom p-3">
    <div class="d-flex flex-wrap justify-content-between rdw-container">
      <h2 class="mb-0">{{ active_page.label }}</h2>
      <div>
        <button id="rdw-btn-add-token"
                type="button"
                class="btn btn-primary"
                data-bs-toggle="modal"
                data-bs-target="#rdw-add-token-modal">
          <RdwIcon value="bi-plus-lg" class="me-1" />
          {%- trans %}New access token{% endtrans %}
        </button>
      </div>
    </div>
  </div>
  <div class="rdw-container">
    {# Help text #}
    <p class="text-secondary small mb-4">
      {% trans %}You can use access tokens to authenticate to this application. They are the only accepted password when you have Two-Factor Authentication (2FA) enabled.{% endtrans %}
    </p>
    {# Token count summary #}
    <p class="text-muted small mb-2">
      <RdwIcon value="bi-info-circle" class="me-1" />
      {{- _('%(count)s access tokens associated with your account.', count=tokens|length) }}
    </p>
    {# Token list #}
    <div class="d-flex flex-column gap-3">
      {% for token in tokens %}
        <!-- Token Item -->
        <div class="card border shadow-sm">
          <div class="card-body d-flex align-items-start justify-content-between gap-3">
            <div class="flex-grow-1">
              <div class="fw-semibold mb-1">{{ token.name }}</div>
              <div class="d-flex flex-wrap gap-3 small text-muted">
                <span>
                  <RdwIcon value="bi-calendar-plus" class="me-1" />
                  {%- trans %}Created{% endtrans %}
                  <RdwTime :value="token.creation_time" class="fw-semibold" :default="_('Never')" />
                </span>
                <span>
                  <RdwIcon value="bi-clock-history" class="me-1" />
                  {%- trans %}Last used{% endtrans %}
                  <RdwTime :value="token.access_time" class="fw-semibold" :default="_('Never')" />
                </span>
                <span>
                  <RdwIcon value="bi-calendar-x" class="me-1" />
                  {%- trans %}Expires{% endtrans %}
                  <RdwTime :value="token.expiration_time" class="fw-semibold" :default="_('Never')" />
                </span>
              </div>
              <div class="mt-2 d-flex flex-wrap gap-1">
                {% set scope_table = dict(form.scope.choices) %}
                {%- for s in token.scope -%}
                  {% set scope_label = scope_table.get(s, s).split(' - ')[0] %}
                  {% set scope_help = scope_table.get(s, s).split(' - ')[1] %}
                  <span class="badge text-bg-primary fw-normal" title="{{ scope_help }}">{{ scope_label }}</span>
                {%- else -%}
                  <span class="badge text-bg-primary fw-normal">{% trans %}Default access{% endtrans %}</span>
                {%- endfor -%}
              </div>
            </div>
            <button class="btn btn-sm btn-outline-danger flex-shrink-0 rdw-btn-delete-token"
                    data-bs-toggle="modal"
                    data-bs-target="#rdw-delete-token-modal"
                    data-name="{{ token.name }}">
              <RdwIcon value="bi-trash3" class="me-1" />
              {%- trans %}Revoke{% endtrans %}
            </button>
          </div>
        </div>
      {% else %}
        <RdwEmpty icon="bi-key" :title="{{ _("No access token yet") }}" class="p-5">
          <p>
            <button class="btn btn-primary"
                    data-bs-toggle="modal"
                    data-bs-target="#rdw-add-token-modal">
              <RdwIcon value="bi-plus-lg" class="me-1" />
              {%- trans %}Add your first access token{% endtrans %}
            </button>
          </p>
        </RdwEmpty>
      {% endfor %}
    </div>
    {# Add Access Token #}
    <form action="#" method="post">
      <ModalDialog id="rdw-add-token-modal"
                   :title="_('Create access token')"
                   :submit="_('Create access token')"
                   :show="form.error_message">
        {% if form.error_message %}<p class="text-danger">{{ form.error_message }}</p>{% endif %}
        <cf:Fields form={{ form }} />
      </ModalDialog>
    </form>
    {# Delete Modal #}
    <form method="post" action="#">
      <ModalConfirm id="rdw-delete-token-modal"
                    :title="_('Revoke token')"
                    :message="_('Are you sure you want to revoke this access token ?')"
                    :submit="_('Revoke')"
                    :fields="['name']">
        <input type="hidden" name="action" value="delete" />
        <p class="text-muted small mb-0">
          <RdwIcon value="bi-exclamation-triangle-fill" class="text-warning me-1" />
          {%- trans %}Any application using this token will immediately lose access.{% endtrans %}
        </p>
      </ModalConfirm>
    </form>
  </div>
{% endblock %}