neiam /fieri-forever

{% extends "root.html" %}

{% block content %}
<div class="space-y-4">
  <h2 class="text-2xl font-bold text-accent">Pair {{ device.label or "a device" }}</h2>
  <div class="alert alert-warning text-sm">
    <i class="fas fa-triangle-exclamation"></i>
    <span>This is the only time the token is shown. Scan it now; to pair again later, make a new one.</span>
  </div>

  <div class="card bg-base-200 p-4">
    <div class="flex flex-col md:flex-row items-center gap-6">
      <div class="bg-white p-3 rounded-box">{{ qr_svg | safe }}</div>
      <ol class="text-sm space-y-2 list-decimal list-inside">
        <li>Open {{ app_name }} on your phone.</li>
        <li>Tap <strong>Scan QR</strong> and point it here.</li>
        <li>That's it: it signs in as {{ user.username }}.</li>
      </ol>
    </div>
  </div>

  <details class="collapse collapse-arrow bg-base-200 border border-base-300">
    <summary class="collapse-title text-sm font-semibold">Can't scan? Enter it by hand</summary>
    <div class="collapse-content space-y-2 text-sm">
      <div><span class="opacity-70">Server</span> <code class="text-xs block break-all">{{ base_url }}</code></div>
      <div><span class="opacity-70">Token</span> <code class="text-xs block break-all">{{ token }}</code></div>
      <div><span class="opacity-70">Pairing link</span> <code class="text-xs block break-all">{{ pair_uri }}</code></div>
      <pre class="text-xs overflow-x-auto bg-base-300 p-2 rounded">curl -H "Authorization: Bearer {{ token }}" {{ base_url }}/api/profile</pre>
    </div>
  </details>

  <a href="/devices" class="btn btn-ghost btn-sm">&larr; Devices</a>
</div>
{% endblock %}