{# templates/_partials/_catalogue-offres-clients.html.twig #}

{% for offre in offres %}
	<article
		class="offer-card">
		{# Affiche la catégorie de l'offre et le nombre de personnes #}
		{% if offre.categorie is defined %}
			<div class="offer-header">
				<span class="offer-category">{{ offre.categorie.nom }}</span>
				&nbsp;

				{# Affiche l'icone de favori si utilisateur connecté #}
				{% if app.user %}
					<div class="favori">
						<i class="favorite-icon fa-heart {% if offre.isFavori(app.user) %}fa-solid{% else %}fa-regular{% endif %}" data-offre-id="{{ offre.id }}"></i>
					</div>
				{% endif %}
			</div>
		{% endif %}
		{# affiche visuellement le nombre de personnes adultes et enfants #}
		<div class="persons-number">
			{% for i in 1..offre.nbrAdultes %}
				<i class="fa-solid fa-person adult-icon"></i>
			{% endfor %}
			{% if offre.nbrEnfants>0 %}
				<span class="add-child-plus-sign">+</span>
				{% for i in 1..offre.nbrEnfants %}
					<i class="fa-solid fa-child child-icon"></i>
				{% endfor %}
			{% endif %}
		</div>

		{# Affiche les sports en body #}
		<div class="offer-sports">
			<span class="sport-emoji">{{offre.sports[0].emoji}}</span>&nbsp;<span class="sport-intitule">{{offre.sports[0].intitule}}</span>
		</div>


		{# Affiche l'image du sport / pictogramme #}


		{# Affiche les détails de l'offre #}
		<div class="offer-content">
			<div class="offer-meta">
				{% if offre.dateDebut is defined %}
					<span class="offer-date">
						<i class="fa-solid fa-calendar-days"></i>Du
						{{ offre.dateDebut|date('d/m/Y') }}
						au
						{{ offre.dateFin|date('d/m/Y') }}</span>
				{% endif %}
				<span class="offer-emplacement text-center">
					{% for lieu in offre.lieux %}
						{{lieu}}
					{% endfor %}
				</span>
				{% if offre.prix is defined %}
					<span class="offer-price">{{ offre.prix }}
						€</span>
				{% endif %}
			</div>
		</div>
		<div class="offer-footer">
			<form method="POST" action="{{ path('panier_add', {'id': offre.id}) }}">
				<button type="submit" class="btn btn-primary">
					<i class="fa-solid fa-basket-shopping"></i>Ajouter au panier</button>
			</form>

		</div>
	</article>
{% endfor %}
{% block javascripts %}
	<script src={{asset('assets/js/cart.js')}}></script>
	<script src={{asset('assets/js/favoris-offres.js')}}></script>
{% endblock %}