{% extends "base.html" %}

{% block content %}
  <div class="row g-4">
    <div class="col-12 col-lg-3">
      <div class="card shadow-sm mb-3">
        {% with staff_nav_active="users" %}
          {% include "partials/staff_sidebar.html" %}
        {% endwith %}
      </div>
    </div>
    <div class="col-12 col-lg-9">
      <div class="d-flex flex-wrap align-items-center justify-content-between gap-2 mb-3">
        <div>
          {% with breadcrumbs=[
            {"name": "Staff", "href": "/staff"},
            {"name": "Users", "href": "/staff/users"},
            {"name": user.name | display_name(user.username), "href": "/staff/users/" ~ user.uuid},
            {"name": "Security"}
          ] %}
            {% include "partials/breadcrumbs.html" %}
          {% endwith %}
          <h1 class="h3 mb-0">{{ user.name | display_name(user.username) }}</h1>
        </div>
      </div>
      {% with staff_user_tabs_base="/staff/users/" ~ user.uuid, staff_user_tabs_active="security" %}
        {% include "partials/staff_user_tabs.html" %}
      {% endwith %}
      {% include "partials/flash.html" %}
      <div class="card shadow-sm mb-3">
        <div class="card-body">
          <div class="d-flex flex-wrap align-items-center justify-content-between gap-2">
            <div>
              <div class="text-uppercase text-muted small fw-semibold">Password</div>
              <div class="text-muted">Reset this user's password.</div>
            </div>
            <a class="btn btn-outline-secondary" href="/staff/users/{{ user.uuid }}/password">Change password</a>
          </div>
        </div>
      </div>
      {% 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="/staff/users/{{ user.uuid }}/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>
          {% 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>
                    <th>Created</th>
                    <th>Expires</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="/staff/users/{{ user.uuid }}/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="{{ revoke_form.csrf_token }}">
                            <button class="btn btn-sm btn-outline-danger" type="submit">Revoke</button>
                          </form>
                        {% elif token.is_revoked %}
                          <form
                            method="post"
                            action="/staff/users/{{ user.uuid }}/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="{{ revoke_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.initConfirmModal("confirm-revoke-token");
    PearingScripts.initConfirmModal("confirm-delete-token");
  </script>
{% endblock %}