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

{% block title %}
	{{category.name}}
{% endblock %}

{% block stylesheets %}
	{{parent()}}
	<link rel="stylesheet" href=" {{asset('css/gallery/page.css')}} ">
	<link rel="stylesheet" href=" {{asset('css/gallery/gallery.css')}} ">
	<link rel="stylesheet" href=" {{asset('css/gallery/lightgallery.css')}} ">
{% endblock %}

{% block body %}

	<div class="container-fluid">
		<div class="demo-gallery">
			<ul id="lightgallery" class="list-unstyled row all-creation " data-masonry='{"percentPosition": true }'>
				{% for creation in category.creations %}
					<li class="col-6 col-md-3 col-lg-2" data-src="{{asset('img/uploads/' ~ creation.picture)}}" 
					data-sub-html="
						<h4>{{creation.title}}</h4>
						<p>{{creation.description}}</p>
						<br>

						{% if app.user %}
						{% if is_granted('ROLE_ADMIN') %}

						<a class=button-creation href={{ path('edit_creation', {id: creation.id}) }}><i class='btn fas fa-edit'></i></a>
						{# <a class=button-creation href={{ path('delete_creation', {id: creation.id}) }}><i class='btn fas fa-trash-alt'></i></a> #}

							<a class=button-creation data-bs-toggle=modal data-bs-target=#deleteCreationModal{{creation.id}}>
														<i class='btn fas fa-trash-alt'></i>
													</a>
							{% endif %}
						{% endif %}
						" data-pinterest-text="Pin it1" data-tweet-text="share on twitter 1">
						<a href="" class="col-12 col-md-12 col-lg-12">
							<img class="img-responsive" src="{{asset('img/uploads/' ~ creation.picture)}}" alt="Thumb-1">
						</a>
					</li>
				{% endfor %}
			</ul>
		</div>
	</div>

	<div class="delete-modal">
		{% for c in category.creations %}
			<div class="modal fade" id="deleteCreationModal{{c.id}}" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
				<div class="modal-dialog">
					<div class="modal-content">
						<div class="modal-header">
							<h5 class="modal-title" id="exampleModalLabel">Suppression de la création :
																"<span>{{c.title}}</span>"
							</h5>
							<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
						</div>
						<div class="modal-body">
							Êtes-vous sûr de bien vouloir supprimer la création
							<span>"{{c.title}}"</span>
							?
						</div>
						<div class="modal-footer">
							<button type="button" class="btn btn-modal-annul" data-bs-dismiss="modal">Non</button>
							<a class="btn btn-modal-valid" href={{ path('delete_creation', {id: c.id} ) }}>
								Oui, supprimer
							</a>
						</div>
					</div>
				</div>
			</div>
		{% endfor %}
	</div>

{% endblock %}

{% block javascripts %}
	{{parent()}}
	<script src=" {{asset('js/gallery/picturefill.min.js')}}"></script>
	<script src=" {{asset('js/gallery/lightgallery.js')}}"></script>
	<script src=" {{asset('js/gallery/lg-pager.js')}}"></script>
	<script src=" {{asset('js/gallery/lg-autoplay.js')}}"></script>
	<script src=" {{asset('js/gallery/lg-fullscreen.js')}}"></script>
	<script src=" {{asset('js/gallery/lg-zoom.js')}}"></script>
	<script src=" {{asset('js/gallery/lg-hash.js')}}"></script>
	<script src=" {{asset('js/gallery/lg-share.js')}}"></script>
	<script src=" {{asset('js/gallery/lg-rotate.js')}}"></script>
	<script>
		lightGallery(document.getElementById('lightgallery'));
	</script>
	<script src="{{asset('js/gallery/masonry.pkgd.min.js')}}" async></script>


{% endblock %}