<section class='booking-plugin-section block-first'>

    <h2>{{GetCode(Booking.BookADate)}}</h2>

    <div id='bookingPluginContainer'
         data-entity-name='{{EntityName}}'
         data-entity-id='{{EntityId}}'>

        <!-- ÉTAPE 1 : Choix du type de réservation -->
        <div class='booking-step' id='stepType'>
            <label><strong>{{GetCode(Booking.SelectType)}}</strong></label>
            <select id='bookingTypeSelect' class='form-control'>
                <option value=''>-- {{GetCode(Booking.SelectType)}} --</option>
                {{foreach Types}}
                <option value='{{element->Id->Value}}' {{if element->Id->Value == DefaultType}}selected{{/if element->Id->Value == DefaultType}}>
                    {{element->Name->Value}}
                </option>
                {{/foreach Types}}
            </select>
        </div>

        <!-- ÉTAPE 2 : Choix de la date -->
        <div class='booking-step' id='stepDate' style='display:none;margin-top:1em;'>
            <label><strong>{{GetCode(Booking.Date)}}</strong></label>
            <input type='date' id='bookingDatePicker' class='form-control' />
        </div>

        <!-- ÉTAPE 3 : Créneaux disponibles -->
        <div class='booking-step' id='stepSlots' style='display:none;margin-top:1em;'>
            <label><strong>{{GetCode(Booking.SelectSlot)}}</strong></label>
            <div id='bookingSlots'></div>
        </div>

        <!-- ÉTAPE 4 : Formulaire de réservation -->
        <div class='booking-step' id='stepForm' style='display:none;margin-top:1em;'>
            {{bookingForm}}
        </div>

    </div>

</section>
