{% extends "base.html" %}
{% block title %}Login — {{ slug }} — Ontoref{% endblock title %}
{% block content %}
<div class="flex justify-center pt-16">
  <div class="card bg-base-200 shadow-xl w-full max-w-sm">
    <div class="card-body gap-4">
      <div class="text-center">
        <h1 class="text-2xl font-bold"><span style="color:#C0CCD8;">onto</span><span style="color:#E8A838;">ref</span></h1>
        <p class="text-base-content/60 text-sm mt-1 font-mono">{{ slug }}</p>
      </div>
      {% if error %}
      <div class="alert alert-error text-sm py-2">
        <svg class="w-4 h-4 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                d="M12 9v2m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
        </svg>
        Invalid key.
      </div>
      {% endif %}
      <form method="POST" action="/ui/{{ slug }}/login" class="flex flex-col gap-3">
        <div class="form-control">
          <label class="label pb-1">
            <span class="label-text text-xs uppercase tracking-wider text-base-content/50">Access key</span>
          </label>
          <input type="password" name="key" autofocus
                 class="input input-bordered input-sm font-mono"
                 placeholder="••••••••••••">
        </div>
        <button type="submit" class="btn btn-primary btn-sm mt-1">Enter</button>
      </form>
    </div>
  </div>
</div>
{% endblock content %}