{# templates/booking/new.html.twig #}

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

{% block title %}Prenota un tavolo{% endblock %}

{% block body %}
<div class="container">
    {{ form_start(form) }}

    <div class="row">
        {# Prima colonna: 3 campi #}
        <div class="col-md-4">
            <div class="mb-3 d-flex flex-column align-items-center">
                {{ form_label(form.dataPrenotazione, null, {'label_attr': {'class': 'd-block text-center'}}) }}
            </div>
            <div class="mb-3 d-flex flex-column align-items-center">
                {{ form_widget(form.dataPrenotazione) }}
            </div>
            <div class="mb-3 d-flex flex-column align-items-center">
                {{ form_label(form.oraPrenotazione, null, {'label_attr': {'class': 'd-block text-center'}}) }}
            </div>
            <div class="mb-3 d-flex flex-column align-items-center">
                {{ form_widget(form.oraPrenotazione) }}
            </div>
            <div class="mb-3 d-flex flex-column align-items-center">
                {{ form_label(form.numeroPersone, null, {'label_attr': {'class': 'd-block text-center'}}) }}
            </div>
            <div class="mb-3 d-flex flex-column align-items-center">
                {{ form_widget(form.numeroPersone,  {'attr': {'class': 'select-custom'}}) }}
            </div>
        </div>

        {# Seconda colonna: 3 campi #}
        <div class="col-md-4">
            <div class="mb-3 d-flex flex-column align-items-center">
                {{ form_label(form.nomeCognome, null, {'label_attr': {'class': 'd-block text-center'}}) }}
            </div>
            <div class="mb-3 d-flex flex-column align-items-center">
                {{ form_widget(form.nomeCognome) }}
            </div>
            <div class="mb-3 d-flex flex-column align-items-center">
                {{ form_label(form.email, null, {'label_attr': {'class': 'd-block text-center'}}) }}
            </div>
            <div class="mb-3 d-flex flex-column align-items-center">
                {{ form_widget(form.email) }}
            </div>
            <div class="mb-3 d-flex flex-column align-items-center">
                {{ form_label(form.phone, null, {'label_attr': {'class': 'd-block text-center'}}) }}
            </div>
            <div class="mb-3 d-flex flex-column align-items-center">
                {{ form_widget(form.phone) }}
            </div>
        </div>

        <div class="col-md-4">
            <div class="row align-items-center">
                <div class="col-md-12 mb-3 d-flex flex-column align-items-center">
                    {{ form_label(form.notePrenotazione, null, {'label_attr': {'class': 'd-block text-center'}}) }}
                </div>
                <div class="mb-3 d-flex flex-column align-items-center">
                    {{ form_widget(form.notePrenotazione) }}
                </div>
            </div>
            <div class="row align-items-center mt-3"> {# Aggiungi un po' di margine superiore al pulsante #}
                <div class="col-md-12 text-center">
                    <button type="submit" class="btn" style="background-color: rgb(105, 20, 43) !important; color: #f7f6f2;">Invia Prenotazione</button>
                </div>
            </div>
        </div>
    </div>
    {{ form_end(form) }}
</div>
{% endblock %}