{% extends 'base_public.html' %}

{% block content %}
    <form class="space-y-6" method="post">
        {% csrf_token %}

        <h2 class="text-xl font-bold text-gray-900 text-center mb-6">Inloggen</h2>

        {% if form.non_field_errors %}
            <div class="bg-red-50 border-l-4 border-red-400 p-4">
                <div class="flex">
                    <div class="ml-3">
                        <p class="text-sm text-red-700">
                            Onjuist e-mailadres of wachtwoord.
                        </p>
                    </div>
                </div>
            </div>
        {% endif %}

        {% for field in form %}
        <div>
            <label for="{{ field.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-1">
                {{ field.label }}
            </label>
            {{ field }}
            {% if field.errors %}
                <p class="mt-1 text-sm text-red-600">{{ field.errors.0 }}</p>
            {% endif %}
        </div>
        {% endfor %}

        <div class="flex items-center justify-between">
            <div class="flex items-center">
                <input id="remember-me" name="remember-me" type="checkbox" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
                <label for="remember-me" class="ml-2 block text-sm text-gray-900">
                    Onthoud mij
                </label>
            </div>

            <div class="text-sm">
                <a href="#" class="font-medium text-blue-600 hover:text-blue-500">
                    Wachtwoord vergeten?
                </a>
            </div>
        </div>

        <div>
            <button type="submit" class="w-full flex justify-center rounded-md border border-transparent bg-blue-600 py-3 px-4 text-sm font-bold text-white shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
                Inloggen
            </button>
        </div>
    </form>

    <div class="mt-6">
        <div class="relative">
            <div class="absolute inset-0 flex items-center">
                <div class="w-full border-t border-gray-300"></div>
            </div>
            <div class="relative flex justify-center text-sm">
                <span class="bg-white px-2 text-gray-500">Nog geen account?</span>
            </div>
        </div>

        <div class="mt-6">
            <a href="{% url 'register' %}" class="flex w-full justify-center rounded-md border border-gray-300 bg-white py-2 px-4 text-sm font-medium text-gray-500 shadow-sm hover:bg-gray-50">
                Start gratis proefperiode
            </a>
        </div>
    </div>
{% endblock %}