{% extends "base.html" %}
{% block title %}Account - Invincible{% endblock %}
{% block content %}
<style>
  /* the one-time key sits inside a config-block; strip the nested
     inline-code chrome so the panel reads as one terminal line */
  .config-block .new-key-raw { background: none; border: none;
                               padding: 0; font-size: 1rem;
                               letter-spacing: 0.04em; }
</style>
<h2>Account</h2>
<p>Signed in as <strong>{{ email }}</strong>
{% if github_linked %}<span class="muted">(GitHub linked)</span>{% endif %}</p>

<h3>Projects</h3>
<form method="post" action="/projects" class="inline-form">
  <input type="text" name="name" placeholder="project name"
         maxlength="100" required>
  <button type="submit">Create project</button>
</form>
{% if project_error %}
<div class="banner">
  <p>{{ project_error }}</p>
</div>
{% endif %}
<ul class="plain">
  {% for project in projects %}
  <li>{{ project.name }}{% if project.is_default %}
      <span class="muted">(default)</span>{% endif %}
      {% if project.archived_at %}<span class="muted">(archived)</span>{% endif %}
  </li>
  {% else %}
  <li class="muted">No projects yet.</li>
  {% endfor %}
</ul>

<h3>API keys</h3>

<h4>Pair a device</h4>
<p class="muted">Approve a machine that started pairing
(<code>invincible harness connect</code> on first run, or <code>invincible
login</code>): type the code it printed.</p>
<form method="get" action="/auth/devices" class="inline-form">
  <input type="text" name="code" placeholder="device code (e.g. XK7M49QP)"
         maxlength="32" autocomplete="off" required>
  <button type="submit">Approve device</button>
</form>

<h4>Generate a key</h4>
<form method="post" action="/api-keys" class="inline-form">
  <input type="text" name="label" placeholder="label (optional)"
         maxlength="120">
  <button type="submit">Generate API key</button>
</form>

{% if new_key %}
<div class="banner new-key-banner">
  <p><strong>Copy your new API key now &mdash; it will not be shown
  again.</strong></p>
  <div class="config-block"><code class="new-key-raw">{{ new_key.raw }}</code><button class="copy-btn" type="button"
  data-copy="{{ new_key.raw }}"
  onclick="navigator.clipboard.writeText(this.dataset.copy)">Copy</button></div>
  {% if new_key.label %}<p class="muted">Label: {{ new_key.label }}</p>{% endif %}
</div>
{% endif %}

<div class="table-scroll">
<table>
  <thead><tr><th>Prefix</th><th>Label</th><th>Created</th><th>Status</th>
      <th></th></tr></thead>
  <tbody>
  {% for key in api_keys %}
  <tr class="api-key-row" data-key-id="{{ key.id }}">
    <td><code>{{ key.prefix }}</code></td>
    <td>{{ key.label }}</td>
    <td class="muted" title="{{ key.created_at | absdate }}">{{ key.created_at | timeago }}</td>
    <td>{% if key.revoked_at %}revoked{% else %}active{% endif %}</td>
    <td>
      {% if not key.revoked_at %}
      <button class="linklike revoke-key"
              hx-delete="/api-keys/{{ key.id }}"
              hx-target="closest tr" hx-swap="delete"
              hx-confirm="Revoke this API key? Clients using it stop
                          working immediately.">Revoke</button>
      {% endif %}
    </td>
  </tr>
  {% else %}
  <tr><td colspan="5" class="empty">No API keys yet - generate one above,
      or use <code>invincible login</code>.</td></tr>
  {% endfor %}
  </tbody>
</table>
</div>

<form method="post" action="/auth/logout">
  <button type="submit">Sign out</button>
</form>
{% endblock content %}