{% extends "base.html" %}
{% block content %}
<div class="max-w-md mx-auto bg-white p-8 rounded-2xl shadow-lg mt-10">
    <div class="text-center mb-8">
        <h2 class="text-3xl font-extrabold text-gray-900">Opret bruger</h2>
        <p class="text-gray-500 mt-2">Få madplaner tilpasset dine ønsker i dag.</p>
    </div>

    {% with messages = get_flashed_messages() %}
      {% if messages %}
        {% for message in messages %}
          <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4">
            {{ message }}
          </div>
        {% endfor %}
      {% endif %}
    {% endwith %}

    <form method="POST" id="registerForm">
        <div class="mb-4">
            <label class="block text-sm font-semibold mb-2 text-gray-700">Username</label>
            <input type="text" name="username" placeholder="e.g. HealthyEats2024" 
                   class="w-full p-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-green-500 focus:outline-none transition" required>
        </div>
        
        <div class="mb-4">
            <label class="block text-sm font-semibold mb-2 text-gray-700">Password</label>
            <input type="password" id="password" name="password" placeholder="••••••••" 
                   class="w-full p-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-green-500 focus:outline-none transition" required>
        </div>

        <div class="mb-6">
            <label class="block text-sm font-semibold mb-2 text-gray-700">Confirm Password</label>
            <input type="password" id="confirm_password" placeholder="••••••••" 
                   class="w-full p-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-green-500 focus:outline-none transition" required>
            <p id="error-msg" class="text-red-500 text-xs mt-2 hidden">Passwords do not match!</p>
        </div>

        <button type="submit" id="regBtn" class="w-full bg-green-600 hover:bg-green-500 text-white py-3 rounded-xl font-bold shadow-md transition-all active:scale-95">
            Create Account
        </button>
    </form>

    <div class="mt-8 pt-6 border-t border-gray-100 text-center">
        <p class="text-sm text-gray-600">
            Already have an account? 
            <a href="/login" class="text-green-600 font-bold hover:underline">Log in</a>
        </p>
    </div>
</div>

<script>
    const form = document.getElementById('registerForm');
    const password = document.getElementById('password');
    const confirm = document.getElementById('confirm_password');
    const errorMsg = document.getElementById('error-msg');

    form.onsubmit = function(e) {
        if (password.value !== confirm.value) {
            e.preventDefault();
            errorMsg.classList.remove('hidden');
            return false;
        }
    };
</script>
{% endblock %}