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

{% block title %}ManiGalerie | Album
{% endblock %}

{% block content %}

	<div class="container mt-4">
		{% if albums|length <= 0 %}
			<div class="row bordrline">
				<div class="col-md-8 p-5">
					<h2 class="title-noalbum">Aucun album pour l'instant..</h2>
					<p>La catégorie n'a pour l'instant aucun album à son actif</p>
					<p>Nous avons besoin de vous :</p>
					<p>Si vous possédez des photos, n’hésitez pas à les envoyer à 
																																																																																																																																																																																																																																																																																																																																																																								l’adresse suivante : photo@asmanissieux.fr</p>
					<a class="btn-block returnback" onclick="history.back()">Revenir en arrière</a>
				</div>
				<div class="col-md-4">
					<img src="{{ asset('assets/img/cloud-data1.svg') }}" alt="image erreur pas d'album" class="imgright">

				</div>

			</div>

		{% else %}
			<div class="row">
				<div class="col-6">
					<h2 class="mb-3">
						Catégorie
						{{ category.name }}
					</h2>

				</div>
				<div class="col-6 text-right">
					<a class="btn btn-primary mb-3 mr-1 prev" href="#back" role="button" data-slide="prev">
						<i class="fa fa-arrow-left"></i>
					</a>
					<a class="btn btn-primary mb-3 next" href="#next" role="button" data-slide="next">
						<i class="fa fa-arrow-right"></i>
					</a>
				</div>
			</div>
			<div id="carouselExampleIndicators2" class="carousel slide" data-ride="carousel">

				<div class="carousel-inner">
					<div class="carousel-item active">
						<div class="row {% if albums|length > 3 %}responsive{% endif %}">
							{% for album in albums %}
								<div class="col-md-4">
									<div class="card">
										<img class="img-fluid definedsize" alt="image de couverture" src="{{asset('pictures/cover/')}}{{ album.coverpicture }}">
										{% if is_granted('ROLE_ADMIN') %}
											<div class="dlt">
												<a class="text-white" href="{{ path('albumview_delete', {"id": album.id}) }}">X</a>
											</div>
										{% endif %}
										<div class="card-body text-center">
											<h5 class="card-title font-weight-bolder">{{ album.name }}</h5>
											<hr class="under-black">
											<p class="card-text ftweight">
												{{ album.description }}
											</p>
											<p class="card-text mb-2 d-flex justify-content-center align-items-center font-weight-bolder"><img src="{{ asset('assets/img/calendrier.svg') }}" alt="calendrier icon" class="calendaricon">
												{{ album.dateevent|date('d/m/y') }}
											</p>
											<a href="{{ path('pictures_album', {"id": album.id}) }}" class="btn btn-mani btn-sm w-100">Voir</a>
										</div>
									</div>
								</div>

							{% endfor %}
						</div>
					</div>
				</div>
			</div>
		{% endif %}
	</div>

{% endblock %}

{% block script %}

	<script type="text/javascript">

		$('.multiple-items').slick({infinite: true, slidesToShow: 3, slidesToScroll: 3});

$('.responsive').slick({
dots: false,
infinite: false,
speed: 300,
slidesToShow: 3,
slidesToScroll: 4,
prevArrow: $('.back'),
nextArrow: $('.next'),
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 3,
slidesToScroll: 3,
infinite: true,
dots: false
}
}, {
breakpoint: 600,
settings: {
slidesToShow: 2,
slidesToScroll: 2
}
}, {
breakpoint: 480,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
// You can unslick at a given breakpoint now by adding:
// settings: "unslick"
// instead of a settings object
]
});
	</script>
{% endblock %}