{% extends layout('list') %}

{% block styles %}
    {{ asset_style("visiosoft.module.advs::css/list.css") }}
{% endblock %}

{% block content %}
    <section>

        <div class="container">

            <!-- breadcrumb -->
            {% include "visiosoft.module.advs::list/partials/breadcrumb" %}
            <!-- breadcrumb -->

            <div class="row my-3 adv-list-wrapper">
                <div class="col-md-3 d-none d-sm-block filter-section">
                    {% include "visiosoft.module.advs::list/partials/list-filter" %}
                </div>
                <div class="col-md-9">
                    <div class="section recommended-classified">
                        {% if catText %}
                            <div class="result-text border py-2 px-3 mb-3 d-none d-sm-block">
                                <p class="mb-0">
                                    <span>"{{ catText }}"</span>
                                    <span>{{ advs.total }} {{ trans('visiosoft.module.advs::field.ads')|lower }}</span>
                                    {{ trans('visiosoft.module.advs::field.were_found') }}
                                </p>
                            </div>
                        {% endif %}
                        <div class="row breadcrumb list-header">

                            <div class="col-md-6 my-2 d-none d-sm-block">
                                {% include "visiosoft.module.advs::list/partials/list-sort-by" %}
                            </div>
                            <div class="col-md-6 my-2">
                                {% include "visiosoft.module.advs::list/partials/display-mode" %}
                            </div>
                        </div>
                        <div class="my-2 p-0 bg-light d-flex d-sm-none mobile-list-action row text-center align-items-center">
                            <div class="col-4" id="filter_modal_btn">
                                <i class="fas fa-filter w-100"></i>
                                <a href="javascript:;">{{ trans('visiosoft.module.advs::field.filter') }}</a>
                            </div>
                            <div class="col-4" id="sort_modal_btn">
                                <i class="fas fa-sort-amount-down w-100"></i>
                                <a href="javascript:;">{{ trans('visiosoft.module.advs::field.sort') }}</a>
                            </div>
                            {{ addBlock('ads-list/row-bottom',{'show_favorite_search':true})|raw }}
                        </div>
                        {{ addBlock('ads-list/row',{'topfields':topfields,'selectRange':selectRange,'advs':advs})|raw }}
                        <div class="row">
                            {% block listContent %}
                                {% include "visiosoft.module.advs::list/partials/ads" %}
                            {% endblock %}
                        </div>
                        {% include "visiosoft.module.advs::list/partials/pagination" %}

                        {{ addBlock('ads-list/row-bottom')|raw }}

                        {#                        <div class="category-tabs"></div>#}
                    </div>
                </div>
            </div>
        </div>
    </section>

    {% include "visiosoft.module.advs::list/partials/filter-modal" %}
    {% include "visiosoft.module.advs::list/partials/sort-modal" %}

    <script>
        var select_trans = "{{ trans('visiosoft.module.advs::field.pick_option') }}";
    </script>

    {{ asset_add("scripts.js", "visiosoft.module.advs::js/list.js") }}

{% endblock %}
{% block customjs %}
    {{ addBlock('ads-list/list',{'adv':adv})|raw }}
{% endblock %}