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

{% block title %}
	Liste des menus
{% endblock %}

{% block body %}
	<h1 class="text-center mb-4">Liste des menus</h1>
	<div class="container">

		<div class="row text-center d-none d-md-flex mt-4">
			<div class="col-md-2">
				<h5>Nom du menu</h5>
			</div>
			<div class="col-md-2">
				<h5>Description</h5>
			</div>
			<div class="col-md-2">
				<h5>Image</h5>
			</div>
			<div class="col-md-2">
				<h5>Prix en €</h5>
			</div>
			<div class="col-md-2">
				<h5>Détails</h5>
			</div>
			<div class="col-md-2">
				<h5>Actions</h5>
			</div>
		</div>

	{% for sortedMenu in sortedMenus %}
			{% set menu = sortedMenu.menu %}
	
			<div class="row text-center mb-4 border-bottom pb-4 align-self-center">
				<div class="col-12 col-md-2 align-self-center">
					<h4 class="d-md-none">Nom :</h4>
					<h3>{{ menu.name }}</h3>
				</div>
				<div class="col-12 col-md-2 align-self-center">
					<h4 class="d-md-none">Description :</h4>
					<p>{{ menu.description }}</p>
				</div>
				<div class="col-12 col-md-2 align-self-center">
					<h4 class="d-md-none">Image :</h4>

					<div id="carousel{{ menu.id }}" class="carousel slide align-self-center" data-ride="carousel">
						
						<ol class="carousel-indicators">
							{% for dish in sortedMenu.sortedDishes %}
							
								<li data-target="#carousel{{ menu.id }}" data-slide-to="{{ loop.index0 }}" {% if loop.first %} class="active" {% endif %}></li>
							{% endfor %}
						</ol>

						<div class="carousel-inner">
					
							{% for dish in sortedMenu.sortedDishes %}
								
								<div class="carousel-item {% if loop.first %}active{% endif %}">
									
									{% if dish.images|length > 0 %}
										<p>{{ dish.name }}</p>
										<img src="{{ asset('assets/uploads/dishes/mini/300x300-' ~ dish.images[0].name ) }}" alt="{{ dish.name }}" class="img-fluid">
									{% else %}
										<img src="{{ asset('assets/images/Orange et Bordeaux Restaurant Logo.png') }}" alt="Image par défaut" class="img-fluid">
									{% endif %}
								</div>
							{% endfor %}
					

							<a class="carousel-control-prev" href="#carousel{{ menu.id }}" role="button" data-slide="prev">
								<span class="carousel-control-prev-icon" aria-hidden="true"></span>
								<span class="sr-only">Previous</span>
							</a>
							<a class="carousel-control-next" href="#carousel{{ menu.id }}" role="button" data-slide="next">
								<span class="carousel-control-next-icon" aria-hidden="true"></span>
								<span class="sr-only">Next</span>
							</a>
						</div>
					</div>
				</div>
					<div class="col-12 col-md-2 align-self-center">
					<h4 class="d-md-none">Prix en € :</h4>
					<p>{{ menu.price }}€</p>
				</div>
				<div class="col-12 col-md-2 align-self-center">
					<h4 class="d-md-none">Détails :</h4>
					<a type="button" href="{{ path('menu_show', {id: menu.id}) }}" class="btn btn4 mt-3">Voir</a>
				</div>
				<div class="col-12 col-md-2 align-self-center">
					<h4 class="d-md-none">Actions :</h4>
					{% if app.user %}
						<a type="button" href="{{ path('app_calendar_new') }}"
						 class="btn btn mt-3">Réserver</a>
					{% else %}
						<p>Connectez-vous pour réserver</p>
						<a type="button" href="{{ path('app_login') }}" class="btn mt-3">Connexion</a>
						<a type="button" href="{{ path('app_register') }}" class="btn btn3 mt-3">S'inscrire</a>
					{% endif %}
				</div>
			</div>
		{% endfor %}
		{% include "_partials/_pagination.html.twig" with {
            'path': 'menu_index',
            'slug': null,
            'pages': totalPages,
            'currentPage': currentPage,
        } %}</div>
{% endblock %}