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

{% block title %}Vos favoris
{% endblock %}

{% block body %}

	<div class="container-xl">

		<div
			class="row my-5">

			{# <div class="col-1"></div> #}

			<h1 class="col-10 ms-5">Mon espace personnel</h1>

		</div>

		<div
			class="row">

			{# <div class="col-1" style="height: 300px"></div> #}

			<div class="col-xl-3 g-0" style="height: 300px">

				<div class="col-xl-9 ms-auto ps-5" style="height: 100px">

					<h3 class="align-middle" style="padding-top: 2rem">
						<a href="{{ path('show_profile', {"id": app.user.id}) }}" class="text-reset text-decoration-none">
							Détails</a>
					</h3>

				</div>

				<div class="col-xl-9 ms-auto ps-5" style="height: 100px;">

					<h3 class="align-middle" style="padding-top: 2rem">
						<a href="{{ path('show_profile_orders', {"id": app.user.id}) }}" class="text-reset text-decoration-none">Commandes</a>
					</h3>

				</div>

				<div class="col-xl-9 ms-auto ps-5" style="height: 100px; background-color:white;">

					<h3 class="align-middle" style="padding-top: 2rem">
						<a href="{{ path('show_favorite_products', {"id": app.user.id}) }}" class="text-reset text-decoration-none">Vos favoris</a>
					</h3>

				</div>

				<div class="col-xl-9 ms-auto ps-5" style="height: 100px">

					<h3 class="align-middle" style="padding-top: 2rem">
						<a href="{{ path('show_profile_adress', {"id": app.user.id}) }}" class="text-reset text-decoration-none">Adresses</a>
					</h3>

				</div>

				<div class="col-xl-9 ms-auto ps-5" style="height: 100px">

					<h3 class="align-middle" style="padding-top: 2rem">
						<a href="{{ path('show_profile_orders_retour', {"id": app.user.id}) }}" class="text-reset text-decoration-none">Retour</a>
					</h3>

				</div>

			</div>

			<div class="col-xl-8 mb-5" style="min-height: 1000px; background-color:white;">

				<div class="col-12">

					<h2 style="padding-top: 3rem; padding-left: 4rem">
						Liste de vos articles favoris</h2>

				</div>

				<div class="row">

					<h5 class="col-12 mt-4">Consultez vos favoris ici<hr></h5>

					<div class="col-12 row">

                        <div class="container mt-3">

                            <div class="row">
                                <div class="col-7">

                                    <select class="form-select no-border-radius" onchange="window.location=this.value;">
                                        <option disabled selected hidden>Trier par</option>
                                        {{ knp_pagination_sortable(favoriteProducts, 'Derniers ajouté', 'id', {}, {'direction': 'desc'}) }}
                                        {{ knp_pagination_sortable(favoriteProducts, 'Du moins cher au plus cher', 'products.price', {}, {'direction': 'asc'}) }}
                                        {{ knp_pagination_sortable(favoriteProducts, 'Du plus cher au moins cher', 'products.price', {}, {'direction': 'desc'}) }}
                                    </select>

                                </div>

                                <div class="col-4">

                                    {{ knp_pagination_render(favoriteProducts) }}

                                </div>

                            </div>

                        </div>

						{% for favoriteProduct in favoriteProducts %}

							<div class="card g-0 mx-auto mt-4 border-0 border-bottom rounded-0" style="width: 15rem;">

								<a href="{{ path('view_products', {'id': favoriteProduct.products.id}) }}" class="text-decoration-none text-black">

									<img src="{{ asset('images/' ~ favoriteProduct.products.images.values.1.image) }}" style="height: 200px; object-fit: contain;" class="card-img-top" alt="...">
									<div class="card-body">
										<ul class="list-group list-group-flush">
											<li class="list-group-item">{{ (favoriteProduct.products.price)/100 }}
												€</li>
										</ul>
										<h5 class="card-title">{{ favoriteProduct.products.title }}</h5>
                                        <a href="{{ path('remove_favorite_product', {'id': favoriteProduct.products.id})}}" class="card-link">Enlever de vos favoris</a>
									</div>

								</a>

							</div>

						{% endfor %}


					</div>


				</div>


			</div>


		</div>

	</div>


{% endblock %}