{{ cookie:set user_id="test" }}
{{ section:head }}
    {{ if get:q }}
        <meta name="robots" content="noindex,follow">
    {{ elseif get:wishlist == 1 }}
        <meta name="robots" content="noindex,follow">
    {{ elseif not get:filters.brand || (get:filters | count > 1 && get:filters.brand | count >= 1) }}
        <meta name="robots" content="noindex,follow">
    {{ else }}
        {{ unless get:filters.brand | count === 1 && (get:page == 1 || get:page == null) }}
            <meta name="robots" content="noindex,follow">
        {{ /unless }}
    {{ /if }}
{{ /section:head }}
<div class="container mt-4">
    <!-- Breadcrumbs -->
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb mb-4">
            {{ nav:breadcrumbs }}
                <li class="breadcrumb-item {{ if is_current }} active {{ /if }}"><a href="{{ url }}">{{ title }}</a></li>
            {{ /nav:breadcrumbs }}
        </ol>
    </nav>

    <!-- Filters and main content area -->
    <div class="row">
        <div class="col-md-3">
            <h5 class="d-block d-sm-none">
                <div class="d-flex gap-2 mb-2">
                    <a href="{{ current_url }}" class="btn btn-outline-secondary w-50" role="button">Filters wissen</a>
                    <button class="btn btn-secondary w-50" type="button" data-bs-toggle="collapse" data-bs-target="#filterSection" aria-expanded="false" aria-controls="filterSection">Filteren</button>
                </div>
            </h5>

            <!-- Filters section -->
            <div class="collapse d-sm-block" id="filterSection">

                <!-- Filters section -->
                <div class="d-none d-sm-flex justify-content-between align-items-center mb-2">
                    <h5 class="mb-0">Filters</h5>
                    <a href="{{ current_url }}" class="small text-muted">Filters wissen</a>
                </div>
                <h5 class="d-sm-none">Filters</h5>
                <form action="{{ current_url }}" method="get" id="filterForm">
                    <input type="hidden" name="q" value="{{ get:q }}">
                    {{ if get:wishlist }}<input type="hidden" name="wishlist" value="{{ get:wishlist }}">{{ /if }}
                    {{ filters }}
                        <div class="card mb-3">
                            <div class="card-body">
                                <h6 class="card-subtitle mb-2 text-muted small">{{ field.label }}</h6>
                                {{ if field.label === 'Prijs' }}
                                    {{ sorted_values_asc = values | sort }}
                                    {{ sorted_values_desc = values | sort | reverse }}
                                    <div class="price-range-slider">
                                        <div class="slider-container">
                                            <!-- Two inputs for min and max -->
                                            {{ minvar = field.key + '-min' }}
                                            {{ maxvar = field.key + '-max' }}
                                            <input type="range"
                                                   name="filters[{{ field.key }}-min]"
                                                   id="range-min"
                                                   class="range-slider"
                                                   min="{{ sorted_values_asc[0] }}"
                                                   max="{{ sorted_values_desc[0] }}"
                                                   value="{{ if get:filters[minvar] }}{{ get:filters[minvar] }}{{ else }}{{ sorted_values_asc[0] }}{{ /if }}">
                                            <input type="range"
                                                   name="filters[{{ field.key }}-max]"
                                                   id="range-max"
                                                   class="range-slider"
                                                   min="{{ sorted_values_asc[0] }}"
                                                   max="{{ sorted_values_desc[0] }}"
                                                   value="{{ if get:filters[maxvar] }}{{ get:filters[maxvar] }}{{ else }}{{ sorted_values_desc[0] }}{{ /if }}">

                                            <!-- Slider track (the background of the range) -->
                                            <div class="slider-track"></div>
                                        </div>

                                        <!-- Displaying the selected range -->
                                        <div class="range-values">
                                            € <span id="range-min-value">{{ sorted_values_asc[0] }}</span> -
                                            € <span id="range-max-value">{{ sorted_values_desc[0] }}</span>
                                        </div>
                                    </div>
                                {{ else }}
                                    {{ values }}
                                        {{ if value || value === 0 }}
                                            <div class="form-check">
                                                <input class="form-check-input filter-checkbox" type="checkbox" name="filters[{{ field.key }}][]" value="{{ value }}" id="{{ field.key }}_{{ index }}" {{ if (get:filters[field.key] | in_array(value)) }}checked{{ /if }}>
                                                <label class="form-check-label" for="{{ field.key }}_{{ index }}">
                                                    {{ if field.key === 'in_stock' }}
                                                        {{ value === 1 ? 'Ja' : 'Nee' }}
                                                    {{ else }}
                                                        {{ value }}
                                                    {{ /if }}
                                                </label>
                                            </div>
                                        {{ /if }}
                                    {{ /values }}
                                {{ /if }}
                            </div>
                        </div>
                    {{ /filters }}
                </form>
            </div>

        </div>


        <!-- Main content area -->
        <div class="col-md-9">

            <!-- Introductory text -->
            {{ if get:wishlist }}
                <h1>Mijn Wensenlijst</h1>
            {{ elseif get:q }}
                <h1>{{ get:q }}</h1>
            {{ else }}
                {{ if get:filters.brand | count === 1 }}
                    {{ taxonomy:brands :title:contains="get:filters.brand[0]" }}
                        {{ partial:partials/bard :content="content" }}
                    {{ /taxonomy:brands }}
                {{ else }}
                    {{ partial:partials/bard :content="page_content" }}
                {{ /if }}
            {{ /if }}

            <!-- Product results -->
            
            {{ if get:filters || get:wishlist }}
                {{ collection:products paginate="15" as="products"
                    id:in="{ facets:ids }"
                    sort="{ get:sort ? get:sort : 'price:asc' }"
                    query_scope="{ get:wishlist ? 'wishlist' : ((get:filters.price-min && get:filters.price-max) ? 'price_between' : '') }"
                    price_min="{ get:filters.price-min }"
                    price_max="{ get:filters.price-max }"
                    title:contains="{ get:q }"
                    condition:in="{ get:filters.condition ? (get:filters.condition | join('|')) : '' }"
                    brand:in="{ get:filters.brand ? (get:filters.brand | join('|')) : '' }"
                    in_stock:in="{ get:filters.in_stock ? (get:filters.in_stock | join('|')) : '' }"
                    gear_system:in="{ get:filters.gear_system ? (get:filters.gear_system | join('|')) : '' }"
                    fuel_type:in="{ get:filters.fuel_type ? (get:filters.fuel_type | join('|')) : '' }"
                    energy_label:in="{ get:filters.energy_label ? (get:filters.energy_label | join('|')) : '' }"
                    lease_duration:in="{ get:filters.lease_duration ? (get:filters.lease_duration | join('|')) : '' }"
                    km_per_year:in="{ get:filters.km_per_year ? (get:filters.km_per_year | join('|')) : '' }"
                    body_type:in="{ get:filters.body_type ? (get:filters.body_type | join('|')) : '' }"
                    number_of_doors:in="{ get:filters.number_of_doors ? (get:filters.number_of_doors | join('|')) : '' }"
                }}
                    {{ partial:partials/products_list }}
                {{ /collection:products }}
            {{ else }}
                {{ cache for="24 hours" key="prod:{ get:page }:{ get:sort }:{ get:q }" }}
                    {{ collection:products paginate="15" as="products"
                        sort="{ get:sort ? get:sort : 'price:asc' }"
                        title:contains="{ get:q }"
                    }}
                        {{ partial:partials/products_list }}
                    {{ /collection:products }}
                {{ /cache }}
            {{ /if }}
            
        </div>
    </div>
</div>