{% set i18n_prefix = _self|i18n_prefix %}

<div class="row mt-4">
    <div class="col col-lg-6 mx-auto">
        <div class="filters-product" data-controller="accordion">
            <div class="row">
                <div class="col" data-controller="search">
                    {{ form_start(form) }}
                    <div class="row">
                        <div class="col input-group input-search">
                            {{ form_widget(form.q) }}
                            <button type="submit" class="search input-group-text">
                                <i class="bi bi-search"></i>
                            </button>
                        </div>
                    </div>

                    <div class="d-flex justify-content-between align-items-center fs-5 cursor-pointer w-100 mt-5"
                         data-controller="accordion"
                         data-action="click->accordion#toggle">
                        <h5>{{ (i18n_prefix ~ '.accordion.toogle')|trans() }}</h5>
                        <i class="fa-solid fa-chevron-up"></i>
                    </div>
                    <div class="accordion-list">
                        <div class="row mt-3">
                            <div class="col">
                                {{ form_widget(form.category, {
                                    attr: {
                                        class: 'form-select mt-2 mx-auto',
                                        'aria-label': 'category'
                                    }
                                }) }}
                            </div>
                        </div>
                        <div class="row mt-3">
                            <div class="col">
                                <div class="d-flex justify-content-between align-items-center pt-3">
                                    <label class="fw-bold"
                                           for="partner">{{ (i18n_prefix ~ '.place.label')|trans }}</label>
                                    <span data-bs-toggle="tooltip" data-bs-placement="bottom"
                                          title="{{ (i18n_prefix ~ '.place.tooltip')|trans }}"
                                          data-controller="tooltips">
                                        <i class="fa-solid fa-circle-info"></i>
                                    </span>
                                </div>
                                {{ form_widget(form.place, {
                                    attr: {
                                        class: 'form-select mt-2 border border-2 mx-auto"',
                                        'arial-label': 'place'
                                    }
                                }) }}
                            </div>
                        </div>
                        <div class="row mt-3">
                            <div class="col">
                                <div class="d-flex justify-content-between align-items-center pt-3">
                                    <label class="fw-bold"
                                           for="city">{{ (i18n_prefix ~ '.city.label')|trans }}</label>
                                    <span data-bs-toggle="tooltip" data-bs-placement="bottom"
                                          title="{{ (i18n_prefix ~ '.city.tooltip')|trans }}"
                                          data-controller="tooltips">
                                        <i class="fa-solid fa-circle-info"></i>
                                    </span>
                                </div>
                                <div class="d-grid col position-relative align-items-center">
                                    {{ form_widget(form.city, {
                                        attr: {
                                            class: 'form-control border border-2 mt-2',
                                            placeholder: i18n_prefix ~ '.city.placeholder',
                                        }
                                    }) }}
                                    <span class="btn position-absolute end-0 border border-0">
                                <i class="fa-solid fa-location-dot"></i>
                            </span>
                                </div>
                            </div>
                        </div>
                        <div class="row py-3">
                            <div class="col">
                                {{ form_widget(form.distance) }}
                            </div>
                        </div>
                        <div class="d-grid col-5 mx-auto">
                            {{ form_widget(form.submit) }}
                        </div>
                        <div class="d-grid col-5 mx-auto">
                            <input class="btn-sm" type="reset" data-action="click->search#reset:prevent" value="{{ (i18n_prefix ~ '.button.reset')|trans }}">
                        </div>
                    </div>
                    {{ form_end(form) }}
                </div>
            </div>
        </div>
    </div>
</div>