@php
    /** @var \App\Collections\Models\View\Program\ProgramCollection $programs */
@endphp
@extends('pages.templates.logged_page')

@section('head')
    @parent
    @vite('resources/scss/pages/map.scss')
@endsection

@section('scriptBottom')
    @parent
    @vite('resources/js/application/pages/Map/Map.js')
@endsection

@section('logged-content')
    <div class="page">
        <div class="grid">
            <div id="map"></div>
            <div id="programs">
                <div id="search">
                    <div class="search-title">
                        <h2>Définissez votre recherche</h2>
                        <button type="button" class="btn outlined">Filtres&nbsp;<i class="fa-solid fa-angle-down"></i>
                        </button>
                        <button id="clear-search" type="button" class="btn outlined">Réinitialiser</button>
                    </div>
                    <div class="filters">
                        <div class="filters-buttons">
                            <div>
                                <label for="dropdown-regions">Régions</label>
                                <select
                                        id="dropdown-regions"
                                        multiple
                                        multiselect-search="true"
                                        multiselect-max-items="3"
                                        multiselect-hide-x="false"
                                        placeholder="Sélectionnez vos régions"
                                >
                                </select>
                            </div>
                            <div>
                                <label for="dropdown-departments">Départements</label>
                                <select
                                        id="dropdown-departments"
                                        multiple
                                        multiselect-search="true"
                                        multiselect-max-items="3"
                                        multiselect-hide-x="false"
                                        placeholder="Sélectionnez vos départements"
                                >
                                </select>
                            </div>
                            <div>
                                <label for="dropdown-cities">Villes</label>
                                <select
                                        id="dropdown-cities"
                                        multiple
                                        multiselect-search="true"
                                        multiselect-max-items="3"
                                        multiselect-hide-x="false"
                                        placeholder="Sélectionnez vos villes"
                                >
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
                <div id="results"></div>
            </div>
        </div>
    </div>
@endsection