{% extends "base.html" %}
{% block title %}Create Account – Prime Cast{% endblock %}
{% block content %}
<div class="flex justify-center items-center py-16 animate-fade-in">
  <div class="w-full max-w-md">
    <div class="glass rounded-2xl shadow-2xl p-8 space-y-6 border border-white/20 dark:border-white/10">
      <div class="text-center">
        <div class="w-16 h-16 mx-auto rounded-full bg-primary-light/10 dark:bg-primary-dark/10 flex items-center justify-center mb-4">
          <i class="fas fa-user-plus text-2xl text-primary-light dark:text-primary-dark"></i>
        </div>
        <h1 class="text-2xl font-bold text-slate-800 dark:text-white">Create Account</h1>
        <p class="text-sm text-slate-500 dark:text-slate-400 mt-1">Join Prime Cast to save favorites & more</p>
      </div>

      {% if error %}
      <div class="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 text-red-700 dark:text-red-400 rounded-xl px-4 py-3 text-sm flex items-center gap-2 animate-scale-in">
        <i class="fas fa-exclamation-circle"></i> {{ error }}
      </div>
      {% endif %}

      <form method="post" class="space-y-5">
        <div>
          <label for="username" class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1.5">Username</label>
          <div class="relative">
            <i class="fas fa-user absolute left-3 top-1/2 -translate-y-1/2 text-gray-400"></i>
            <input id="username" name="username" type="text" required
                   class="w-full bg-white/50 dark:bg-black/40 border border-gray-300 dark:border-gray-700 rounded-lg pl-10 pr-4 py-2.5 text-slate-800 dark:text-white focus:outline-none focus:ring-2 focus:ring-primary-light dark:focus:ring-primary-dark placeholder-gray-400"
                   placeholder="Choose a username">
          </div>
        </div>

        <div>
          <label for="email" class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1.5">Email</label>
          <div class="relative">
            <i class="fas fa-envelope absolute left-3 top-1/2 -translate-y-1/2 text-gray-400"></i>
            <input id="email" name="email" type="email" required
                   class="w-full bg-white/50 dark:bg-black/40 border border-gray-300 dark:border-gray-700 rounded-lg pl-10 pr-4 py-2.5 text-slate-800 dark:text-white focus:outline-none focus:ring-2 focus:ring-primary-light dark:focus:ring-primary-dark placeholder-gray-400"
                   placeholder="your@email.com">
          </div>
        </div>

        <div>
          <label for="password" class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1.5">Password</label>
          <div class="relative">
            <i class="fas fa-lock absolute left-3 top-1/2 -translate-y-1/2 text-gray-400"></i>
            <input id="password" name="password" type="password" required
                   class="w-full bg-white/50 dark:bg-black/40 border border-gray-300 dark:border-gray-700 rounded-lg pl-10 pr-4 py-2.5 text-slate-800 dark:text-white focus:outline-none focus:ring-2 focus:ring-primary-light dark:focus:ring-primary-dark placeholder-gray-400"
                   placeholder="Create a password">
          </div>
        </div>

        <button type="submit"
                class="w-full bg-primary-light dark:bg-primary-dark hover:opacity-90 text-white font-semibold py-2.5 rounded-lg transition-all duration-200 shadow-lg shadow-primary-light/20 dark:shadow-primary-dark/20">
          <i class="fas fa-user-plus mr-2"></i> Create Account
        </button>
      </form>

      <p class="text-center text-sm text-slate-500 dark:text-slate-400">
        Already have an account? <a href="/login" class="text-primary-light dark:text-primary-dark hover:underline font-medium">Sign in</a>
      </p>
    </div>
  </div>
</div>
{% endblock %}