{% extends "web/layout.html.twig" %}
{% block meta %}
    <title>{{ titleStore }} - Justicialistas</title>
    <meta name="description" content="{{ seo.getDescripcionByLang(app.request.locale) }}" />
    <!-- Twitter Card data -->
    <meta name="twitter:card" content="summary">
    <meta name="twitter:title" content="{{ seo.getTituloByLang(app.request.locale) }}">
    <meta name="twitter:description" content="{{ seo.getDescripcionByLang(app.request.locale) }}">
    <meta name="twitter:image" content="{{ absolute_url(asset('/build/images/web/logo-header-mobile.png') ) }}">
    <!-- Open Graph data -->
    <meta property="og:title" content="{{ seo.getTituloByLang(app.request.locale) }}" />
    <meta property="og:url" content="{{ url(app.request.attributes.get('_route') ) }}">
    <meta name="og:image" content="{{ absolute_url(asset('/build/images/web/logo-header-mobile.png') ) }}">
    <meta property="og:description" content="{{ seo.getDescripcionByLang(app.request.locale) }}" />
    <meta property="og:site_name" content="Justicialistas" />
{% endblock %}
{% macro render_category_tree(categories, level = 0) %}
    <ul class="list-unstyled">
        {% for category in categories %}
            <li>
                <div style="padding-left: {{ level * 20 }}px;">
                    <a href="{{ path('web_store', {categorySlug: category.slug}) }}" class="category-slug">{{ category.name | raw }}</a>
                    {% if category.children is defined and category.children|length > 0 %}
                        <button class="btn btn-link toggle-btn" type="button" data-bs-target="#children-{{ category.id }}">+</button>
                    {% endif %}
                </div>
                {% if category.children is defined and category.children|length > 0 %}
                    <div id="children-{{ category.id }}" class="collapse">
                        {{ _self.render_category_tree(category.children, level + 1) }}
                    </div>
                {% endif %}
            </li>
        {% endfor %}
    </ul>
{% endmacro %}
{% block content %}
    <section class="store-container tienda" data-base-url="{{ path("web_store") }}">
        <section class="store-title">
            <div class="container">
                <div class="row justify-content-between">
                    <div class="col-lg-3 col-12 title-container">
                        <h6>
                            <div class="breadcrumbs">
                                {% if breadcrumbs is empty %}
                                    Tienda
                                {% else %}
                                    {% for name, url in breadcrumbs %}
                                        <a href="{{ url }}">{{ name }}</a>
                                        {% if not loop.last %}>{% endif %}
                                    {% endfor %}
                                {% endif %}
                            </div>
                        </h6>
                        <h1>{{ 'store.title'|trans({}, 'store') }}</h1>
                        {# <p class="text">{{ totalProducts }} {{ 'store.product.found'|trans({}, 'store') }}</p> #}
                    </div>
                    <div class="col-lg-3 col-12 orden-container d-none d-lg-block">
                        <h6>Orden</h6>
                        <select id="order-select" class="form-select" aria-label="Default select example">
                            {% for value, label in orderOptions %}
                                <option value="{{ value }}" {{ currentOrder == value ? 'selected' : '' }}>
                                    {{ label|trans({}, 'store') }}
                                </option>
                            {% endfor %}
                        </select>
                    </div>
                </div>
            </div>
        </section>
        <section class="store-products reveal">
            <div class="container">
                <div class="row">
                    <!-- Filtros móviles -->
                    <div class="col-12 d-block d-lg-none">
                        <section class="filters-mobile-container">
                            <div class="row filters-container">
                                <div class="col-6 item-filter item-left">
                                    <a href="#" data-bs-toggle="offcanvas" data-bs-target="#orderOffcanvas">
                                        <img src="{{ asset("build/images/web/order-icon.png") }}" class="img-fluid" alt="JUSTICIALISTAS">
                                        <h4>{{ 'store.filter'|trans({}, 'store') }}</h4>
                                    </a>
                                </div>
                                <div class="col-6 item-filter">
                                    <a href="#" data-bs-toggle="offcanvas" data-bs-target="#filterOffcanvas">
                                        <img src="{{ asset("build/images/web/filter-icon.png") }}" class="img-fluid" alt="JUSTICIALISTAS">
                                        <h4>{{ 'store.order'|trans({}, 'store') }}</h4>
                                    </a>
                                </div>
                            </div>
                            <!-- Offcanvas for Order -->
                            <div class="offcanvas offcanvas-start" tabindex="-1" id="orderOffcanvas">
                                <div class="offcanvas-header">
                                    <h5 class="offcanvas-title">{{ 'store.filter'|trans({}, 'store') }}</h5>
                                    <button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
                                </div>
                                <div class="offcanvas-body">
                                    {{ _self.render_category_tree(categoriesTree) }}
                                    {% if size is not empty %}
                                        <h3>{{ 'store.filter.size'|trans({}, 'store') }}</h3>
                                        <select id="size-select-m" class="form-select form-select-lg mb-3" aria-label="Large select example">
                                            <option value="">{{ 'store.filter.selectedSize'|trans({}, 'store') }}</option>
                                            {% for s in size %}
                                                <option value="{{ s.name }}" {% if app.request.query.get('size') == s.id %}selected{% endif %}>{{ s.name }}</option>
                                            {% else %}
                                                <option disabled>{{ 'store.filter.notfound'|trans({}, 'store') }}</option>
                                            {% endfor %}
                                        </select>
                                    {% endif %}
                                </div>
                            </div>
                            <!-- Offcanvas for Filter -->
                            <div class="offcanvas offcanvas-start" tabindex="-1" id="filterOffcanvas">
                                <div class="offcanvas-header">
                                    <h5 class="offcanvas-title">{{ 'store.order'|trans({}, 'store') }}</h5>
                                    <button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
                                </div>
                                <div class="offcanvas-body">
                                    {% for value, label in orderOptions %}
                                        <a href="?order={{ value }}" class="filter-item {% if currentOrder == value %}active{% endif %}">
                                            {{ label|trans({}, 'store') }}
                                        </a>
                                    {% endfor %}
                                </div>
                            </div>
                        </section>
                    </div>
                    <!-- Filtros en dispositivos grandes -->
                    <div class="col-lg-3 col-12 filters-container d-none d-lg-block" id="filter-store">
                        {{ _self.render_category_tree(categoriesTree) }}
                        {% if size is not empty %}
                            <h3>{{ 'store.filter.size'|trans({}, 'store') }}</h3>
                            <select id="size-select" class="form-select form-select-lg mb-3" aria-label="Large select example">
                                <option value="">{{ 'store.filter.selectedSize'|trans({}, 'store') }}</option>
                                {% for s in size %}
                                    <option value="{{ s.name }}" {% if app.request.query.get('size') == s.id %}selected{% endif %}>{{ s.name }}</option>
                                {% else %}
                                    <option disabled>{{ 'store.filter.notfound'|trans({}, 'store') }}</option>
                                {% endfor %}
                            </select>
                        {% endif %}
                    </div>
                    <!-- Productos -->
                    <div class="col-lg-9 col-12 product-container" id="product-list">
                        {% if products|length > 0 %}
                            {% for product in products %}{{ include('web/blocks/product_item_block.html.twig', {product: product}) }}{% endfor %}
                        {% else %}
                            <p>No existen productos para la categoría seleccionada.</p>
                        {% endif %}
                    </div>
                    <div class="offset-md-3 col-md-9 col-12" id="loading" style="display: none;">
                        Cargando más
                        productos...
                    </div>
                </div>
            </div>
        </section>
    </section>
{% endblock %}