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

{% block title %}{{ category.name }}{% endblock %}

{% block body %}
    <div class="category">
        <section class="page-top">
            <div class="container">
                {# breadcrumbs #}
                {# TODO: dokoncit breadcrumbs #}
                <div class="col-lg-12">
                    <ul class="breadcrumb">
                        <li>
                            <a href="{{ path('home') }}">Buyfree.cz</a>
                        </li>
                        <li>
                            <a class="active">{{ category.name }}</a>
                        </li>
                    </ul>
                </div>
                {# category #}
                <div class="row">
                    <div class="col-lg-12">
                        <h2 class="heading text-center">{{ category.name }}</h2>
                    </div>
                    {% for childCategory in category.children|slice(0, 6) %}
                        <div class="col-xxl-6ths col-lg-3 col-md-4 col-sm-6">
                            <a href="{{ path('category', {id: childCategory.id}) }}">
                                <div class="categories__content">
                                    <div class="categories__content--img">
                                        {# TODO: staticky obrazok je docasne riesenie #}
                                        <img src="{{ asset('build/images/product1.png') }}" alt="{{ childCategory.name }}">
                                        {#<img src="{{ childCategory.icon }}" alt="{{ childCategory.name }}" />#}
                                    </div>
                                    <p>{{ childCategory.name }}</p>
                                </div>
                            </a>
                        </div>
                    {% endfor %}
                </div>
            </div>
        </section>
        <section class="page-content">
            {% include('frontend/category/partials/favourite-brands.html.twig') %}
        </section>
        <div class="container">
            <div class="row">
                {# subcategories of children #}
                <div class="col-lg-12">
                    <h3 class="heading-sm text-center u-mt-50">Podkategorie</h3>
                </div>
                {% for childCategory in category.children %}
                <div class="col-lg-5ths col-md-4 col-sm-6">
                    <div class="menu-primary">
                        <h5 class="menu-primary--heading">
                            <a href="{{ path('category', {id: childCategory.id}) }}">
                                {{ childCategory.name }}
                            </a>
                        </h5>
                        <ul class="mb-3">
                            {% for childSubCategory in childCategory.children|slice(0,4) %}
                                <li>
                                    <a href="{{ path('category', {id: childSubCategory.id}) }}">
                                        {{ childSubCategory.name }} {#<span>(176)</span>#}
                                    </a>
                                </li>
                            {% endfor %}
                        </ul>
                        <a class="mb-5" href="{{ path('category', {id: childCategory.id}) }}">DALŠÍ</a>
                    </div>
                </div>
                {% endfor %}

                {# aukce #}
                {# TODO: dokoncit aukcie pre kategoriu #}
                <div class="col-lg-12">
                    <h3 class="heading-sm text-center u-mt-50"> Probíhající aukce ze sekce {{ category.name }}</h3>
                </div>
                <div class="col-lg-4">
                    <a href="/auction">
                        <div class="product-box js-product-box" data-counter-end="undefined">
                            <div class="product-box__product">
                                <img src="{{ asset("build/images/product20.png") }}" alt="" />
                                <div class="time-left js-time-left">
                                    <p>KONČÍ ZA 3 HODINY</p>
                                </div>
                            </div>
                            <div class="product-box__text">
                                <h5 class="product-box__text--heading"> Samsung Galaxy Watch</h5>
                                <div class="product-box__timer js-product-box-timer"></div><span> Aktuální cena</span>
                                <p class="product-box__text--price">14 560 Kč</p>
                            </div>
                        </div>
                    </a>
                </div>
                <div class="col-lg-4">
                    <a href="/auction">
                        <div class="product-box js-product-box" data-counter-end="undefined">
                            <div class="product-box__product">
                                <img src="{{ asset("build/images/product20.png") }}" alt="" />
                                <div class="time-left js-time-left">
                                    <p>KONČÍ ZA 3 HODINY</p>
                                </div>
                            </div>
                            <div class="product-box__text">
                                <h5 class="product-box__text--heading"> Samsung Galaxy Watch</h5>
                                <div class="product-box__timer js-product-box-timer"></div><span> Aktuální cena</span>
                                <p class="product-box__text--price">14 560 Kč</p>
                            </div>
                        </div>
                    </a>
                </div>
                <div class="col-lg-4">
                    <a href="/auction">
                        <div class="product-box js-product-box" data-counter-end="undefined">
                            <div class="product-box__product">
                                <img src="{{ asset("build/images/product20.png") }}" alt="" />
                                <div class="time-left js-time-left">
                                    <p>KONČÍ ZA 3 HODINY</p>
                                </div>
                            </div>
                            <div class="product-box__text">
                                <h5 class="product-box__text--heading"> Samsung Galaxy Watch</h5>
                                <div class="product-box__timer js-product-box-timer"></div><span> Aktuální cena</span>
                                <p class="product-box__text--price">14 560 Kč</p>
                            </div>
                        </div>
                    </a>
                </div>
            </div>
        </div>
    </div>
{% endblock %}