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

{% block title %}
	Tous les couteaux artisanaux et réalisation de l'atelier de coutellerie Vulcan' Affûtage
{% endblock %}

{% block metaDesc %}Découvrez notre collection de couteaux artisanaux, tire-bouchons et cravates western. Produits faits main par Vulcan' Affûtage, atelier de coutellerie à Clermont-Ferrand.{% endblock %}

{% block canonical %}produits{% endblock %}

{% block ogUrl %}produits{% endblock %}
{% block ogTitle %}Nos produits artisanaux - Vulcan' Affûtage{% endblock %}
{% block ogDesc %}Découvrez notre collection de couteaux artisanaux, tire-bouchons et cravates western faits main à Clermont-Ferrand.{% endblock %}

{% block headerProduit %}
	gColor
{% endblock %}

{# {% if condition %}
	{% block headerProduitsSM %}
		gColor
	{% endblock %}
{% endif %} #}

{% block body %}
	<div class="header-image w-100-p h-100-vh dp-f j-c-c a-i-c p-f z-i--1">
		<img class="p-a max-h-65-p max-w-90-p b-60 op-3" src="/assets/logo-sf2.webp" alt="Header image">
	</div>
	<div class="pageContainer l-h-1-5">
		<div class="p-r dp-f-c bg-va-transparent pad-30 gp-30 b-s-b-b b-r-10">
			<div class="contact-header p-a t-0 l-0 w-100-p h-180 dp-f-c j-c-c a-i-c pad-10 gBgColor b-s-b-b">
				<div class="dp-f b-r-10 dp-f-c j-c-c a-i-c gBgColor b-s-b-b w-100-p h-100-p pad-15 b-s-b-b" style="border: 2px solid var(--dom-cwhite);">
					<h1 class="cwColor ft-s-45 t-a-c ft-s-35-r1000 ft-s-26-r600">Nos produits</h1>
				</div>
			</div>

			<div class="dp-f-c mar-t-175">
				<div class="dp-f-r gp-15 j-c-s-b a-i-s">
					<div class="dp-f-r gp-15 f-w-w">
						<div class="dropdown dropdown-2 f-s-0 w-s-nw dp-f">
							<button class="boutonBorder">
								Type produit...
							</button>
							<div class="dropdown-content dropdown-content-left bg-va-transparent">
								<a href="{{ path('app_produits') }}" class="bg-c-t b-s-n w-100-p {% if currentFilter is null %}active{% endif %}">Tous</a>

								{% for type in productTypes %}
									<a href="{{ path('app_produits', { filtre: type.value }) }}" class="bg-c-t b-s-n w-100-p {% if currentFilter == type.value %}active{% endif %}">
										{{ type.label() }}
									</a>
								{% endfor %}
							</div>
						</div>
						<div class="dropdown dropdown-2 f-s-0 w-s-nw {% if currentFilter == "couteau" %}dp-f{% else %}dp-n{% endif %}">
							<button class="boutonBorder">
								Type couteaux...
							</button>
							<div class="dropdown-content dropdown-content-left bg-va-transparent">
								<a href="{{ path('app_produits', {'filtre': 'couteau', 'typeCouteau': 'artisanal'}) }}" class="bg-c-t b-s-n w-100-p {% if currentCouteau == "artisanal" %}active{% endif %}">Artisanal</a>
								<a href="{{ path('app_produits', {'filtre': 'couteau', 'typeCouteau': 'aurillac'}) }}" class="bg-c-t b-s-n w-100-p {% if currentCouteau == "aurillac" %}active{% endif %}">Aurillac</a>
								<a href="{{ path('app_produits', {'filtre': 'couteau', 'typeCouteau': 'roddef'}) }}" class="bg-c-t b-s-n w-100-p {% if currentCouteau == "roddef" %}active{% endif %}">Rodd'ef</a>
								<a href="{{ path('app_produits', {'filtre': 'couteau', 'typeCouteau': 'roquefort'}) }}" class="bg-c-t b-s-n w-100-p {% if currentCouteau == "roquefort" %}active{% endif %}">Roquefort</a>
								<a href="{{ path('app_produits', {'filtre': 'couteau', 'typeCouteau': 'london'}) }}" class="bg-c-t b-s-n w-100-p {% if currentCouteau == "london" %}active{% endif %}">London</a>
								<a href="{{ path('app_produits', {'filtre': 'couteau', 'typeCouteau': 'beurrier'}) }}" class="bg-c-t b-s-n w-100-p {% if currentCouteau == "beurrier" %}active{% endif %}">Beurrier</a>
								<a href="{{ path('app_produits', {'filtre': 'couteau', 'typeCouteau': 'chasse'}) }}" class="bg-c-t b-s-n w-100-p {% if currentCouteau == "chasse" %}active{% endif %}">Couteau de chasse</a>
							</div>
						</div>
						<div class="dropdown dropdown-2 f-s-0 w-s-nw {% if currentCouteau == "aurillac" %}dp-f{% else %}dp-n{% endif %}">
							<button class="boutonBorder">
								Type aurillac...
							</button>
							<div class="dropdown-content dropdown-content-left bg-va-transparent">
								<a href="{{ path('app_produits', {'filtre': 'couteau', 'typeCouteau': 'aurillac'}) }}" class="bg-c-t b-s-n w-100-p {% if currentVariante not in ['poche', 'table'] %}active{% endif %}">Tous</a>
								<a href="{{ path('app_produits', {'filtre': 'couteau', 'typeCouteau': 'aurillac', 'detailProduit': 'poche'}) }}" class="bg-c-t b-s-n w-100-p {% if currentVariante == "poche" %}active{% endif %}">Poche</a>
								<a href="{{ path('app_produits', {'filtre': 'couteau', 'typeCouteau': 'aurillac', 'detailProduit': 'table'}) }}" class="bg-c-t b-s-n w-100-p {% if currentVariante == "table" %}active{% endif %}">Table</a>
							</div>
						</div>
						<div class="dropdown dropdown-2 f-s-0 w-s-nw {% if currentCouteau == "artisanal" %}dp-f{% else %}dp-n{% endif %}">
							<button class="boutonBorder">
								Type artisanal...
							</button>
							<div class="dropdown-content dropdown-content-left bg-va-transparent">
								<a href="{{ path('app_produits', {'filtre': 'couteau', 'typeCouteau': 'artisanal'}) }}" class="bg-c-t b-s-n w-100-p {% if currentVariante not in ['rosace', 'ours', 'artisanal']  %}active{% endif %}">Tous</a>
								<a href="{{ path('app_produits', {'filtre': 'couteau', 'typeCouteau': 'artisanal', 'detailProduit': 'artisanal'}) }}" class="bg-c-t b-s-n w-100-p {% if currentVariante == "artisanal" %}active{% endif %}">Artisanaux</a>
								<a href="{{ path('app_produits', {'filtre': 'couteau', 'typeCouteau': 'artisanal', 'detailProduit': 'rosace'}) }}" class="bg-c-t b-s-n w-100-p {% if currentVariante == "rosace" %}active{% endif %}">Rosace</a>
								<a href="{{ path('app_produits', {'filtre': 'couteau', 'typeCouteau': 'artisanal', 'detailProduit': 'ours'}) }}" class="bg-c-t b-s-n w-100-p {% if currentVariante == "ours" %}active{% endif %}">Couteau de l'Ours</a>
							</div>
						</div>
					</div>
					{# <p>Filtrer vos recherches pour plus de précision</p> #}
					<div class="dropdown dropdown-2 f-s-0 w-s-nw dp-f">
						<button class="boutonBorder">
							Trier par...
						</button>
						<div
							class="dropdown-content dropdown-content-right bg-va-transparent">
							<!-- Donnez un id ou une classe aux boutons de tri -->
							<button class="bg-c-t b-s-n w-100-p" id="sortAsc">Prix croissant</button>
							<button class="bg-c-t b-s-n w-100-p" id="sortDesc">Prix décroissant</button>
							<button class="bg-c-t b-s-n w-100-p" id="dispoSwitch">Uniquement disponibles</button>
						</div>
					</div>
				</div>
			</div>

			<div class="dp-f-r gp-25 a-i-c j-c-c">
				{% if products is empty %}
					{% if currentVariante is not null %}
						<p class="t-a-c ft-w-n ft-s-27 ft-s-20-r600 t-a-c dg2Color mar-t-40 mar-b-50">
							Aucun <span class="gColor">{{ filtreLabel|lower }}</span> de type <span class="gColor">{{ filtreTypeCouteau|lower }}</span> en variante <span class="gColor">{{ filtreVariante|lower }}</span> n'est disponible sur le site, passez en boutique !
						</p>
					{% elseif currentCouteau is not null %}
						<p class="t-a-c ft-w-n ft-s-27 ft-s-20-r600 t-a-c dg2Color mar-t-40 mar-b-50">
							Aucun <span class="gColor">{{ filtreLabel|lower }}</span> de type <span class="gColor">{{ filtreTypeCouteau|lower }}</span> n'est disponible sur le site, passez en boutique !
						</p>
					{% elseif currentFilter is not null %}
						<p class="t-a-c ft-w-n ft-s-27 ft-s-20-r600 t-a-c dg2Color mar-t-40 mar-b-50">
							Aucun produit de type <span class="gColor">{{ filtreLabel|lower }}</span> n'est disponible sur le site, passez en boutique !
						</p>
					{% else %}
						<p class="t-a-c ft-w-n ft-s-27 ft-s-20-r600 t-a-c dg2Color mar-t-40 mar-b-50">
							Aucun produit n'est disponible sur le site, passez en boutique !
						</p>
					{% endif %}
				{% else %}
					<section id="product-list" class="p-r dp-f-r j-c-c f-w-w gp-10 mar-t-50 ovf-h a-i-s w-100-p">

						{% for product in products %}
							<article class="productBox dp-f-c b-s-b-b max-w-230 b-r-5 ovf-h w-100-p f-s-0" style="border:1px solid #0e812a45;" data-price="{{ product.getPrixVente }}" data-status="{{ product.getStatusBoutique.value }}">
								<a href="{{ path('app_produit', { id: product.getId }) }}" class="product-img-wrapper p-r dp-f a-i-c j-c-c b-s-b-b w-230 {% if product.getTypeProduit.value == 'cravates_western' %}h-305{% else %}h-175{% endif %}">
    <div class="p-a t--30 l--61 dp-f product-badge" style="transform:rotate(-45deg);">
        {% if product.getStatusBoutique.label() is same as("Vente") %}
            <p class="dp-f b-s-b-b pad-x-50 pad-t-50 pad-b-10 cwColor ft-s-13" style="background-color: var(--dom-green);">
                Dispo.
            </p>
        {% elseif product.getStatusBoutique.label() is same as("Vendu") %}
            <p class="dp-f b-s-b-b pad-x-50 pad-t-50 pad-b-10 cwColor ft-s-13" style="background-color: var(--blue);">
                Expo.
            </p>
        {% elseif product.getStatusBoutique.label() is same as("Exposition") %}
            <p class="dp-f b-s-b-b pad-x-50 pad-t-50 pad-b-10 cwColor ft-s-13" style="background-color: var(--blue);">
                Expo.
            </p>
        {% else %}
            <p class="dp-f b-s-b-b pad-x-50 pad-t-50 pad-b-10 cwColor ft-s-13" style="background-color: var(--blue);">
                {{ product.getStatusBoutique.label() }}*
            </p>
        {% endif %}
    </div>
    <img src="/assets/product/{{ product.getId }}-1.jpg" alt="Image pour le produit" loading="lazy" class="max-w-100-p max-h-100-p">
</a>

								<div class="dp-f-c gp-15 b-s-b-b pad-15 j-c-s-b">
									<a href="{{ path('app_produit', { id: product.getId }) }}" class="truncate-1-line ft-w-5 ft-s-18 gColor-h ovf-h" title="{{ product.getLibelle }}">
										{{ product.getLibelle }}
									</a>
									<div class="dp-f-r gp-5 f-w-w j-c-s-b">
									
										{% if product.model %}
											<p class="dp-f-r a-i-c">
												<?xml version="1.0" encoding="UTF-8"?>
												<svg xmlns="http://www.w3.org/2000/svg" id="Layer_1" data-name="Layer 1" viewBox="0 0 24 24" width="20" height="20" class="gColor" fill="currentColor">
													<path d="m11.735,19.057c-2.182,2.191-5.677,3.795-9.178,3.934-.097.004-.686.007-1.29.008-.818.002-1.429-.769-1.229-1.562.28-1.108.854-2.131,1.674-2.954l7.297-7.196,5.233,5.247-2.507,2.523M22.941,2.065c-.688-.69-1.532-1.056-2.443-1.056h0c-.742,0-1.881.256-3.089,1.468l-6.61,6.528c-.393.388-.397,1.021-.009,1.414.041.042,6.108,5.928,6.108,5.928.278.279.646.423,1.02.423.258,0,.519-.069.753-.21.573-.346.826-1.004.628-1.638-.655-2.114-.746-3.265.889-4.9l2.754-2.827c1.409-1.415,1.409-3.716,0-5.13Zm-2.939,4.4c-.828,0-1.5-.672-1.5-1.5s.672-1.5,1.5-1.5,1.5.672,1.5,1.5-.672,1.5-1.5,1.5Z"/>
												</svg>&nbsp;:
											{{ product.model.libelle }}
											</p>
										{% else %}
											<div></div>
										{% endif %}
										{% set prix = product.getPrixVente|number_format(2, ',', ' ') %}
										{% set parties = prix|split(',') %}
										{% if product.getStatusBoutique.value is same as('vente')  %}
											<p class="ft-s-22">
												<b>{{ parties[0] }}<span class="ft-s-12">{{ ',' ~ parties[1] }}</span><span class="gColor">€</span>
												</b>
											</p>
										{% elseif product.getStatusBoutique.value is same as('vendu') %}										
											{# <p class="ft-s-22" style="text-decoration: line-through;">
												<b>{{ parties[0] }}<span class="ft-s-12">{{ ',' ~ parties[1] }}</span><span class="gColor">€</span>
												</b>
											</p> #}
											<p class="ft-s-22">
												<b class="price-strike">{{ parties[0] }}<span class="ft-s-12">{{ ',' ~ parties[1] }}</span><span class="gColor">€</span></b>
											</p>
										{% endif %}
									</div>
									{% if product.getStatusBoutique.value is same as('vendu') or product.getStatusBoutique.value is same as('exposition') %}
										<button class="button-rounded w-s-nw ft-s-12 h-32" disabled>
											Ajouter au panier
										</button>
									{% else %}
										<button onclick="addToCartAjax({{ product.getId }})" class="button-rounded w-s-nw ft-s-12 b-s-nw pad-y-0 h-32">
										Ajouter au panier
									</button>
									{% endif %}
								</div>
							</article>
						{% endfor %}
					</div>
				</section>
				{# <div>
						<p class="ft-s-14 t-a-c dg2Color mar-t-30">
							<b>
								* : Afin de préserver l'unicité de nos créations, les pièces vendues seront toujours visibles mais seront indisponibles à l'achat.
							</b>
						</p>
					</div> #}
				{% endif %}
			</div>


		</div>
	</div>
{% endblock %}

{% block other_javascripts %}
	<script src="{{ asset('/scripts/produits.js') }}"></script>
{% endblock %}