{% extends 'layout.html.twig' %}

{% block content %}
    {% include '_partials/_flashes.html.twig' %}

    <h1 class="mb-4">
        Neue Buchung
    </h1>

    <div class="bg-blue-50 border border-blue-200 rounded-lg p-6 mb-6">
        <h2 class="text-blue-900 font-semibold text-lg mb-3">
            Optional: Anmelden für schnelleres Buchen
        </h2>
        <p class="text-blue-800 mb-2">
            Melde dich an, um deine persönlichen Daten automatisch in die Buchung zu übernehmen.
            Dies ist <strong>vollständig optional</strong> – du kannst auch ohne Anmeldung als Gast fortfahren.
        </p>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
        {# Login Form #}
        <div>
            <h3 class="mb-4 font-semibold text-lg">
                Mit bestehendem Account anmelden
            </h3>

            {% if error %}
                {% include '_partials/_alert.html.twig' with { 'level': 'error', messages: [ error.messageKey|trans(error.messageData, 'security') ] } %}
            {% endif %}

            <form action="{{ path('app_login') }}" method="post" {{ stimulus_action('loading', 'toggle') }}>
                <div class="mb-4">
                    <label for="username" class="mb-1 font-semibold">
                        E-Mail:
                    </label>
                    <input type="email"
                           id="username"
                           name="_username"
                           value="{{ last_username }}"
                           class="form-field"
                           required
                           autocomplete="username">
                </div>

                <div class="mb-4">
                    <label for="password" class="mb-1 font-semibold">
                        Passwort:
                    </label>
                    <input type="password"
                           id="password"
                           name="_password"
                           class="form-field"
                           required
                           autocomplete="current-password">
                </div>

                <div class="flex flex-col space-y-2">
                    <button type="submit" class="button bg-button">
                        Anmelden und fortfahren
                    </button>
                    <a href="{{ path('app_reset_password') }}"
                       class="text-sm text-center text-blue-600 hover:underline">
                        Passwort vergessen?
                    </a>
                </div>

                <input type="hidden" name="_csrf_token" value="{{ csrf_token('authenticate') }}">
            </form>
        </div>

        {# Continue as Guest #}
        <div>
            <h3 class="mb-4 font-semibold text-lg">
                Als Gast fortfahren
            </h3>

            <p class="mb-4 text-gray-700">
                Du kannst auch ohne Anmeldung buchen. Deine persönlichen Daten gibst du dann im nächsten Schritt ein.
            </p>

            <a href="{{ path('app_booking_create_step_1') }}" class="button bg-button bg-button--secondary w-full block text-center">
                Als Gast fortfahren
            </a>

            <div class="mt-6 p-4 bg-gray-50 border border-gray-200 rounded">
                <h4 class="font-semibold mb-2 text-sm">
                    Noch kein Account?
                </h4>
                <p class="text-sm text-gray-700">
                    Nach Abschluss deiner Buchung wird automatisch ein Account für dich erstellt.
                    Du erhältst dann Zugangsdaten per E-Mail und kannst deine Buchungen jederzeit verwalten.
                </p>
            </div>
        </div>
    </div>

    {% include 'booking/_cancel_link.html.twig' %}
{% endblock %}