{% extends 'base.html' %}

{% block content %}
<div class="min-h-screen flex items-center justify-center bg-gray-100">
    <div class="bg-white p-11 rounded-lg shadow-lg w-full max-w-sm border border-blue-100">
        <!-- Logo lub nazwa aplikacji -->
        <h1 class="text-center text-3xl font-semibold text-customBlue-600 mb-6">iHairdresser</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 logowania -->
        <div class="bg-gray-200 p-4 rounded-lg mb-6">
            <form method="post" action="{{ url_for('login.login') }}" 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 or 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="password" name="password" placeholder="Password" required>
                
                <a href="#" class="text-sm text-customBlue-600 hover:underline block text-center mt-2">Forgot password?</a>

                <!-- Przycisk Logowania -->
                <button type="submit" class="w-full bg-customBlue-500 text-white py-2 rounded-md shadow-md hover:bg-customBlue-600 focus:outline-none mb-4 focus:scale-[102%]">
                    Login
                </button>
            </form>
        </div>

        <!-- Napis Zarejestruj się -->
        <p class="text-center  text-sm text-customBlue-500 mb-2 hover:underline"><a href="{{ url_for('register.register') }}">Nie masz konta? </a>
        </p>

        <!-- Logowanie przez Google -->
        <a href="{{ url_for('google.login') }}" class="w-full border border-red-500 text-red-500 py-2 rounded-md shadow-md hover:bg-red-50 focus:outline-none focus:ring-2 focus:ring-red-500 mb-2 text-center">
            <button class="mb-2 w-full bg-white-500 text-red py-2 rounded-md shadow-md focus:outline-none focus:ring-2 focus:ring-red-500">
                Google
            </button>
        </a>

        <!-- Logowanie przez Apple -->
        <button class="w-full border border-gray-400 text-gray-700 py-2 rounded-md shadow-md hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-300">
            Apple
        </button>
    </div>
</div>
{% endblock %}