{% extends "base.html" %}
{% load lang %}

{% block title %}{{ "Unlock"|t }}{% endblock %}
{% block topbar %}{{ "Unlock"|t }}{% endblock %}

{% block head %}
    <style>
      .unlock { max-width: 26rem; margin: 4rem auto; }
      .unlock h1 { font-size: 1.4rem; margin-bottom: 0.4rem; }
      .unlock p { color: var(--muted); margin-top: 0; }
      .unlock form { display: flex; flex-direction: column; gap: 0.7rem; margin-top: 1.5rem; }
      .unlock input { font: inherit; padding: 0.7rem 0.9rem; border: 1px solid var(--border);
                      border-radius: 0.6rem; background: var(--surface); color: var(--ink); }
      .unlock input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
      .unlock .error { color: var(--warn-ink); font-size: 0.9rem; margin: 0; }
    </style>
{% endblock %}

{% block content %}
    <main class="unlock">
        <h1>{{ "These notes are locked"|t }}</h1>
        <p>{{ "Enter the access token to open a session on this device."|t }}</p>
        <form method="post">
            {% csrf_token %}
            <input type="hidden" name="next" value="{{ next }}">
            <!-- type=password so the token is not left readable on screen, and
                 autofocus because unlocking is the only thing to do here. -->
            <input type="password" name="token" autocomplete="current-password"
                   autofocus aria-label="{{ "Access token"|t }}" placeholder="{{ "Access token"|t }}">
            {% if error %}<p class="error">{{ error }}</p>{% endif %}
            <button type="submit" class="btn btn-primary">{{ "Unlock"|t }}</button>
        </form>
    </main>
{% endblock %}