{# Selected #}
<section class="ds-example example-filter">
    <div class="html">
        <a href="#" class="filter-selected">
            {% include '@SyliusShop/Icons/cross.html.twig' %}
            Lorem ipsum
        </a>
    </div>
    <pre>
        <code>&lt;a href="#" class="filter-selected">
    {&#37; include '@SyliusShop/Icons/croix.html.twig' &#37;}
    ...
&lt;/a></code>
    </pre>
</section>

<hr class="ds-separator">

{# Categories #}
<section class="ds-example example-filter">
    <div class="html">
        <div class="row">
            <div class="col-md-3">
                <ul class="list-unstyled collapse-group custom-collapse">
                    <li class="filter-wrapper">
                        <div class="collapse-wrapper">
                            <button class="collapse-header title-label active" type="button" data-collapse="collapse-category">
                                {{ 'app.design_system.selections.filters.categories'|trans }}
                            </button>

                            <div id="collapse-category" class="collapse-panel active">
                                <ul class="collapse-body list-links" data-simplebar data-simplebar-auto-hide="false">
                                    {% for i in 1..9 %}
                                        <li>
                                            <a href="">Item {{ i }}</a>
                                        </li>
                                    {% endfor %}
                                </ul>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <pre>
        <code>&lt;li class="filter-wrapper" id="">
    &lt;div class="collapse-wrapper">
        &lt;button class="collapse-header title-label active" type="button" data-collapse="collapse-">
            ...
        &lt;/button>

        &lt;div id="collapse-" class="collapse-panel active">
            &lt;ul class="collapse-body list-links" data-simplebar data-simplebar-auto-hide="false">
                &lt;li>
                    &lt;a href="">...&lt;/a>
                &lt;/li>
            &lt;/ul>
        &lt;/div>
    &lt;/div>
&lt;/li></code>
    </pre>
</section>

<hr class="ds-separator">

{# Filters #}
<section class="ds-example example-filter">
    <div class="html">
        <div class="row">
            <div class="col-md-3">
                <ul class="list-unstyled collapse-group custom-collapse">
                    <li class="filter-wrapper">
                        <div class="collapse-wrapper">
                            <button class="collapse-header title-label active" type="button" data-collapse="collapse-filter1">
                                {{ 'app.design_system.selections.filters.filters'|trans }}
                            </button>

                            <div id="collapse-filter1" class="collapse-panel active">
                                <div class="collapse-body" data-simplebar data-simplebar-auto-hide="false">
                                    {% for i in 1..5 %}
                                        <label for="checkbox{{ i }}" class="custom-control custom-checkbox">
                                            <input type="checkbox" id="checkbox{{ i }}" class="custom-control-input">
                                            <span class="custom-control-field"></span>
                                            <span class="custom-control-text">Item {{ i }} (1)</span>
                                        </label>
                                    {% endfor %}
                                </div>
                            </div>
                        </div>
                    </li>
                    <li class="filter-wrapper">
                        <div class="collapse-wrapper">
                            <button class="collapse-header title-label active" type="button" data-collapse="collapse-filter2">
                                {{ 'app.design_system.selections.filters.filters'|trans }}
                            </button>

                            <div id="collapse-filter2" class="collapse-panel active">
                                <div class="collapse-body" data-simplebar data-simplebar-auto-hide="false">
                                    {% for i in 1..9 %}
                                        <label for="checkbox{{ i }}" class="custom-control custom-checkbox">
                                            <input type="checkbox" id="checkbox{{ i }}" class="custom-control-input">
                                            <span class="custom-control-field"></span>
                                            <span class="custom-control-text">Item {{ i }} (1)</span>
                                        </label>
                                    {% endfor %}
                                </div>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <pre>
        <code>&lt;div class="collapse-body" data-simplebar data-simplebar-auto-hide="false">
    &lt;label for="" class="custom-control custom-checkbox">
        &lt;input type="checkbox" name="" value="" id="" class="custom-control-input" >
        &lt;span class="custom-control-field">&lt;/span>
        &lt;span class="custom-control-text">... (0)&lt;/span>
    &lt;/label>

    &lt;label for="" class="custom-control custom-checkbox">
        ...
    &lt;/label>
&lt;/div></code>
    </pre>
</section>

<hr class="ds-separator">

{# Price #}
<section class="ds-example example-filter">
    <div class="html">
        <div class="row">
            <div class="col-md-3">
                <ul class="list-unstyled collapse-group custom-collapse">
                    <li class="filter-wrapper">
                        <div class="collapse-wrapper">
                            <button class="collapse-header title-label active" type="button" data-collapse="collapse-price">
                                {{ 'app.design_system.selections.filters.price'|trans }}
                            </button>

                            <div id="collapse-price" class="collapse-panel active">
                                <div class="collapse-body filter-price-wrapper">
                                    <label for="price-min">
                                        {{ 'app.design_system.selections.filters.price_min'|trans }}
                                        <div class="input-group">
                                            <input type="number" class="form-control" id="price-min" value="0">
                                            <div class="input-group-append">
                                                <span class="input-group-text">€</span>
                                            </div>
                                        </div>
                                    </label>

                                    <label for="price-max">
                                        {{ 'app.design_system.selections.filters.price_max'|trans }}
                                        <div class="input-group">
                                            <input type="number" class="form-control" id="price-max" value="100">
                                            <div class="input-group-append">
                                                <span class="input-group-text">€</span>
                                            </div>
                                        </div>
                                    </label>
                                </div>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <pre>
        <code>&lt;div class="collapse-body filter-price-wrapper">
    &lt;label for="">
        ...
        &lt;div class="input-group">
            &lt;input type="number" class="form-control" aria-label="" id="" name="" value="">
            &lt;div class="input-group-append">
                &lt;span class="input-group-text">€&lt;/span>
            &lt;/div>
        &lt;/div>
    &lt;/label>

    &lt;label for="">
        ...
        &lt;div class="input-group">
            &lt;input type="number" class="form-control" aria-label="" id="" name="" value="">
            &lt;div class="input-group-append">
                &lt;span class="input-group-text">€&lt;/span>
            &lt;/div>
        &lt;/div>
    &lt;/label>
&lt;/div></code>
    </pre>
</section>

<hr class="ds-separator">

{# Color #}
<section class="ds-example example-filter">
    <div class="html">
        <div class="row">
            <div class="col-md-3">
                <ul class="list-unstyled collapse-group custom-collapse">
                    <li class="filter-wrapper">
                        <div class="collapse-wrapper">
                            <button class="collapse-header title-label active" type="button" data-collapse="collapse-colors">
                                {{ 'app.design_system.selections.filters.colors'|trans }}
                            </button>

                            <div id="collapse-colors" class="collapse-panel active">
                                <div class="collapse-body filter-color-wrapper">
                                    <label for="color-1" class="custom-checkbox-color">
                                        <input type="checkbox" class="custom-control-input" name="color[]" id="color-1" value="white">
                                        <span class="custom-control-field"></span>
                                    </label>
                                    <label for="color-2" class="custom-checkbox-color">
                                        <input type="checkbox" class="custom-control-input" name="color[]" id="color-2" value="white">
                                        <span class="custom-control-field bg-black"></span>
                                    </label>
                                    <label for="color-3" class="custom-checkbox-color">
                                        <input type="checkbox" class="custom-control-input" name="color[]" id="color-3" value="white">
                                        <span class="custom-control-field bg-dark"></span>
                                    </label>
                                    <label for="color-4" class="custom-checkbox-color">
                                        <input type="checkbox" class="custom-control-input" name="color[]" id="color-4" value="white">
                                        <span class="custom-control-field bg-primary"></span>
                                    </label>
                                </div>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <pre>
        <code>&lt;div class="collapse-body filter-color-wrapper">
    &lt;label for="" class="custom-checkbox-color">
        &lt;input type="checkbox" class="custom-control-input" name="" id="" value="">
        &lt;span class="custom-control-field" style="<b>background:#000</b>">&lt;/span>
    &lt;/label>
&lt;/div></code>
    </pre>
</section>
