{% extends "base.html" %}
{% block content %}
<h1 class="page-title">Account</h1>
<div class="card mb-3">
  <div class="card-body">
    <p class="mb-1"><strong>Username</strong></p>
    <p class="text-muted mb-4">{{ username | e }}</p>
    <p class="mb-0">
      <a class="btn btn-outline-secondary" href="/logout?next=/">Sign out</a>
    </p>
  </div>
</div>

<div class="card">
  <div class="card-body">
    <h2 class="h3">API keys</h2>
    {% if api_key_expiry_days %}
    <p class="text-muted">New keys expire after {{ api_key_expiry_days }} day{% if api_key_expiry_days != 1 %}s{% endif %}. You can hold {{ api_key_max }}.</p>
    {% else %}
    <p class="text-muted">New keys do not expire. You can hold {{ api_key_max }}.</p>
    {% endif %}
    {% if api_keys is none %}
    <p class="mb-0">No local account matches this session, so API keys cannot be stored.</p>
    {% else %}
    <div id="api-key-alert" class="alert d-none" role="alert"></div>
    <div id="api-key-secret-panel" class="alert alert-success d-none" role="status">
      <p class="mb-2">Copy this key now. It will not be shown again.</p>
      <input id="api-key-secret" class="form-control" type="text" readonly>
    </div>
    <div class="table-responsive mb-3">
      <table class="table table-vcenter" id="api-key-table" data-api-key-max="{{ api_key_max }}">
        <thead>
          <tr>
            <th>Id</th>
            <th>Access</th>
            <th>Issued</th>
            <th>Expires</th>
            <th></th>
          </tr>
        </thead>
        <tbody>
          {% for key in api_keys %}
          <tr data-key-id="{{ key.id | e }}">
            <td>{{ key.id | e }}</td>
            <td>{% if key.readonly %}Read only{% else %}Read and write{% endif %}</td>
            <td>{{ key.time_issued | e }}</td>
            <td>{% if key.time_expiry %}{{ key.time_expiry | e }}{% else %}Never{% endif %}</td>
            <td class="text-end">
              <button type="button" class="btn btn-outline-danger btn-sm" data-revoke-key="{{ key.id | e }}">Revoke</button>
            </td>
          </tr>
          {% else %}
          <tr id="api-key-empty"><td colspan="5" class="text-muted">No API keys yet.</td></tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
    {% if api_keys | length < api_key_max %}
    <form id="api-key-form" class="row g-3 align-items-end">
      <div class="col-md-5">
        <label class="form-label required" for="api-key-id">Key id</label>
        <input class="form-control" id="api-key-id" name="id" required minlength="1" autocomplete="off">
      </div>
      <div class="col-md-4">
        <label class="form-check">
          <input class="form-check-input" id="api-key-readonly" type="checkbox">
          <span class="form-check-label">Read only</span>
        </label>
      </div>
      <div class="col-md-3">
        <button type="submit" class="btn btn-primary">Create key</button>
      </div>
    </form>
    {% else %}
    <p class="mb-0 text-muted" id="api-key-limit">Key limit reached. Revoke one to issue another.</p>
    {% endif %}
    {% endif %}
  </div>
</div>
{% endblock %}
{% block scripts %}
{% if api_keys is not none %}
<script type="module" src="/static/user-keys.js"></script>
{% endif %}
{% endblock %}