{% extends "layout.html" %}

{% set title = 'Category' %}

{% block content %}

<nav aria-label="breadcrumb">
    <div class="container">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="index.html">Home</a></li>
            <li class="breadcrumb-item active" aria-current="page">Refrigerator</li>
        </ol>
    </div>
</nav>

<section>
    <div class="container">
        <div class="row">
            <div class="col-sm-3">
                <aside class="category-side">
                    <div class="filter-head">
                        <div class="row">
                            <div class="col order-first">
                                <div class="filter-title">
                                    <img src="{{icons[8].src}}" alt="" class="mrxs align-bottom">
                                    <span class="text-capitalize">filter</span>
                                </div>
                            </div>
                            <div class="col order-last text-right">
                                <a href="#" class="brand-link">Reset all</a>
                            </div>
                        </div>
                    </div>
                    <form action="" class="filter">
                        <div class="filter-group mtxxlg">
                            <div class="filter-group-title text-uppercase mblg">Energy Class</div>
                            <div class="checkbox-custom">
                                <input type="checkbox" name="energyClass" value="energyClassA+" id="A+" class="form-checkbox pull-left">
                                <label for="A+" class="pull-left text-capitalize">a+</label>
                            </div>
                            <div class="checkbox-custom mtsm">
                                <input type="checkbox" name="energyClass" value="energyClassA++" id="A++" class="form-checkbox pull-left">
                                <label for="A++" class="pull-left text-capitalize">a++</label>
                            </div>
                            <div class="checkbox-custom mtsm">
                                <input type="checkbox" name="energyClass" value="energyClassA++" id="A+++" class="form-checkbox pull-left">
                                <label for="A+++" class="pull-left text-capitalize">a+++</label>
                            </div>
                        </div>
                        <div class="filter-group mtxxlg">
                            <div class="filter-group-title text-uppercase mblg">Inverter Compressor</div>
                            <div class="checkbox-custom">
                                <input type="checkbox" name="inverterCompressor" value="inverterCompressorYes" id="inverterYes" class="form-checkbox pull-left">
                                <label for="inverterYes" class="pull-left text-capitalize">yes</label>
                            </div>
                            <div class="checkbox-custom mtsm">
                                <input type="checkbox" name="inverterCompressor" value="inverterCompressorNo" id="inverterNo" class="form-checkbox pull-left">
                                <label for="inverterNo" class="pull-left text-capitalize">no</label>
                            </div>
                        </div>
                        <div class="filter-group mtxxlg">
                            <div class="filter-group-title text-uppercase mblg">Net Refrigerator Capacity (L)</div>
                            <div id="range-slider"></div>
                            <div class="range-data">
                                <div class="row">
                                    <div class="col order-first text-left">
                                        <input type="text" name="capacity-min" class="sliderValue text-right" data-min="100" value="100" data-index="0" disabled>
                                        <span>L</span>
                                    </div>
                                    <div class="col order-last text-right mrxs">
                                        <input type="text" name="capacity-max" class="sliderValue text-right" data-max="1000" value="1000" data-index="1" disabled>
                                        <span>L</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="filter-group mtxxlg">
                            <div class="filter-group-title text-uppercase mblg">3 System</div>
                            <div class="checkbox-custom">
                                <input type="checkbox" name="3System" value="3SystemYes" id="3SystemYes" class="form-checkbox pull-left">
                                <label for="3SystemYes" class="pull-left text-capitalize">yes</label>
                            </div>
                            <div class="checkbox-custom mtsm">
                                <input type="checkbox" name="3System" value="3SystemNo" id="3SystemNo" class="form-checkbox pull-left">
                                <label for="3SystemNo" class="pull-left text-capitalize">no</label>
                            </div>
                        </div>
                        <div class="filter-group mtxxlg">
                            <div class="filter-group-title text-uppercase mblg">1+3 Mode</div>
                            <div class="checkbox-custom">
                                <input type="checkbox" name="1+3Mode" value="1+3ModeYes" id="1+3ModeYes" class="form-checkbox pull-left">
                                <label for="1+3ModeYes" class="pull-left text-capitalize">yes</label>
                            </div>
                            <div class="checkbox-custom mtsm">
                                <input type="checkbox" name="1+3Mode" value="1+3ModeNo" id="1+3ModeNo" class="form-checkbox pull-left">
                                <label for="1+3ModeNo" class="pull-left text-capitalize">no</label>
                            </div>
                        </div>
                        <div class="filter-group mtxxlg">
                            <div class="filter-group-title text-uppercase mblg">Plasma Pure</div>
                            <div class="checkbox-custom">
                                <input type="checkbox" name="plasmaPure" value="plasmaPureYes" id="plasmaPureYes" class="form-checkbox pull-left">
                                <label for="plasmaPureYes" class="pull-left text-capitalize">yes</label>
                            </div>
                            <div class="checkbox-custom mtsm">
                                <input type="checkbox" name="plasmaPure" value="plasmaPureNo" id="plasmaPureNo" class="form-checkbox pull-left">
                                <label for="plasmaPureNo" class="pull-left text-capitalize">no</label>
                            </div>
                        </div>
                    </form>
                </aside>
            </div>
            <div class="col-sm-9">
                <div class="products">
                    <div class="result mblg">
                        Showing <span>11 </span>Results
                    </div>
                    <div class="row">
                        {% for product in products %}
                        <div class="col-sm-4">
                            {% include '../template/component/product-card.html' %}
                        </div>
                        {% endfor %}
                        {% for product in products %}
                        <div class="col-sm-4">
                            {% include '../template/component/product-card.html' %}
                        </div>
                        {% endfor %}
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

{% endblock content %}