{% extends "portal/base.html" %}

{% block title %}API Key - 虾皮圈{% endblock %}

{% block content %}
<div class="d-flex flex-column gap-4">
  <div>
    <h1 class="h3 mb-1">API Key</h1>
    <div class="text-secondary">{{ user.email }}</div>
  </div>

  {% if new_api_key %}
    <div class="alert alert-warning mb-0">
      <div class="fw-semibold mb-2">新 Key 只显示一次</div>
      <input class="form-control font-monospace key-value" type="text" value="{{ new_api_key.raw_key }}" readonly>
      <div class="small mt-2">prefix：<code>{{ new_api_key.key_prefix }}</code></div>
    </div>
  {% endif %}

  <section class="cmhub-surface">
    <h2 class="h5 mb-3">生成 Key</h2>
    <form method="post" class="row g-3 align-items-end">
      {% csrf_token %}
      <div class="col-md-8">
        <label class="form-label" for="{{ form.name.id_for_label }}">{{ form.name.label }}</label>
        {{ form.name }}
        {% if form.name.errors %}
          <div class="text-danger small mt-1">{{ form.name.errors|striptags }}</div>
        {% endif %}
      </div>
      <div class="col-md-4">
        <button class="btn btn-primary w-100" type="submit">生成</button>
      </div>
    </form>
  </section>

  <section class="cmhub-surface">
    <h2 class="h5 mb-3">Key 列表</h2>
    {% if api_keys %}
      <div class="table-responsive">
        <table class="table align-middle mb-0">
          <thead>
            <tr>
              <th scope="col">prefix</th>
              <th scope="col">名称</th>
              <th scope="col">状态</th>
              <th scope="col">最近使用</th>
              <th scope="col">创建时间</th>
              <th scope="col" class="text-end">操作</th>
            </tr>
          </thead>
          <tbody>
            {% for api_key in api_keys %}
              <tr>
                <td><code>{{ api_key.key_prefix }}</code></td>
                <td>{{ api_key.name|default:"-" }}</td>
                <td>
                  {% if api_key.status == "active" %}
                    <span class="badge text-bg-success">active</span>
                  {% else %}
                    <span class="badge text-bg-secondary">revoked</span>
                  {% endif %}
                </td>
                <td>{{ api_key.last_used_at|date:"Y-m-d H:i"|default:"-" }}</td>
                <td>{{ api_key.created_at|date:"Y-m-d H:i" }}</td>
                <td class="text-end">
                  {% if api_key.status == "active" %}
                    <form method="post" action="{% url 'portal-apikey-delete' api_key.pk %}">
                      {% csrf_token %}
                      <button class="btn btn-sm btn-outline-danger" type="submit">删除</button>
                    </form>
                  {% else %}
                    <span class="text-secondary small">已删除</span>
                  {% endif %}
                </td>
              </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    {% else %}
      <div class="text-secondary">暂无 API Key</div>
    {% endif %}
  </section>
</div>
{% endblock %}