{% extends "base.html" %}
{% block title %}API Key: {{ api_key.name }} — {{ club.name }}{% endblock %}

{% block content %}
<h3><i class="bi bi-key"></i> {{ club.name }} &mdash; {{ api_key.name }}</h3>

<div class="mb-3 d-flex flex-wrap gap-2 align-items-center">
  <a href="{% url 'club_api_keys' club.slug %}" class="btn btn-sm btn-secondary"><i class="bi bi-arrow-left"></i> Back to API keys</a>
  {% if api_key.is_active %}
  <a href="{% url 'club_api_key_revoke' club.slug api_key.pk %}" class="btn btn-sm btn-outline-danger"><i class="bi bi-slash-circle"></i> Revoke key</a>
  {% endif %}
</div>

{% if new_raw_key %}
<div class="alert alert-warning text-dark">
  <strong><i class="bi bi-exclamation-triangle-fill"></i> Save this key now — it will not be shown again.</strong>
  <div class="mt-2 d-flex align-items-center gap-2 flex-wrap">
    <code id="raw-key" class="fs-6 p-2 bg-light rounded border text-dark">{{ new_raw_key }}</code>
    <button type="button" class="btn btn-sm btn-outline-dark" onclick="navigator.clipboard.writeText(document.getElementById('raw-key').textContent).then(()=>{this.textContent='Copied!';setTimeout(()=>{this.textContent='Copy'},1500)})">Copy</button>
  </div>
</div>
{% endif %}

<div class="row mb-4">
  <div class="col-md-6">
    <table class="table table-sm table-borderless">
      <tr><th class="text-muted" style="width:8rem">Prefix</th><td><code>{{ api_key.prefix }}…</code></td></tr>
      <tr><th class="text-muted">Status</th><td>{% if api_key.is_active %}<span class="badge bg-success">Active</span>{% else %}<span class="badge bg-secondary">Revoked</span>{% endif %}</td></tr>
      <tr><th class="text-muted">Created</th><td>{{ api_key.created_at|date:"N j, Y g:i a" }}</td></tr>
      <tr><th class="text-muted">Last used</th><td>{{ api_key.last_used_at|date:"N j, Y g:i a"|default:"Never" }}</td></tr>
    </table>
    <p class="small text-muted"><i class="bi bi-clock-history"></i> Track activity for this key in <a href="{% url 'club_history' club.slug %}?query={{ api_key.prefix }}">club history</a> — search for <code>{{ api_key.prefix }}</code>.</p>
  </div>
</div>

<h5>Permissions</h5>
<table class="table table-sm mb-4" style="max-width:640px">
  <tbody>
    <tr><th style="width:18rem">Add club members</th><td>{% if api_key.can_add_club_members %}<span class="badge bg-success">Enabled</span>{% else %}<span class="badge bg-secondary">Disabled</span>{% endif %}</td></tr>
    <tr><th>Read club member list</th><td>{% if api_key.can_read_club_member_list %}<span class="badge bg-success">Enabled</span>{% else %}<span class="badge bg-secondary">Disabled</span>{% endif %}</td></tr>
    <tr><th>Update club members</th><td>{% if api_key.can_update_club_members %}<span class="badge bg-success">Enabled</span>{% else %}<span class="badge bg-secondary">Disabled</span>{% endif %}</td></tr>
    <tr><th>Add BAP points</th><td>{% if api_key.can_add_bap_points %}<span class="badge bg-success">Enabled</span>{% else %}<span class="badge bg-secondary">Disabled</span>{% endif %}</td></tr>
  </tbody>
</table>

<h5>Example endpoints</h5>
<div class="mb-3 small text-muted">
  Send this key in the <code>X-API-Key</code> header (or <code>Authorization: Api-Key &lt;key&gt;</code>).<br>
  For write requests, also include <code>Content-Type: application/json</code> and send a JSON body.
