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

{% block content %}
    <div class="px-4 lg:px-8 py-8 lg:py-16">

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

        <h1 class="text-white uppercase pb-4 mb-4 border-b border-primary-bg/40">
            Neue<br>Buchung
        </h1>

        <div class="lg:flex lg:space-x-8 pb-8 mb-8 border-b border-primary-bg/40">
            {% if cmsData.hotel.images.resized.l[0] is defined %}
                <img src="{{ cmsData.hotel.images.resized.l[0].url }}"
                     alt="{{ cmsData.hotel.images.resized.l[0].alt }}"
                     class="block w-full max-w-64 h-auto mb-4">
            {% endif %}
            <div class="text-white max-w-96">
                <div class="text-xl lg:text-2xl font-semibold uppercase">
                    {{ travel_title }}
                </div>
                <div class="text-lg font-semibold uppercase">
                    {{ travel_date_from | date('d.m.Y') }} - {{ travel_date_to | date('d.m.Y') }}
                </div>
                {% if cmsData.hotel.name is defined and cmsData.hotel.name %}
                    <div class="mt-4 font-semibold">{{ cmsData.hotel.name }}</div>
                {% endif %}
                {% if cmsData.hotel.address is defined and cmsData.hotel.address %}
                    <div>{{ cmsData.hotel.address | nl2br }}</div>
                {% endif %}
            </div>
        </div>
        <div class="space-y-8 max-w-screen-sm">
            <div>
                <a href="{{ path('app_booking_create_step_1') }}" class="button button--primary w-full md:w-auto">
                    Als Gast fortfahren
                </a>
            </div>
            <div>
                <h2 class="text-white">
                    Mit bestehendem Account anmelden
                </h2>

                {% 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">
                    <div class="mb-4">
                        <label for="username" class="mb-1 font-semibold text-white">
                            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 text-white">
                            Passwort:
                        </label>
                        <input type="password"
                               id="password"
                               name="_password"
                               class="form-field"
                               required
                               autocomplete="current-password">
                    </div>

                    <button type="submit" class="button button--primary w-full md:w-auto">
                        Anmelden und fortfahren
                    </button>
                    <input type="hidden" name="_csrf_token" value="{{ csrf_token('authenticate') }}">
                </form>

                <a href="{{ path('app_reset_password') }}"
                   class="inline-block text-sm underline text-white mt-2">
                    Passwort vergessen?
                </a>
            </div>

            <div>
                <h3 class=" text-white">
                    Noch kein Account?
                </h3>
                <div class="text-white">
                    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.
                </div>
            </div>
        </div>

    </div>
{% endblock %}

{% block footer %}
    <div class="shrink-0 bg-primary-dark px-4 lg:px-8 py-2 lg:py-4">
        <button type="button"
                hx-get="{{ path('app_booking_cancel') }}"
                hx-target="body"
                hx-swap="beforeend"
                class="inline-flex items-center justify-center bg-gray-200 rounded-md w-10 h-10">
            <svg class="w-8 h-8" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><line x1="200" y1="56" x2="56" y2="200" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="200" y1="200" x2="56" y2="56" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/></svg>
        </button>
    </div>
{% endblock %}

{% block data_layer %}
    {% include '_partials/_tracking.html.twig' with {
        'url': '/trichter_Z1/schritt0_login_oder_gast',
        'title': 'Login oder Gast'
    } %}
{% endblock %}