{% extends 'base.html.twig' %}

{# @var settings \App\Service\Setting\SettingsDto #}
{% set settings = settings() %}

{% block title %}
    {%- if app.request.get('_route') == 'app_category' -%}
        {{- listingListDto.category.name -}}
    {%- endif -%}
    {%- if app.request.get('_route') == 'app_last_added' -%}
        {{- 'trans.Last added' | trans -}}
    {%- endif -%}
    {%- if app.request.get('_route') == 'app_listing_search' -%}
        {{- 'trans.Search Engine' | trans -}}
    {%- endif -%}
    {%- if app.request.get('_route') == 'app_public_listings_of_user' -%}
        {{- 'trans.Listings of user' | trans -}}
    {%- endif -%}
    {%- if app.request.get('_route') == 'app_user_observed_listings' -%}
        {{- 'trans.Observed Listings' | trans -}}
    {%- endif -%}
{% endblock %}

{% block body %}
    <div class="container-fluid container-lg mt-md-3">
        <div class="mt-3 mb-3 text-break">
            {%- if settings.masterSiteLinkShow ~%}
                <a href="{{ settings.masterSiteUrl }}">{{ settings.masterSiteAnchorText }}</a>
            {{- ' > ' -}}
            {%- endif ~%}
            <a href="{{ path('app_index') }}">{{ 'trans.Classifieds' | trans }}</a>

            {%- for category in categoryBreadcrumbs ~%}
                {{- ' > ' -}}
                <a {{- ' ' -}}
                        href="{{ path('app_category', mapLocationParams | merge({'categorySlug': category.slug})) }}" {{- ' ' -}}
                        class="js__linkToMap" {{- ' ' -}}
                >
                    {{- category.name -}}
                </a>
            {%- endfor ~%}
            {%- if app.request.get('_route') == 'app_last_added' ~%}
                {{- ' > ' }} {{ 'trans.Last added' | trans }}
            {%- endif ~%}
            {%- if app.request.get('_route') == 'app_listing_search' ~%}
                {{- ' > ' }} {{ 'trans.Search Engine' | trans }}
            {%- endif ~%}
            {%- if app.request.get('_route') == 'app_public_listings_of_user' ~%}
                {{- ' > ' }} {{ 'trans.Listings of user' | trans }}
            {%- endif ~%}
            {%- if app.request.get('_route') == 'app_user_observed_listings' ~%}
                {{- ' > ' }} {{ 'trans.Observed Listings' | trans }}
            {%- endif ~%}

            {%- if listingListDto.filterByUser ~%}
                {{- ' > ' -}}
                <a class="font-weight-bold" href="{{ path('app_public_listings_of_user', {'user': listingListDto.filterByUser.id}) }}">
                    {{- listingListDto.filterByUser | displayUserName -}}
                </a>
            {%- endif ~%}
        </div>

        <div class="row">
            <div class="col-12 col-md-3">
                <div {{- ' ' -}}
                        class="d-md-none btn btn-secondary btn-sm mb-2 show-filters-btn" {{- ' ' -}}
                        data-toggle="collapse" {{- ' ' -}}
                        data-target="#filters" {{- ' ' -}}
                >
                    {{- 'trans.Show filters' | trans -}}
                </div>

                <!-- filters -->
                <div class="d-none-soft d-md-block collapse d-print-none" id="filters">
                    <div class="clearfix">
                        {#- select category -#}
                        {%- if categoryList is not empty ~%}
                            <div {{- ' ' -}}
                                    class="btn btn-dark mb-2" {{- ' ' -}}
                                    data-toggle="collapse" {{- ' ' -}}
                                    data-target=".show-category-select" {{- ' ' -}}
                            >
                                {{- 'trans.Select category' | trans -}}
                            </div>
                        {%- endif ~%}

                        {%- if settings.mapEnabled ~%}
                            {%- if listingListDto.showOnMap ~%}
                                <a {{- ' ' -}}
                                        href="{{ path(app.request.get('_route'), queryParameters | merge({'showOnMap': null})) }}" {{- ' ' -}}
                                        class="btn btn-light-gray mb-2 float-right js__linkToMap" {{- ' ' -}}
                                > {{- '' -}}
                                    {{- 'trans.List' | trans -}}
                                </a>
                            {%- else ~%}
                                <a {{- ' ' -}}
                                        href="{{ path(app.request.get('_route'), queryParameters | merge({'showOnMap': 1})) }}" {{- ' ' -}}
                                        class="btn btn-light-gray mb-2 float-right" {{- ' ' -}}
                                > {{- '' -}}
                                    <i class="svg svg-location" title="{{ 'trans.Show on map' | trans }}"></i>
                                    {{- ' ' -}}
                                    {{- 'trans.Map' | trans -}}
                                </a>
                            {%- endif ~%}
                        {%- endif ~%}
                    </div>

                    {%- if categoryList is not empty ~%}
                        <div class="card mb-3 show-category-select collapse">
                            <div class="card-header">
                                <strong>{{ 'trans.Category' | trans }}</strong>
                            </div>
                            <div>
                                {%- for category in categoryList ~%}
                                    <a {{- ' ' -}}
                                            href="{{ path('app_category', queryParameters | merge({'categorySlug': category.slug})) }}" {{- ' ' -}}
                                            class="link-list-item category-link js__linkToMap {% if listingListDto.category and category.slug == listingListDto.category.slug  %}active{% endif %}" {{- ' ' -}}
                                    >
                                        {{- category.name -}}
                                    </a>
                                {%- endfor ~%}
                            </div>
                        </div>
                    {% endif %}

                    {% include 'listing_list/listing_list_filters.html.twig' %}
                </div>
            </div>
            <!-- filters end -->

            <!-- right side -->
            <div class="col-md-9">
                {%- if category and category.hasChildren() and (not pager or pager.currentPage == 1) ~%}
                    <!-- subcategories -->
                    <div class="mb-2 d-print-none">
                        <span class="align-top d-inline-block pb-2 pb-lg-1">
                            {{- 'trans.Subcategories' | trans -}}
                            {{- ':&nbsp;' | raw -}}
                        </span>
                        {%- for category in categoryList ~%}
                            <a {{- ' ' -}}
                                    href="{{ path('app_category', queryParameters | merge({'categorySlug': category.slug})) }}" {{- ' ' -}}
                                    class="{% if loop.index > 3 and loop.length > 4 %}collapse{% endif %} w-100-small py-lg-0 show-more-subcategories js__linkToMap" {{- ' ' -}}
                            >
                                {{- category.name -}}
                            </a>
                        {%- endfor -%}
                        {% if categoryList | length > 4 ~%}
                            <a {{- ' ' -}}
                                    class="w-100-small py-lg-0 show-more-subcategories cursor-pointer js__removeOnClick" {{- ' ' -}}
                                    data-toggle="collapse" {{- ' ' -}}
                                    data-target=".show-more-subcategories" {{- ' ' -}}
                            >
                                {{- 'trans.show more' | trans -}}
                            </a>
                        {%- endif ~%}
                    </div>
                {%- endif %}

                {%- if listingListDto.filterByUser ~%}
                    <div class="mb-2">
                        <h4>{{- 'trans.Listings of user' | trans }}: {{ listingListDto.filterByUser | displayUserName -}}</h4>
                    </div>
                {%- endif ~%}

                {%- if listingListDto.filterByUserObservedListings ~%}
                    <div class="mb-2">
                        <h4>{{- 'trans.Observed Listings' | trans }}</h4>
                    </div>
                {%- endif ~%}

                {%- if listingListDto.showOnMap ~%}
                    {%- if listingListDto.results ~%}
                        <!-- map -->
                        <div class="container-fluid px-0">
                            <div class="map-with-listings js__mapWithListings"></div>
                        </div>
                    {%- else ~%}
                        <div class="alert alert-info w-100">
                            <div class="mb-3">
                                {{- 'trans.No classifieds matching the criteria found on map' | trans -}}
                            </div>
                            <a {{- ' ' -}}
                                    href="{{ path(app.request.get('_route'), queryParameters | merge({'showOnMap': null})) }}" {{- ' ' -}}
                                    class="btn btn-light-gray w-100 mb-2" {{- ' ' -}}
                            > {{- '' -}}
                                {{- 'trans.Return to the list' | trans -}}
                            </a>
                        </div>
                    {%- endif ~%}
                {%- endif ~%}

                {%- if not listingListDto.showOnMap ~%}
                    <!-- listing list -->
                    <div class="listing-list">
                        {%- for listing in listingList ~%}
                            <div id="listing-{{ listing.id }}" class="card listing-list-item clickable-div {% if listing.featured %}listing-recommended{% endif %}">
                                <a class="clickable-div-link" href="{{ path('app_listing_show', {id: listing.id, 'slug': listing.slug}) }}" title="{{ listing.title }}"></a>
                                <div class="container-fluid">
                                    <div class="row py-md-1">
                                        <div class="col-12 col-md-4 p-0 {% if listing.mainImage is empty %}d-none-soft{% endif %} d-md-block">
                                            <a {{- ' ' -}}
                                                    class="d-block text-center" {{- ' ' -}}
                                                    href="{{ path('app_listing_show', {id: listing.id, 'slug': listing.slug}) }}" {{- ' ' -}}
                                                    title="{{ listing.title }}" {{- ' ' -}}
                                            >
                                                <img {{- ' ' -}}
                                                        class="listing-list-img {% if listing.mainImageInListSize is empty %}listing-list-img-blank{% endif %}" {{- ' ' -}}
                                                        src="{{ asset(listing.mainImageInListSize | default('static/system/blank.png')) }}" {{- ' ' -}}
                                                        alt="{{ listing.title }}" {{- ' ' -}}
                                                >
                                            </a>
                                        </div>

                                        <div class="col-12 col-md-8 pb-1 pl-md-4 card-text">
                                            <h5> {{- '' -}}
                                                <strong> {{- '' -}}
                                                    <a {{- ' ' -}}
                                                            href="{{ path('app_listing_show', {id: listing.id, 'slug': listing.slug}) }}"  {{- ' ' -}}
                                                            class="use-visited-color d-block pt-2 w-100" {{- ' ' -}}
                                                    >
                                                        {{- listing.title -}}
                                                    </a> {{- '' -}}
                                                </strong> {{- '' -}}
                                            </h5>

                                            <div>
                                                {%- if listing.location is not empty ~%}
                                                    <span class="mr-1"> {{- '' -}}
                                                        <i class="svg svg-location"></i>
                                                        {{- '&nbsp;' | raw -}}
                                                        {{- listing.location -}}
                                                    </span>
                                                {%- endif ~%}
                                                <span class="mr-1 text-nowrap">{{- '' -}}
                                                    <i class="svg svg-calendar text-black-50"></i>
                                                    {{- ' ' -}}
                                                    {{- listing.orderByDate | date -}}
                                                </span>
                                                {%- if listing.featured ~%}
                                                    <span class="badge badge-pill badge-warning mr-2">{{- '' -}}
                                                        {{- 'trans.Featured' | trans -}}
                                                    </span>
                                                {%- endif ~%}
                                            </div>

                                            <div class="listing-list-details">
                                                {%- if listing.price is not empty -%}
                                                    <div class="mt-1 d-inline-block"> {{- '' -}}
                                                        <div class="name-value-group price"> {{- '' -}}
                                                            <div class="name text-break">
                                                                {{- 'trans.Price' | trans -}}
                                                            </div> {{- '' -}}
                                                            <strong class="text-break">
                                                                {{- listing.price | money -}}
                                                            </strong>
                                                            {%- if listing.priceFor -%}
                                                                <span> {{- '' -}}
                                                                    {{- ' ' -}}
                                                                    {{- ('trans.priceFor.'~listing.priceFor) | trans -}}
                                                                </span>
                                                            {%- endif -%}
                                                        </div>
                                                    </div>
                                                {%- endif -%}

                                                {%- for customFieldInline in listing.customFieldsInline -%}
                                                    <div class="name-value-group"> {{- '' -}}
                                                        <div class="name text-break">
                                                            {{- customFieldInline.name -}}
                                                        </div> {{- '' -}}
                                                        <strong class="text-break">
                                                            {%- if customFieldInline.type == constant('\App\\Entity\\CustomField::INTEGER_RANGE') -%}
                                                                {{- customFieldInline.value | thousandsSeparate -}}
                                                            {%- else -%}
                                                                {{- customFieldInline.value -}}
                                                            {%- endif -%}
                                                        </strong> {{- '' -}}
                                                        {%- if customFieldInline.unit  -%}
                                                            <span class="small">
                                                                {{- ' ' -}}
                                                                {{- customFieldInline.unit -}}
                                                            </span>
                                                        {%- endif -%}
                                                    </div>
                                                {%- endfor -%}
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                {%- if not isCurrentUserListing(listing) ~%}
                                    {%- if is_granted('ROLE_USER') ~%}
                                        <div {{- ' ' -}}
                                                class="listing-list-observe js__observe" {{- ' ' -}}
                                                data-listing-id="{{ listing.id }}" {{- ' ' -}}
                                                data-observed="{{ listing.observed }}" {{- ' ' -}}
                                                title="{{ 'trans.Observe' | trans }}" {{- ' ' -}}
                                        > {{- '' -}}
                                            <i class="svg {% if listing.observed %}svg-heart{% else %}svg-heart-outline{% endif %}"></i> {{- '' -}}
                                        </div>
                                    {%- else ~%}
                                        <a {{- ' ' -}}
                                                class="listing-list-observe" {{- ' ' -}}
                                                href="{{ path('app_login') }}" {{- ' ' -}}
                                                target="_blank" {{- ' ' -}}
                                                title="{{ 'trans.Observe' | trans }}" {{- ' ' -}}
                                        ><i class="svg svg-heart-outline"></i></a>
                                    {%- endif ~%}
                                {%- endif ~%}
                            </div>
                        {%- else ~%}
                            <div class="alert alert-info w-100">
                                {{- 'trans.No classifieds matching the criteria found' | trans -}}
                            </div>
                        {%- endfor ~%}
                    </div>
                    <!-- listing list end -->
                    {% include 'base/_pagination.html.twig' %}
                {%- endif ~%}
            </div>
        </div>
    </div>
{% endblock body %}

{% block js %}
    {{ encore_entry_link_tags('listing_list') }}
    {{ encore_entry_script_tags('listing_list') }}

    {%- if listingListDto.showOnMap ~%}
        {{ encore_entry_link_tags('listing_list_map') }}
        {{ encore_entry_script_tags('listing_list_map') }}
    {%- endif ~%}
{% endblock %}

