{% extends "_types/root/_index.html" %}
{% block meta %}{% endblock %}
{% block title %}Authorize Device — Rose Ash{% endblock %}
{% block content %}
<div class="py-8 max-w-md mx-auto">
  <h1 class="text-2xl font-bold mb-6">Authorize device</h1>
  <p class="text-stone-600 mb-4">Enter the code shown in your terminal to sign in.</p>

  {% if error %}
    <div class="bg-red-50 border border-red-200 text-red-700 p-3 rounded mb-4">
      {{ error }}
    </div>
  {% endif %}

  <form method="post" action="{{ url_for('auth.device_submit') }}" class="space-y-4">
    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
    <div>
      <label for="code" class="block text-sm font-medium mb-1">Device code</label>
      <input
        type="text"
        name="code"
        id="code"
        value="{{ code | default('') }}"
        placeholder="XXXX-XXXX"
        required
        autofocus
        maxlength="9"
        autocomplete="off"
        spellcheck="false"
        class="w-full border border-stone-300 rounded px-3 py-3 text-center text-2xl tracking-widest font-mono uppercase focus:outline-none focus:ring-2 focus:ring-stone-500"
      >
    </div>
    <button
      type="submit"
      class="w-full bg-stone-800 text-white py-2 px-4 rounded hover:bg-stone-700 transition"
    >
      Authorize
    </button>
  </form>
</div>
{% endblock %}