{% extends "base.html" %}
{% block title %}Register — SimpleAudit Studio{% endblock %}
{% block auth_content %}
<div class="w-full max-w-md">
    <div class="text-center mb-8">
      {% load static %}
      <a href="/" class="block group">
        <img src="{% static 'logo.png' %}" alt="SimpleAudit" class="w-20 h-20 mx-auto mb-4">
        <h1 class="text-3xl font-bold text-gray-100 group-hover:text-white transition-colors">SimpleAudit Studio</h1>
      </a>
      <p class="text-sm text-gray-500 mt-2">Create your account</p>
    </div>
    <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 %}