{% set sidebar_mode = sidebarMode|default(false) %}

{{ form_start(form, {
    method: 'GET',
    action: path('search'),
    attr: {
        class: 'js-search-form'
    }
}) }}

<div class="row g-3">
    <div class="{{ sidebar_mode ? 'col-12' : 'col-md-6' }}">
        {{ form_label(form.category, 'Matière', {'label_attr': {'class': 'form-label'}}) }}
        {{ form_widget(form.category, {
            full_name: 'category',
            id: 'form_category',
            attr: {
                class: 'chosen-select'
            }
        }) }}
        {{ form_errors(form.category) }}
    </div>

    <div class="{{ sidebar_mode ? 'col-12' : 'col-md-6' }}">

        <label class="form-label control-label optional" for="{{form.city.vars.id}}">
        {{form.city.vars.label}}
        </label>

        {{ form_widget(form.city, {
            full_name: 'city',
            id: prefix ~ '_form_city',
            attr: {
                class: 'form-control form-control-lg rounded-4 js-city-autocomplete',
                placeholder: 'Ville ou code postal'
            }
        }) }}

        <button type="button"
                class="btn btn-text btn-sm mt-2 js-geolocate"
                data-prefix="{{ prefix }}">
            <i class="bi bi-geo-alt"></i> Autour de moi
        </button>

        <span id="{{ prefix }}_geolocate_loader"
            class="spinner-border spinner-border-sm text-secondary ms-2 d-none"
            role="status"
            aria-hidden="true"></span>

        {#<div class="small text-muted mt-1 js-geolocate-status" id="{{ prefix }}_geolocate_status"></div>#}

        {{ form_errors(form.city) }}
    </div>

    <div class="{{ sidebar_mode ? 'col-12' : 'col-md-6' }}">

        <label class="form-label control-label optional" for="{{form.level.vars.id}}">
        {{form.level.vars.label}}
        </label>
        {{ form_widget(form.level, {
            full_name: 'level',
            id: 'form_level',
            attr: {
                class: 'form-select form-select-lg rounded-4 ui-select'
            }
        }) }}
        {{ form_errors(form.level) }}
    </div>

    <div class="{{ sidebar_mode ? 'col-12' : 'col-md-6' }}">
        <label class="form-label control-label optional" for="{{form.location.vars.id}}">
        {{form.location.vars.label}}
        </label>
        {{ form_widget(form.location, {
            full_name: 'location',
            id: 'form_location',
            attr: {
                class: 'form-select form-select-lg rounded-4 ui-select'
            }
        }) }}
        {{ form_errors(form.location) }}
    </div>

    <div class="col-12 d-grid {{ sidebar_mode ? '' : '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>
    </div>
</div>

<div class="d-none">
    {{ form_widget(form.latitude, {
        full_name: 'latitude',
        id: 'form_latitude',
        attr: {
            class: 'js-search-latitude'
        }
    }) }}

    {{ form_widget(form.longitude, {
        full_name: 'longitude',
        id: 'form_longitude',
        attr: {
            class: 'js-search-longitude'
        }
    }) }}

    {{ form_widget(form.department, {
        full_name: 'department',
        id: 'form_department',
        attr: {
            class: 'js-search-department'
        }
    }) }}
</div>

{{ form_end(form) }}