{% extends "base.html" %}

{% block page_class %}page-narrow{% endblock %}

{% block subtitle %}
<p class="sub">Claim your frame</p>
{% endblock %}

{% block extra_head %}
  {% if status == "unregistered" %}<meta http-equiv="refresh" content="6">{% endif %}
{% endblock %}

{% block content %}
  {% if error %}<div class="status err">{{ error }}</div>{% endif %}

  <section class="card">
    <h2 class="card-title">Frame <code>{{ device_id }}</code></h2>

    {% if status == "claimed_yours" %}
      <div class="status ok">This frame is linked to your account.</div>
      <p class="sub">It will show up in your frame list. If it was just
        provisioned, give it a minute to connect and fetch its first image.</p>
      <p><a href="/">Go to your frames</a></p>

    {% elif status == "claimed" %}
      <p class="sub">This frame already belongs to someone. If it's yours,
        ask them (or an admin) to link your account to it.</p>

    {% elif status == "unregistered" %}
      {% if pending_yours %}
        <div class="status ok">Claim recorded.</div>
        <p class="sub">Waiting for the frame to connect for the first time --
          it links to your account automatically the moment it checks in.
          This page refreshes itself; it's safe to close, too.</p>
      {% else %}
        <p class="sub">The frame hasn't checked in yet -- it's probably still
          restarting and joining your WiFi. This page refreshes itself.
          {% if user %}You can claim it now anyway; it'll attach when it
          arrives.{% endif %}</p>
      {% endif %}
    {% elif status == "unclaimed" %}
      <p class="sub">This frame is connected and ready to be claimed.</p>
    {% endif %}

    {% if user and status in ("unclaimed", "unregistered") and not pending_yours %}
      <form method="post" action="/claim">
        <input type="hidden" name="device_id" value="{{ device_id }}">
        <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
        <button type="submit">Claim this frame</button>
      </form>
    {% endif %}
  </section>

  {% if not user and status in ("unclaimed", "unregistered") %}
    <section class="card">
      <h2 class="card-title">Create your account</h2>
      <p class="sub">A valid frame is your invitation -- set up an account to
        claim it. Already have one?
        <a href="/login?next=/claim%3Fdevice_id%3D{{ device_id }}">Log in instead</a>.</p>
      <form method="post" action="/claim/signup">
        <input type="hidden" name="device_id" value="{{ device_id }}">
        <label>Username
          <input type="text" name="username" maxlength="64" required autocomplete="username">
        </label>
        <label>Password
          <input type="password" name="password" minlength="8" required autocomplete="new-password">
        </label>
        <button type="submit">Create account &amp; claim frame</button>
      </form>
    </section>
  {% endif %}
{% endblock %}