{% extends 'base.html' %}
{% set title = 'Unlock' %}

{% block content %}
  <section class="hero-grid">
    <div class="panel panel-hero">
      <div class="eyebrow">Locked delivery</div>
      <h1>Unlock your APIKey:SecretNumber batch</h1>
      <p class="lede">
        This page stays locked until the customer enters a valid purchased key. Each key can be tied to a
        specific credential batch and can be revoked, limited, or expired by the admin panel.
      </p>
      <form method="post" action="{{ url_for('public.unlock') }}" class="stack-form">
        {{ form.hidden_tag() }}
        <div class="field-group">
          {{ form.access_key.label(class_='field-label') }}
          {{ form.access_key(class_='field-input', placeholder='Paste your access key') }}
          {% for error in form.access_key.errors %}
            <p class="field-error">{{ error }}</p>
          {% endfor %}
        </div>
        {{ form.submit(class_='primary-button wide-button') }}
      </form>
      {% if has_session %}
        <a href="{{ url_for('public.delivery') }}" class="secondary-button wide-button">Return to unlocked delivery</a>
      {% endif %}
    </div>

    <div class="panel panel-muted">
      <div class="eyebrow">What this does</div>
      <div class="feature-block">
        <h2>Customer flow</h2>
        <p>Customer enters their purchased key, unlocks the page, and sees only the batch attached to that key.</p>
      </div>
      <div class="feature-block">
        <h2>Admin control</h2>
        <p>Create a batch once, generate any number of keys for it, pause it, expire it, or revoke individual keys.</p>
      </div>
      <div class="feature-block">
        <h2>Minimal UI</h2>
        <p>Clean, distraction-free delivery page with copy buttons and a locked-by-default entry flow.</p>
      </div>
    </div>
  </section>
{% endblock %}