{% extends "base.html" %}

{% block content %}
<section class="dashboard-section">
  <div class="section-heading">
    <div>
      <p class="eyebrow">Credentials</p>
      <h1>Manage API keys</h1>
    </div>
  </div>

  <div class="card-grid">
    <article class="resource-card">
      <div class="resource-header">
        <div>
          <h3>Create key</h3>
          <p class="resource-subtitle">API keys authenticate as <strong>{{ current_user.display_name }}</strong> for
            REST and MCP access</p>
        </div>
      </div>
      <p class="resource-note">
        Keys can be revealed again from this page and revoked individually at any time.
      </p>
      <form class="auth-form" action="{{ mount_prefix }}{{ web_app.url_path_for('api_key_create') }}" method="post">
        <label class="field">
          <span>Label</span>
          <input name="label" placeholder="Laptop, CI smoke tests, local script" required>
        </label>
        <div class="button-row">
          <button class="button" type="submit">Create API key</button>
          <a class="button button-secondary" href="{{ mount_prefix }}{{ web_app.url_path_for('home') }}">Back home</a>
        </div>
      </form>
    </article>
  </div>
</section>

{% if revealed_api_key %}
<section class="dashboard-section">
  <div class="resource-card">
    <div class="section-heading">
      <div>
        <p class="eyebrow">Reveal</p>
        <h2>Full API key</h2>
      </div>
    </div>
    <label class="field">
      <span>Copyable value</span>
      <div class="copy-field">
        <input id="revealed-api-key" readonly value="{{ revealed_api_key }}">
        <button class="button button-secondary" type="button" data-copy-target="revealed-api-key">
          Copy
        </button>
      </div>
    </label>
  </div>
</section>
{% endif %}

<section class="dashboard-section">
  <div class="section-heading">
    <div>
      <p class="eyebrow">Current User</p>
      <h2>API Keys</h2>
    </div>
  </div>

  <div class="card-grid">
    {% for api_key in api_keys %}
    <article class="resource-card">
      <div class="resource-header">
        <div>
          <h3>{{ api_key.label }}</h3>
          <p class="resource-subtitle">{{ api_key.preview }}</p>
        </div>
        <span class="status-pill status-{{ 'ready' if api_key.is_active else 'offline' }}">
          {{ 'active' if api_key.is_active else 'revoked' }}
        </span>
      </div>
      <dl class="resource-meta">
        <div>
          <dt>Key id</dt>
          <dd>{{ api_key.key_id }}</dd>
        </div>
        <div>
          <dt>Created</dt>
          <dd>{{ api_key.created_at }}</dd>
        </div>
        <div>
          <dt>Last used</dt>
          <dd>{{ api_key.last_used_at or "never" }}</dd>
        </div>
        <div>
          <dt>Selected</dt>
          <dd>{{ "yes" if selected_api_key_id == api_key.id else "no" }}</dd>
        </div>
      </dl>
      {% if api_key.revoked_at %}
      <p class="resource-note">Revoked at {{ api_key.revoked_at }}.</p>
      {% endif %}
      <div class="button-row">
        <a class="button button-secondary"
          href="{{ mount_prefix }}{{ web_app.url_path_for('api_key_detail_page', api_key_id=api_key.id) }}">Reveal</a>
        {% if api_key.is_active %}
        <form action="{{ mount_prefix }}{{ web_app.url_path_for('api_key_revoke', api_key_id=api_key.id) }}"
          method="post">
          <button class="button button-danger" type="submit">Revoke</button>
        </form>
        {% endif %}
      </div>
    </article>
    {% else %}
    <article class="resource-card resource-card-empty">
      <h3>No API keys yet</h3>
      <p class="resource-note">
        Create a key to authenticate to the REST API and MCP endpoint.
      </p>
    </article>
    {% endfor %}
  </div>
</section>
{% endblock %}

{% block scripts %}
<script>
  document.addEventListener("click", function (event) {
    var button = event.target.closest("[data-copy-target]");
    if (!button) return;

    var inputId = button.getAttribute("data-copy-target");
    var input = document.getElementById(inputId);
    if (!input) return;

    input.select();
    input.setSelectionRange(0, 99999);
    try {
      document.execCommand("copy");
      button.textContent = "Copied";
      setTimeout(function () {
        button.textContent = "Copy";
      }, 2000);
    } catch (e) {
      // If copying fails, leave the button text unchanged.
    }
  });

  document.addEventListener('DOMContentLoaded', function () {
    {% if error_message %} window.showInfoStrap && showInfoStrap('{{ error_message }}', 'error'); {% endif %}
    {% if success_message %} window.showInfoStrap && showInfoStrap('{{ success_message }}', 'success'); {% endif %}
  });
</script>
{% endblock %}