{% extends "profile_base.html" %}

{% set profile_security_active = "tokens" %}
{% block profile_content %}
      <div class="d-flex flex-wrap align-items-center justify-content-between gap-2 mb-3">
        <div>
          {% set breadcrumbs = [
            {"name": current_user.name | display_name(current_user.username), "href": "/profile"},
            {"name": "API tokens"}
          ] %}
          {% include "partials/breadcrumbs.html" %}
        </div>
      </div>
  {% include "partials/flash.html" %}
      {% if created_token %}
        <div class="alert alert-info" role="alert">
          <div class="fw-semibold">Copy the new token now. It won't be shown again.</div>
          <div class="mt-2">
            <div class="input-group">
              <input
                class="form-control font-monospace"
                id="created-token"
                type="text"
                value="{{ created_token }}"
                readonly
              >
              <button
                class="btn btn-primary"
                type="button"
                data-copy-target="created-token"
                aria-label="Copy token"
              >
                Copy
              </button>
            </div>
          </div>
        </div>
      {% endif %}
      <div class="card shadow-sm">
        <div class="card-body">
          <div class="d-flex flex-wrap align-items-center justify-content-between gap-2 mb-3">
            <div class="text-uppercase text-muted small fw-semibold">API tokens</div>
            <a class="btn btn-primary" href="/profile/tokens/new">Create token</a>
          </div>
          <p class="text-muted mb-3">
            API tokens let you authenticate API requests and Git smart-HTTP operations from scripts and tools. You can have up to 5 active tokens at a time. Learn more in the
            <a href="/docs/api">docs</a>.
          </p>
          <form class="row g-2 align-items-end mb-3" method="get" action="/profile/tokens" id="profile-token-filters">
            <div class="col-12 col-md-4 col-lg-4">
              <label class="form-label" for="token-name-search">Name</label>
              <input
                class="form-control"
                id="token-name-search"
                name="name"
                type="text"
                value="{{ query.name | default('', true) }}"
                placeholder="Token name"
              >
            </div>
            <div class="col-12 col-md-3 col-lg-4 ms-lg-auto">
              <div class="row">
                {% with search_reset_url="/profile/tokens", search_actions_col_class="col-12" %}
                  {% include "partials/search_actions.html" %}
                {% endwith %}
              </div>
            </div>
          </form>
          {% if page.results | length == 0 %}
            <p class="text-muted mb-0">No API tokens yet.</p>
          {% else %}
            <div class="table-responsive">
              <table class="table table-hover align-middle mb-0">
                <thead>
                  <tr>
                    <th>Name</th>
                    <th>Token</th>
                    {% set order_value = query.order | default('-created_at', true) %}
                    {% if order_value == "created_at" %}
                      {% set next_created_order = "-created_at" %}
                    {% else %}
                      {% set next_created_order = "created_at" %}
                    {% endif %}
                    <th>
                      <a
                        class="link-secondary text-decoration-none"
                        href="{{ query_url('/profile/tokens', {
                          'name': query.name | default('', true),
                          'order': next_created_order,
                          'per_page': query.per_page | default('', true)
                        }) }}"
                      >
                        Created
                        {% if order_value == "created_at" %}
                          ↑
                        {% elif order_value == "-created_at" %}
                          ↓
                        {% endif %}
                      </a>
                    </th>
                    {% if order_value == "expires_at" %}
                      {% set next_expires_order = "-expires_at" %}
                    {% else %}
                      {% set next_expires_order = "expires_at" %}
                    {% endif %}
                    <th>
                      <a
                        class="link-secondary text-decoration-none"
                        href="{{ query_url('/profile/tokens', {
                          'name': query.name | default('', true),
                          'order': next_expires_order,
                          'per_page': query.per_page | default('', true)
                        }) }}"
                      >
                        Expires
                        {% if order_value == "expires_at" %}
                          ↑
                        {% elif order_value == "-expires_at" %}
                          ↓
                        {% endif %}
                      </a>
                    </th>
                    <th>Status</th>
                    <th></th>
                  </tr>
                </thead>
                <tbody>
                  {% for token in page.results %}
                    <tr>
                      <td>{{ token.name }}</td>
                      <td class="font-monospace small">
                        {% if token.token_display | length > 12 %}
                          {{ token.token_display[:12] }}
                        {% else %}
                          {{ token.token_display }}
                        {% endif %}
                      </td>
                      <td title="{{ token.created_at }}">{{ token.created_at | humantime }}</td>
                      <td title="{{ token.expires_at }}">{{ token.expires_at | humantime }}</td>
                      <td>
                        {% if token.is_active and not token.is_expired %}
                          <span class="badge text-bg-success">Active</span>
                        {% elif token.is_revoked %}
                          <span class="badge text-bg-secondary">Revoked</span>
                        {% elif token.is_expired %}
                          <span class="badge text-bg-warning text-dark">Expired</span>
                        {% else %}
                          <span class="badge text-bg-secondary">Inactive</span>
                        {% endif %}
                      </td>
                      <td class="text-end">
                        {% if token.is_active %}
                          <form
                            method="post"
                            action="/profile/tokens/{{ token.uuid }}/revoke"
                            class="d-inline"
                            data-confirm-modal="confirm-revoke-token"
                            data-confirm-name="{{ token.name }}"
                          >
                            <input type="hidden" name="csrf_token" value="{{ form.csrf_token }}">
                            <button class="btn btn-sm btn-outline-danger" type="submit">Revoke</button>
                          </form>
                        {% elif token.is_revoked %}
                          <form
                            method="post"
                            action="/profile/tokens/{{ token.uuid }}/delete"
                            class="d-inline"
                            data-confirm-modal="confirm-delete-token"
                            data-confirm-name="{{ token.name }}"
                          >
                            <input type="hidden" name="csrf_token" value="{{ form.csrf_token }}">
                            <button class="btn btn-sm btn-outline-danger" type="submit">Delete</button>
                          </form>
                        {% endif %}
                      </td>
                    </tr>
                  {% endfor %}
                </tbody>
              </table>
            </div>
            <div class="form-text mt-2">Token values are only shown once when created and cannot be retrieved later.</div>
          {% endif %}
        </div>
      </div>
    </div>
  </div>
  {% with
    modal_id="confirm-revoke-token",
    modal_title="Revoke token",
    modal_body='Revoke <span class="fw-semibold" data-confirm-name></span>?',
    modal_confirm_text="Revoke token",
    modal_desc="Revoking a token immediately prevents it from being used to authenticate API requests. This action cannot be undone."
  %}
    {% include "partials/confirm_modal.html" %}
  {% endwith %}
  {% with
    modal_id="confirm-delete-token",
    modal_title="Delete token",
    modal_body='Delete <span class="fw-semibold" data-confirm-name></span>?',
    modal_confirm_text="Delete token",
    modal_desc="This token is permanently deleted and cannot be restored."
  %}
    {% include "partials/confirm_modal.html" %}
  {% endwith %}
{% endblock %}

{% block scripts %}
  <script>
    PearingScripts.initAutoSubmitFilters("profile-token-filters", {
      submitOnChangeForm: true,
      submitOnBlur: true
    });
    PearingScripts.initConfirmModal("confirm-revoke-token");
    PearingScripts.initConfirmModal("confirm-delete-token");
  </script>
{% endblock %}