{% extends "base.html" %}
{% import "_ui.html" as ui %}
{% block title %}Tadpole: the widget{% endblock %}
{% block body %}
{% call ui.title('i-widget', 'The Widget') %}A real Android home-screen widget: your tadpole, how it is doing, and a box to type an entry straight from the home screen. If the phone is out of range, entries are kept and sent later.{% endcall %}

<div class="card">
  {% call ui.head('i-install', '1. Install the widget app') %}A small app ({{ apk_kb }} KB) that holds the widget. It is signed with this machine's own key and is not on any store, so Android will ask permission to install from Chrome the first time.{% endcall %}
  {% if apk %}
  <a class="btn" href="/download/tadpole-widget.apk">Download the widget app</a>
  {% else %}<p class="small">The widget app has not been built on this machine yet.</p>{% endif %}
</div>

<div class="card">
  {% call ui.head('i-key', '2. Make a key for this phone') %}The key lets the widget add and undo entries and read the tadpole's state. Nothing else, and it cannot read your diary. You can cancel it here at any time.{% endcall %}
  <form method="post" action="/settings/widget/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 key</button>
  </form>
</div>

{% if new_token %}
<div class="card aged">
  {% call ui.head('i-connect', '3. Connect the app') %}Open the button on the phone, with the widget app installed. If it does nothing, open the app and paste the address and key below. The key is shown only once. Then long-press the home screen, choose Widgets, find Tadpole, and drag it out.{% endcall %}
  <a class="btn" href="{{ link }}">Connect the widget app</a>
  <label class="f">Address<input type="text" readonly value="{{ base }}"></label>
  <label class="f">Key<input type="text" readonly value="{{ new_token }}"></label>
</div>
{% endif %}

<div class="card tscroll"><h3>Keys</h3>
  <table class="t"><thead><tr><th>Name</th><th>Made</th><th>Last used</th><th></th></tr></thead><tbody>
  {% for k in keys %}<tr><td>{{ k.name }}</td><td class="small">{{ k.created_at[:10] }}</td><td class="small">{{ (k.last_used_at or 'never')[:16] }}</td>
    <td>{% if k.revoked_at %}<span class="chip line">cancelled</span>{% else %}<form method="post" action="/settings/widget/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 keys yet.</td></tr>{% endfor %}
  </tbody></table></div>
{% endblock %}