</div>
<div class="small text-muted mb-4">
  {% if api_key.can_add_club_members %}
  <div class="mb-2">
    <strong>Add club member:</strong> <code>POST https://{{ site_domain }}/api/v1/clubs/{{ club.slug }}/members/</code><br>
    <span class="ms-3 text-muted">Example body: <code>{"name":"Mike","email":"mike@example.com"}</code></span>
  </div>
  {% endif %}
  {% if api_key.can_read_club_member_list %}
  <div class="mb-2">
    <strong>Read club member list:</strong> <code>GET https://{{ site_domain }}/api/v1/clubs/{{ club.slug }}/members/</code><br>
    <span class="ms-3 text-muted">
      Filter by name: <code>?name=mike</code> &mdash;
      or use the same text filter as the admin member list: <code>?filter=expired</code>, <code>?filter=mike</code>, etc.
      (tokens: <code>discord</code>, <code>current</code>, <code>expired</code>, <code>expiring</code>, <code>never paid</code>, or any name/email text)
    </span>
  </div>
  {% endif %}
  {% if api_key.can_update_club_members %}
  <div class="mb-2">
    <strong>Update club member:</strong> <code>PATCH https://{{ site_domain }}/api/v1/clubs/{{ club.slug }}/members/{{ example_member_id|default:"123" }}/</code><br>
    <span class="ms-3 text-muted">Example body: <code>{"email":"mike@example.com"}</code></span>
  </div>
  {% endif %}
  {% if api_key.can_add_bap_points %}
  <div class="mb-2">
    <strong>Add BAP points:</strong> <code>POST https://{{ site_domain }}/api/v1/clubs/{{ club.slug }}/members/{{ example_member_id|default:"123" }}/bap-awards/</code><br>
    <span class="ms-3 text-muted">Example body: <code>{"points":5,"notes":"Bred angelfish","email":"mike@example.com"}</code></span>
  </div>
  {% endif %}
</div>

<h5>Field mappings</h5>
<p class="text-muted small">Map incoming field names to club member fields. Unmapped fields are passed through unchanged if they match an allowed field name.</p>
<p class="text-muted small"><i class="bi bi-info-circle"></i> Members store a single <code>name</code> field. If <code>first_name</code> and/or <code>last_name</code> are sent (or mapped) instead, they will be combined into <code>name</code>.</p>
<p class="text-muted small"><i class="bi bi-info-circle"></i> Field mapping applies to club member create and update payloads. BAP point requests always use the fixed <code>points</code>, <code>date</code>, and <code>notes</code> fields directly.</p>

{% if field_mappings %}
<table class="table table-sm mb-3" style="max-width:480px">
  <thead><tr><th>External field (incoming)</th><th>Internal field</th><th></th></tr></thead>
  <tbody>
    {% for mapping in field_mappings %}
    <tr>
      <td><code>{{ mapping.external_field }}</code></td>
      <td><code>{{ mapping.internal_field }}</code></td>
      <td class="text-end">
        <form method="post" action="{% url 'club_api_key_mapping_delete' club.slug api_key.pk mapping.pk %}" class="d-inline">
          {% csrf_token %}
          <button type="submit" class="btn btn-sm btn-outline-danger py-0">Remove</button>
        </form>
      </td>
    </tr>
    {% endfor %}
  </tbody>
</table>
{% else %}
<p class="text-muted small">No mappings yet.</p>
{% endif %}

{% if api_key.is_active %}
<form method="post" action="{% url 'club_api_key_mapping_add' club.slug api_key.pk %}" class="d-flex gap-2 align-items-end flex-wrap" style="max-width:560px">
  {% csrf_token %}
  <div>
    <label class="form-label small fw-semibold mb-1">External field</label>
    <input type="text" name="external_field" class="form-control form-control-sm" placeholder="e.g. email_address" required style="width:180px">
  </div>
  <div class="text-muted mt-3">&rarr;</div>
  <div>
    <label class="form-label small fw-semibold mb-1">Internal field</label>
    <select name="internal_field" class="form-select form-select-sm" style="width:160px">
      {% for field in available_fields %}
      <option value="{{ field }}">{{ field }}</option>
      {% endfor %}
    </select>
  </div>
  <button type="submit" class="btn btn-sm btn-primary mb-0">Add mapping</button>
</form>

<div class="mt-3 small text-muted">
  <strong>Allowed mapped club member fields:</strong>
  {% for field in available_fields %}<code>{{ field }}</code>{% if not forloop.last %}, {% endif %}{% endfor %}
</div>
{% endif %}

<div id="modals-here"></div>
{% endblock %}