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

{% block title %}
	Produit
{% endblock %}

{% block ogtitle %}
	Produit
{% endblock %}

{% block twittertitle %}
	Produit
{% endblock %}

{% block canonical %}
	{% set currentUrl = app.request.uri() %}{{ canonicalHandler(currentUrl, 'Produit') }}
{% endblock %}

{% block ogurl %}
	{% set currentUrl = app.request.uri() %}{{ canonicalHandler(currentUrl, 'Produit') }}
{% endblock %}

{% block twitterurl %}
	{% set currentUrl = app.request.uri() %}{{ canonicalHandler(currentUrl, 'Produit') }}
{% endblock %}

{% block body %}
	<div class="product">
		<div class="container">
			<div class="product-content">
				<div class="product-header">
					<nav aria-label="breadcrumb">
						<ol class="breadcrumb">
							<li class="breadcrumb-item">
								<a href="{{ path('app_famille') }}">Catalogue</a>
							</li>
							<li class="breadcrumb-item">
								<a href="{{ path('app_famille_famille', {rayon: rayon|urlHandler }) }}">{{rayon}}</a>
							</li>
							<li class="breadcrumb-item active" aria-current="catalogue">{{ famille['nom'] }}</li>
						</ol>
					</nav>
				</div>

				<div class="product-body">
					<div class="row g-1">
						<div class="col-12 col-lg-4">
							{% include 'ecommerce/famille/includes/_produit_filter.html.twig' %}
						</div>

						{# PRODUITS #}
						<div class="col-12 col-lg">
							{% include 'ecommerce/famille/includes/_produit_list.html.twig' %}
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
{% endblock %}

{% block javascripts %}
	{{ parent() }}

	{% set  dataFamille = {
		id:  famille['id'],
		filter_products_first: path('filter_products'),
		filter_products_second: path('filter_products_second'),
		filter_products_third: path('filter_products_third'),
		filter_products_four: path('filter_products_for')
	} %}

	<script>
		var dataFamille = JSON.parse("{{ dataFamille|json_encode()|escape('js') }}");
	</script>

	<script src="{{asset('js/app/famille.js')}}"></script> 
	<script src="{{asset('js/app/range.js')}}"></script>
	<script src="{{asset('js/app/product.js')}}"></script>
{% endblock %}