{{ form_start(form) }}

<div class="row g-3">
    <div class="col-md-6">
        {{ form_label(form.category, 'Matière', {'label_attr': {'class': 'form-label'}}) }}
        {{ form_widget(form.category, {
            'attr': {
                'class': 'form-select form-select-lg rounded-4 chosen-select'
            }
        }) }}
        {{ form_errors(form.category) }}
    </div>

    <div class="col-md-6">
        {{ form_label(form.city, 'Ville', {'label_attr': {'class': 'form-label'}}) }}
        {{ form_widget(form.city, {
            'attr': {
                'class': 'form-control form-control-lg rounded-4',
                'placeholder': 'Ville ou code postal'
            }
        }) }}
        {{ form_errors(form.city) }}
    </div>

    <div class="col-md-6">
        {{ form_label(form.level, 'Niveau', {'label_attr': {'class': 'form-label'}}) }}
        {{ form_widget(form.level, {
            'attr': {
                'class': 'form-select form-select-lg rounded-4 ui-select'
            }
        }) }}
        {{ form_errors(form.level) }}
    </div>

    <div class="col-md-6">
        {{ form_label(form.location, 'Lieu du cours', {'label_attr': {'class': 'form-label'}}) }}
        {{ form_widget(form.location, {
            'attr': {
                'class': 'form-select form-select-lg rounded-4 ui-select'
            }
        }) }}
        {{ form_errors(form.location) }}
    </div>

    <div class="col-12 d-grid d-md-flex gap-3">
        <button class="btn btn-primary btn-lg btn-pill flex-grow-1" type="submit">
            <i class="bi bi-search me-2"></i>Rechercher
        </button>

        <button class="btn btn-light btn-lg btn-pill listing-secondary-btn d-lg-none" type="button" data-bs-toggle="offcanvas" data-bs-target="#mobileFilters">
            <i class="bi bi-sliders me-2"></i>Filtres
        </button>
    </div>
</div>

<div class="d-none">
    {{ form_widget(form.latitude) }}
    {{ form_widget(form.longitude) }}
    {{ form_widget(form.department) }}
</div>

{{ form_end(form) }}