{% extends "base.html" %}
{% block title %}Register — SimpleAudit Studio{% endblock %}
{% block auth_content %}
<div class="w-full max-w-md">
    {% include "partials/auth_header.html" with subtitle="Create your account" %}
    <form method="post" class="bg-surface-raised rounded-2xl border border-gray-800 p-8 space-y-5 shadow-xl">
      {% csrf_token %}
      {% if error %}
        <div class="text-sm text-red-400 bg-red-900/30 rounded-lg px-3 py-2">{{ error }}</div>
      {% endif %}
      <div>
        <label class="block text-xs font-medium text-gray-400 mb-1.5 uppercase tracking-wide">Username</label>
        <input type="text" name="username" required
               class="w-full px-4 py-3 rounded-lg bg-surface-overlay border border-gray-700 text-sm text-gray-100 focus:outline-none focus:ring-2 focus:ring-accent/50"
               placeholder="your-name">
      </div>
      <div>
        <label class="block text-xs font-medium text-gray-400 mb-1.5 uppercase tracking-wide">Password</label>
        <input type="password" name="password" required autocomplete="new-password"
               class="w-full px-4 py-3 rounded-lg bg-surface-overlay border border-gray-700 text-sm text-gray-100 focus:outline-none focus:ring-2 focus:ring-accent/50"
               placeholder="••••••••">
      </div>
      <div>
        <label class="block text-xs font-medium text-gray-400 mb-1.5 uppercase tracking-wide">Email (optional)</label>
        <input type="email" name="email"
               class="w-full px-4 py-3 rounded-lg bg-surface-overlay border border-gray-700 text-sm text-gray-100 focus:outline-none focus:ring-2 focus:ring-accent/50"
               placeholder="you@example.com">
      </div>
      <button type="submit" class="w-full px-4 py-3 rounded-lg bg-accent text-white text-sm font-semibold hover:bg-accent-hover transition-colors">
        Register
      </button>
    </form>
    <p class="text-center text-sm text-gray-500 mt-5">
      Have an account? <a href="{% url 'login' %}" class="text-accent hover:underline">Sign in</a>
    </p>
</div>
{% endblock %}