{% extends 'base.html' %}

{% block content %}
<div class="min-h-screen flex items-center justify-center bg-gray-100">
    <div class="bg-white p-8 rounded-lg shadow-lg w-full max-w-xs border border-blue-100">
        <!-- Logo lub nazwa aplikacji -->
        <h1 class="text-center text-2xl font-semibold text-blue-600 mb-6">iHairdresser Rejestracja</h1>

        <!-- Komunikaty flash -->
        {% with messages = get_flashed_messages(with_categories=true) %}
          {% if messages %}
            {% for category, message in messages %}
              <div class="bg-{{ 'red-100' if category == 'danger' else 'green-100' }} text-{{ 'red-600' if category == 'danger' else 'green-600' }} p-2 mb-4 rounded">
                  {{ message }}
              </div>
            {% endfor %}
          {% endif %}
        {% endwith %}

        <!-- Formularz rejestracji -->
        <div class="bg-gray-200 p-4 rounded-lg mb-6">
            <form method="post" action="{{ url_for('register.register') }}" class="space-y-4">
                
                <input class="w-full px-4 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-400" type="text" name="login" placeholder="Login" required>
                
                <input class="w-full px-4 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-400" type="password" name="password" placeholder="Password" required>
                
                <input class="w-full px-4 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-400" type="email" name="email" placeholder="Email" required>
                
                <input class="w-full px-4 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-400" type="text" name="name" placeholder="First Name" required>
                
                <input class="w-full px-4 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-400" type="text" name="lastname" placeholder="Last Name" required>
                
                <input class="w-full px-4 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-400" type="text" name="phone_number" placeholder="Phone Number" required>

                <!-- Przycisk rejestracji -->
                <button type="submit" class="w-full bg-blue-500 text-white py-2 rounded-md shadow-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 mb-4">
                    Register
                </button>
            </form>
        </div>

        <!-- Link do logowania -->
        <p class="text-center text-sm text-blue-600">
            Masz już konto? <a href="{{ url_for('login.login') }}" class="text-blue-700 hover:underline">Zaloguj się</a>
        </p>
    </div>
</div>
{% endblock %}