{% extends "console_page.html" %}

{% block console_content %}
<div x-data="{}">
  <div id="api-key-result"></div>

  <div class="gobii-card-base">
    <div class="px-6 py-4 border-b border-gray-200/70 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
      <div class="space-y-2">
        <h1 class="text-2xl font-semibold text-gray-800">API Keys</h1>
        <p class="text-sm text-gray-500">API keys provide access to the Gobii API. Keep them secure.</p>
        {% if api_key_context.type == 'organization' %}
          <p class="text-xs text-gray-500">These keys authenticate requests on behalf of {{ api_key_context.organization.name }}.</p>
          {% if not can_manage_api_keys %}
            <div class="inline-flex items-center gap-2 text-xs text-amber-700 bg-amber-50 border border-amber-200 rounded-lg px-3 py-1">
              <i aria-hidden="true" data-lucide="shield-alert" class="w-4 h-4"></i>
              <span>Read-only access — contact an owner or admin to create or manage keys.</span>
            </div>
          {% endif %}
        {% endif %}
        {% if not email_verified %}
          <div x-data="{ sending: false, sent: false, error: '' }" class="inline-flex items-center gap-2 text-xs text-amber-700 bg-amber-50 border border-amber-200 rounded-lg px-3 py-1">
            <i aria-hidden="true" data-lucide="mail-warning" class="w-4 h-4"></i>
            <span>Please verify your email address to create API keys.</span>
            <button
              type="button"
              x-show="!sent"
              x-bind:disabled="sending"
              @click="
                sending = true;
                error = '';
                fetch('{% url 'console_user_email_resend_verification' %}', {
                  method: 'POST',
                  headers: { 'X-CSRFToken': '{{ csrf_token }}' }
                })
                .then(r => r.json())
                .then(data => {
                  sending = false;
                  if (data.error) { error = data.error; }
                  else { sent = true; }
                })
                .catch(() => { sending = false; error = 'Failed to send.'; });
              "
              class="underline hover:text-amber-800 disabled:opacity-50"
              x-text="sending ? 'Sending...' : 'Resend email'"
            ></button>
            <span x-show="sent" class="text-green-700">Sent!</span>
            <span x-show="error" class="text-red-700" x-text="error"></span>
          </div>
        {% endif %}
      </div>

      {% if can_manage_api_keys and email_verified %}
        <button hx-get="{% url 'api_key_create_modal' %}" hx-target="#modal-container" hx-swap="innerHTML"
          class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 focus:ring-4 focus:ring-blue-300 font-medium text-sm shadow-sm hover:shadow-md transition-all w-max">
          Create New Key
        </button>
      {% endif %}
    </div>

    <div class="overflow-x-auto">
      <table class="w-full divide-y divide-gray-200/70">
        <thead class="bg-gray-50/50">
          <tr>
            <th scope="col" class="px-3 md:px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Name</th>
            {% if api_key_context.type == 'organization' %}
              <th scope="col" class="px-3 md:px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Created By</th>
            {% endif %}
            <th scope="col" class="px-3 md:px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Created</th>
            <th scope="col" class="px-3 md:px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Last Used</th>
            <th scope="col" class="px-3 md:px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
            <th scope="col" class="px-3 md:px-6 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider" colspan="2">Actions</th>
          </tr>
        </thead>
        <tbody class="divide-y divide-gray-200/70" id="api-key-table-body"
               hx-get="{% url 'api_keys_table' %}"
               hx-trigger="refreshApiKeysTable from:body"
               hx-swap="innerHTML">
          {% for key in api_keys %}
            {% include "partials/_api_key_row.html" with key=key api_key_context=api_key_context can_manage_api_keys=can_manage_api_keys %}
          {% empty %}
            <tr>
              <td colspan="{% if api_key_context.type == 'organization' %}7{% else %}6{% endif %}" class="px-3 md:px-6 py-4 whitespace-nowrap text-sm text-gray-500 text-center">
                No API keys found.{% if can_manage_api_keys and email_verified %} Create one to get started.{% endif %}
              </td>
            </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>

  {% include "partials/_delete_confirm_modal.html" %}
  {% include "partials/_revoke_confirm_modal.html" %}

</div>
{% endblock %}