{% extends "base.html" %}
{% import "_ui.html" as ui %}
{% block title %}Tadpole: phone{% endblock %}
{% block body %}
{% call ui.title('i-phone', 'Your phone') %}The Tadpole app on your phone keeps your diary on the phone itself. Pairing connects it to this computer so a copy of the diary is kept here, and so history and documents can be sent to the phone. It works over your home Wi-Fi, and over Tailscale if you use it. Making a key here shows a pairing code once: scan it with your phone's camera app and tap the link, or copy the link into the app under Settings. Cancel a key to unpair that phone.{% endcall %}

<div class="card">
  {% call ui.head('i-app', 'The phone app') %}A small app ({{ apk_kb }} KB) that keeps your diary on your phone and has the home-screen widget. It is signed with this computer's own key and is not on any store, so Android will ask permission to install from your browser the first time. Installing it over an older Tadpole widget app keeps the widget but starts with an empty diary on the phone: pair it below to bring your diary across.{% endcall %}
  {% if apk %}<a class="btn" href="/download/tadpole-widget.apk">Download the phone app</a>{% else %}<p class="small">The phone app has not been built on this computer yet.</p>{% endif %}
</div>

<div class="card">
  {% call ui.head('i-new', 'Pair a phone') %}Give the phone a name so you can tell phones apart later. The code includes a secret key, so only show it to the phone you are pairing.{% endcall %}
  {% if not tls_ready %}<div class="error">The home Wi-Fi listener is not set up on this computer yet, so only Tailscale addresses will work. Run the companion setup once to enable it.</div>{% endif %}
  <form method="post" action="/settings/phone/new" class="row">
    <label class="f" style="margin:0;flex:1 1 200px">Name<input type="text" name="name" value="My phone" maxlength="40"></label>
    <button class="btn" type="submit">Make a pairing code</button>
  </form>
</div>

{% if new_token %}
<div class="card aged">
  {% call ui.head('i-code', 'Scan this with your phone') %}Open your phone's camera app, point it at the code, and tap the link that appears to open Tadpole. If nothing happens, copy the long link below into the app: Settings, Computer, paste the pairing link. The code and the key are shown only once. The phone needs to be on the same Wi-Fi as this computer, or on Tailscale.{% endcall %}
  <div class="qr">{{ qr|safe }}</div>
  <label class="f">Pairing link<input type="text" readonly value="{{ link }}" onfocus="this.select()"></label>
  <p class="small muted">{% for u in urls %}{{ u.label }}: {{ u.url }}{% if not loop.last %} &middot; {% endif %}{% endfor %}{% if not urls %}No address found to give the phone.{% endif %}</p>
</div>
{% endif %}

<div class="card tscroll"><h3>Paired phones</h3>
  <table class="t"><thead><tr><th>Name</th><th>Made</th><th>Last synced</th><th></th></tr></thead><tbody>
  {% for k in phones %}<tr><td>{{ k.name }}</td><td class="small">{{ k.created_at[:10] }}</td><td class="small">{{ (k.last_used_at or 'never')[:16]|replace('T', ' ') }}</td>
    <td>{% if k.revoked_at %}<span class="chip">cancelled</span>{% else %}<form method="post" action="/settings/phone/revoke"><input type="hidden" name="id" value="{{ k.id }}"><button class="btn ghost" type="submit">Cancel</button></form>{% endif %}</td></tr>
  {% else %}<tr><td colspan="4" class="muted">No phones yet.</td></tr>{% endfor %}
  </tbody></table></div>
{% endblock %}