{% extends 'Common/base.html.twig' %}
{% import 'Common/parts/functions.html.twig' as function %}
{% block title %}Tienda | {{ parent() }}{% endblock %}
{% block classBody %}product_list {{ parent() }}{% endblock %}
{% block stylesheets %}
{{ parent() }}
{{ encore_entry_link_tags('select2_styles') }}
{% endblock stylesheets %}
{% block javascripts %}
{{ parent() }}
{{ encore_entry_script_tags('select2_js') }}
{{ encore_entry_script_tags('jquery_twbspagination_js') }}
{{ encore_entry_script_tags('public_product_list') }}
{% endblock javascripts %}
{% block contents %}
<div id="public_product_list_page" ng-controller="publicProductListCtrl"
{% if is_granted('IS_AUTHENTICATED_REMEMBERED') %}
data-grantuser-username="{{ app.user.user.firstName }}"
data-grantuser-id="{{ app.user.user.id }}"
{% endif %}
class="container pt-5 pb-9">
<div class="container-small">
<nav class="mb-2" aria-label="breadcrumb">
<ol class="breadcrumb mb-0">
<li class="breadcrumb-item"><a href="{{path('web_init')}}">Inicio</a></li>
<li class="breadcrumb-item active" aria-current="page">Productos</li>
</ol>
</nav>
<div class="row">
<div class="col-lg-3 col-xxl-2 ps-2 ps-xxl-3" id="search-filters">
<div class="product-filter-offcanvas bg-soft scrollbar phoenix-offcanvas phoenix-offcanvas-fixed"
id="productFilterColumn">
<div class="d-flex justify-content-between align-items-center mb-3">
<h3 class="mb-0">Filtros</h3>
<button class="btn d-lg-none p-0" data-phoenix-dismiss="offcanvas">
<span class="uil uil-times fs-0"></span>
</button>
</div>
<a class="btn px-0 d-block collapse-indicator" data-bs-toggle="collapse"
href="#collapseSearch" role="button" aria-expanded="true" aria-controls="collapseSearch">
<div class="d-flex align-items-center justify-content-between w-100">
<div class="fs-0 text-1000">Buscar</div>
<span class="fa-solid fa-angle-down toggle-icon text-500"></span>
</div>
</a>
<div class="collapse show" id="collapseSearch">
<div class="d-flex justify-content-between mb-3">
<div class="input-group me-2">
<input type="text" class="form-control" id="input-filter-name" placeholder="Nombre"/>
</div>
</div>
</div>
<a class="btn px-0 d-block collapse-indicator" data-bs-toggle="collapse"
href="#collapseCategories" role="button" aria-expanded="true" aria-controls="collapseCategories">
<div class="d-flex align-items-center justify-content-between w-100">
<div class="fs-0 text-1000">Categorias</div>
<span class="fa-solid fa-angle-down toggle-icon text-500"></span>
</div>
</a>
<div class="collapse show" id="collapseCategories">
<div class="d-flex justify-content-between mb-3">
<div class="me-2">
{% for productCategory in productCategories %}
<div class="form-check mb-0">
<input class="form-check-input mt-0 filter_category" id="category_{{productCategory.id}}" type="checkbox" value="{{productCategory.id}}">
<label class="form-check-label d-block lh-sm fs--1 text-900 fw-normal mb-0" for="category_{{productCategory.id}}">{{productCategory.productCategoryName}}</label>
</div>
{% endfor %}
</div>
</div>
</div>
{#
<a class="btn px-0 d-block collapse-indicator" data-bs-toggle="collapse"
href="#collapseTags" role="button" aria-expanded="true" aria-controls="collapseTags">
<div class="d-flex align-items-center justify-content-between w-100">
<div class="fs-0 text-1000">Etiquetas</div>
<span class="fa-solid fa-angle-down toggle-icon text-500"></span>
</div>
</a>
<div class="collapse show" id="collapseTags">
<div class="d-flex justify-content-between mb-3">
<div class="input-group me-2">
<input type="text" class="form-control" id="input-filter-tag" placeholder="Tags"/>
</div>
</div>
</div>
#}
</div>
<div class="phoenix-offcanvas-backdrop d-lg-none" data-phoenix-backdrop></div>
</div>
<div id="public_product_list_row" class="d-none">
<div class="col-6 col-md-3 dp-product">
<div class="product-card-container h-100">
<div class="position-relative text-decoration-none product-card h-100">
<div class="d-flex flex-column justify-content-between h-100">
<div class="">
<div class="border border-1 rounded-3 position-relative mb-2">
<img class="img-fluid product-image" src="{{ asset('/assets/images/logo_v3.png') | imagine_filter('product_list_image') }}" />
</div>
<a class="stretched-link product-link" href="#">
<h5 class="mb-1 lh-sm line-clamp-3 product-name"></h5>
</a>
<p class="fs--2 text-body-highlight fw-bold mb-2 product-organization-label"></p>
<p class="fs--1 text-700 mb-2 product-description"></p>
</div>
<div>
<div class="d-flex product-rater-block d-none mb-1">
<div class="wp-star product-rater me-2 " ></div>
<div class="product-rater-description fs--1 text-500 fw-semi-bold ms-1"></div>
</div>
<div class="d-flex align-items-center mb-1">
{#
<p class="me-2 text-900 text-decoration-line-through mb-0 price-label">199.99€</p>
#}
<h3 class="text-1100 mb-0 product-price-label"></h3>
</div>
<p class="lh-1 mb-0 text-end product-availability-badge">
<span class="badge fs--2 product-availability-text"></span>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-9 col-xxl-10" id="search-list" ng-init="initPublicProductList()">
{{ function.showFlashes() }}
<div class="row gx-3 gy-6 mb-8" id="product-items" ng-init="loadProductPage(1)">
</div>
<div class="d-flex justify-content-between align-items-center">
<p class="mb-0 d-none d-sm-block me-3 fw-semi-bold text-900" data-list-info="data-list-info">
<span id="pagination-page"></span> a <span id="pagination-size"></span>
<span class="text-600"> elementos de </span>
<span id="pagination-total"></span>
</p>
<nav aria-label="Page navigation" id="list-pagination">
</nav>
</div>
</div>
</div>
</div>
</div>
{% endblock contents %}