{{define "content"}}
<main>
    <div class="max-w-7xl mx-auto px-4 sm:px-6 md:px-8">
        <h1 class="text-2xl font-semibold text-gray-900">
            Créer un conducteur
        </h1>
    </div>
    <div>
        <div class="-my-2 -mx-4 overflow-x-auto sm:-mx-6 lg:-mx-8">
            <div class="mt-8 max-w-3xl mx-auto grid grid-cols-1 gap-6 lg:max-w-7xl lg:grid-flow-col-dense lg:grid-cols-3">
                <form class="space-y-6" method="POST" name="create_driver" @submit="submit">                
                    <div class="border-t border-gray-200 px-4 py-5 sm:px-6">    
                        <div class="py-4 grid grid-cols-2">
                            <div class="lg:col-span-1">
                                <label for="firstname" class="block text-sm font-medium text-gray-700">Prénom</label>
                                <div class="mt-1">
                                    <input type="text" id="firstname" name="firstname" 
                                        class="shadow-sm focus:ring-co-blue focus:border-co-blue block w-full sm:text-sm border-gray-300 rounded-l-2xl border-r-1">
                                </div>
                            </div> 
                            <div class="lg:col-span-1">
                                <label for="lastname" class="block text-sm font-medium text-gray-700">Nom</label>
                                <div class="mt-1">
                                    <input type="text" id="lastname" name="lastname" 
                                        class="shadow-sm focus:ring-co-blue focus:border-co-blue block w-full sm:text-sm border-gray-300 rounded-l-2xl border-r-1">
                                </div>
                            </div> 
                            <div class="lg:col-span-1">
                                <label for="model" class="block text-sm font-medium text-gray-700">Model</label>
                                <div class="mt-1">
                                    <input type="text" id="model" name="model" 
                                        class="shadow-sm focus:ring-co-blue focus:border-co-blue block w-full sm:text-sm border-gray-300 rounded-l-2xl border-r-1">
                                </div>
                            </div> 
                            <div class="lg:col-span-1">
                                <label for="brand" class="block text-sm font-medium text-gray-700">Brand</label>
                                <div class="mt-1">
                                    <input type="text" id="brand" name="brand" 
                                        class="shadow-sm focus:ring-co-blue focus:border-co-blue block w-full sm:text-sm border-gray-300 rounded-l-2xl border-r-1">
                                </div>
                            </div> 
                            <div x-data="{
                                days : [
                                'monday' ,
                                'tuesday' ,
                                'wednesday' ,
                                'thursday' ,
                                'friday' ,
                                'saturday' ,
                                'sunday' ,
                                ],

                                hours : [
                                '12:00 AM',
                                '01:00 AM',
                                '02:00 AM',
                                '03:00 AM',
                                '04:00 AM',
                                '05:00 AM',
                                '06:00 AM',
                                '07:00 AM',
                                '08:00 AM',
                                '09:00 AM',
                                '10:00 AM',
                                '11:00 AM',
                                '12:00 PM',
                                '01:00 PM',
                                '02:00 PM',
                                '03:00 PM',
                                '04:00 PM',
                                '05:00 PM',
                                '06:00 PM',
                                '07:00 PM',
                                '08:00 PM',
                                '09:00 PM',
                                '10:00 PM',
                                '11:00 PM'
                                ] 
                            }">
                            <template x-for="day in days" :key="day">
                                <div>
                                    <label for="day-select-${day}" x-text="day"></label><br>
                                    <select name="${day}" id="day-select-${day}">
                                        <template x-for="hour in hours" :key="hour">
                                            <option x-text="hour" x-value="hour"></option>
                                        </template>
                                    </select>
                                </div>
                            </template>
                            </div>             
                        </div>
                        <input type="submit"
                               class="inline-flex items-center justify-center rounded-2xl border border-transparent bg-co-blue px-4 py-2 text-sm font-medium text-white shadow-sm focus:outline-none focus:ring-2 focus:ring-ci-blue focus:ring-offset-2 sm:w-auto" 
                               value="Chercher un Conducteurs">   
                    </div>
                </form>
            </div>
        </div>
    </div>
</main>
{{end}}