{% extends "base.html" %}
{% block content %}
<div class="max-w-sm mx-auto mt-8">
  <h1 class="text-lg font-semibold tracking-tight mb-1">Registrieren</h1>
  <p class="text-xs text-slate-400 mb-4">
    Erstelle einen neuen Account. Der erste Benutzer wird automatisch Admin.
  </p>

  {% if error %}
  <div class="mb-4 text-xs text-rose-200 bg-rose-500/10 border border-rose-500/60 rounded-lg p-3">
    {{ error }}
  </div>
  {% endif %}

  <form method="post" class="space-y-4">
    <input type="hidden" name="csrf_token" value="{{ csrf_token }}" />
    <div class="space-y-1">
      <label class="text-xs text-slate-300">Benutzername</label>
      <input
        type="text"
        name="username"
        required
        class="w-full rounded-lg border border-slate-700 bg-slate-950/60 px-3 py-2 text-sm outline-none focus:border-indigo-500"
      />
    </div>
    <div class="space-y-1">
      <label class="text-xs text-slate-300">E-Mail (optional)</label>
      <input
        type="email"
        name="email"
        class="w-full rounded-lg border border-slate-700 bg-slate-950/60 px-3 py-2 text-sm outline-none focus:border-indigo-500"
      />
    </div>
    <div class="space-y-1">
      <label class="text-xs text-slate-300">Passwort</label>
      <input
        type="password"
        name="password"
        required
        minlength="8"
        class="w-full rounded-lg border border-slate-700 bg-slate-950/60 px-3 py-2 text-sm outline-none focus:border-indigo-500"
      />
    </div>
    <div class="space-y-1">
      <label class="text-xs text-slate-300">Passwort bestätigen</label>
      <input
        type="password"
        name="password_confirm"
        required
        minlength="8"
        class="w-full rounded-lg border border-slate-700 bg-slate-950/60 px-3 py-2 text-sm outline-none focus:border-indigo-500"
      />
    </div>
    <button
      type="submit"
      class="w-full rounded-lg bg-indigo-500 px-4 py-2 text-sm font-medium text-white hover:bg-indigo-400 focus:outline-none focus:ring focus:ring-indigo-500/40"
    >
      Account anlegen
    </button>
  </form>
</div>
{% endblock %}