{% if formSearch %}
    {{ form_start(formSearch) }}
    <div class="rounded-xl bg-light-card dark:bg-dark-card p-6 shadow-md">
        <h2 class="text-light-primary dark:text-light-font text-xl font-bold">Rechercher une sortie</h2>
        <div class="flex items-center my-5 relative w-full">
            <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
                <svg class="w-5 h-5 text-gray-500 dark:text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd"></path>
                </svg>
            </div>
            {{ form_widget(formSearch.name, {
                'attr': {
                    'class': 'block w-full pl-10 p-2.5 text-sm rounded-lg dark:bg-dark-font dark:text-white dark:border-dark-primary focus:ring-light-primary dark:focus:ring-dark-primary focus:border-light-primary dark:focus:border-dark-primary dark:placeholder-gray-300',
                    'id': 'simple-search',
                    'placeholder': 'Recherche'
                }
            }) }}
        </div>
        <div class="my-5 grid grid-flow-row-dense grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
            <div class="flex flex-col col-span-4 md:col-span-2">
                <label for="campus" class="text-light-primary dark:text-light-font text-sm font-medium">Campus</label>
                {{ form_widget(formSearch.site, {
                    'attr': {
                        'id': 'campus',
                        'class': 'text-sm rounded-lg my-2 block w-full border-gray-200 dark:bg-dark-font dark:text-white dark:border-dark-primary focus:ring-light-primary dark:focus:ring-dark-primary focus:border-light-primary dark:focus:border-dark-primary dark:placeholder-gray-300'
                    }
                }) }}
            </div>
            <div class="flex flex-col col-span-4 md:col-span-1">
                <label for="startDate" class="text-light-primary dark:text-light-font text-sm font-medium">Date de début</label>
                {{ form_widget(formSearch.startDate, {
                    'attr': {
                        'id': 'startDate',
                        'class': 'text-sm rounded-lg my-2 block w-full border-gray-200 dark:bg-dark-font dark:text-white dark:border-dark-primary focus:ring-light-primary dark:focus:ring-dark-primary focus:border-light-primary dark:focus:border-dark-primary dark:placeholder-gray-300'
                    }
                }) }}
            </div>
            <div class="flex flex-col col-span-4 md:col-span-1">
                <label for="endDate" class="text-light-primary dark:text-light-font text-sm font-medium">Date de fin</label>
                {{ form_widget(formSearch.endDate, {
                    'attr': {
                        'id': 'endDate',
                        'class': 'text-sm rounded-lg my-2 block w-full border-gray-200 dark:bg-dark-font dark:text-white dark:border-dark-primary focus:ring-light-primary dark:focus:ring-dark-primary focus:border-light-primary dark:focus:border-dark-primary dark:placeholder-gray-300'
                    }
                }) }}
            </div>

            <div class="flex flex-col col-span-4">
                <ul class="items-center w-full text-sm font-medium rounded-lg sm:flex bg-white dark:bg-dark-font border border-gray-300 dark:border-dark-primary text-light-primary dark:text-light-font">
                    <li class="w-full border-b border-gray-200 dark:border-dark-primary sm:border-b-0 sm:border-r">
                        <div class="flex items-center ps-3">
                            {{ form_widget(formSearch.isOrganizer, {
                                'id': 'author',
                                'attr': {
                                    'class': 'text-sm rounded-lg cursor-pointer w-4 h-4 bg-white dark:bg-dark-font  border border-gray-300 text-light-primary dark:text-dark-primary focus:ring-0 dark:focus:ring-dark-primary'
                                }
                            }) }}
                            <label for="author" class="w-full py-3 ms-2 text-sm font-medium text-light-primary dark:text-light-font">Sorties dont je suis l'organisateur/trice</label>
                        </div>
                    </li>
                    <li class="w-full border-b border-gray-200 dark:border-dark-primary sm:border-b-0 sm:border-r">
                        <div class="flex items-center ps-3">
                            {{ form_widget(formSearch.isRegistered, {
                                'id': 'register',
                                'attr': {
                                    'class': 'text-sm rounded-lg cursor-pointer w-4 h-4 bg-white dark:bg-dark-font  border border-gray-300 text-light-primary dark:text-dark-primary focus:ring-0 dark:focus:ring-dark-primary'
                                }
                            }) }}
                            <label for="register" class="w-full py-3 ms-2 text-sm font-medium text-light-primary dark:text-light-font">Sorties auxquelles je suis inscrit/e</label>
                        </div>
                    </li>
                    <li class="w-full border-b border-gray-200 dark:border-dark-primary sm:border-b-0 sm:border-r">
                        <div class="flex items-center ps-3">
                            {{ form_widget(formSearch.isNotRegistered, {
                                'id': 'notResgister',
                                'attr': {
                                    'class': 'text-sm rounded-lg cursor-pointer w-4 h-4 bg-white dark:bg-dark-font  border border-gray-300 text-light-primary dark:text-dark-primary focus:ring-0 dark:focus:ring-dark-primary'
                                }
                            }) }}
                            <label for="notResgister" class="w-full py-3 ms-2 text-sm font-medium text-light-primary dark:text-light-font">Sorties auxquelles je ne suis pas inscrit/e</label>
                        </div>
                    </li>
                    <li class="w-full border-b border-gray-200 dark:border-dark-primary sm:border-b-0 sm:border-r">
                        <div class="flex items-center ps-3">
                            {{ form_widget(formSearch.isFinished, {
                                'id': 'endOuting',
                                'attr': {
                                    'class': 'text-sm rounded-lg cursor-pointer w-4 h-4 bg-white dark:bg-dark-font  border border-gray-300 text-light-primary dark:text-dark-primary focus:ring-0 dark:focus:ring-dark-primary'
                                }
                            }) }}
                            <label for="endOuting" class="w-full py-3 ms-2 text-sm font-medium text-light-primary dark:text-light-font">Sorties passées</label>
                        </div>
                    </li>
                </ul>
            </div>
        </div>

        <div class="mt-6 grid w-full grid-cols-2 justify-end space-x-4 md:flex">
            <button type="reset" class="px-4 py-2 text-light-primary dark:text-dark-primary dark:hover:text-dark-primary hover:text-light-font uppercase bg-transparent  rounded-lg hover:bg-light-secondary dark:hover:bg-dark-secondary text-md transition duration-300">
                Annuler les filtres
            </button>
            <button type="submit" class="px-4 py-2 mr-4 text-white dark:text-light-font uppercase bg-light-primary dark:bg-dark-primary border-2 border-transparent rounded-lg text-md hover:bg-light-secondary dark:hover:bg-dark-primary/75 transition duration-300">
                Rechercher
            </button>
        </div>
    </div>
    {{ form_end(formSearch) }}
{% endif %}