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

{% block title %}Toutes mes créations
{% endblock %}

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

{% block body %}
    {{ render(controller("App\\Controller\\Admin\\AdminController::navbarLeftAdmin")) }}
	<div class="main-list">
		<h1 class="view-title-beetween ">
			<div>
				<button class="btn-action"
						onclick="history.back()">
						<img class="img-45" src="{{ asset('img/png/back.png') }}" alt="">
				</button>
			</div>

			{# Titre de la page en fonction de la visualisation des créations #}
            {% if subcategory is defined %}
				{{ subcategory.name }}
			{% elseif category is defined %}
				{{ category.name }}
			{% else %}
				Toutes nos créations
			{% endif %}
			 
			{# Boutons d'action pour modifier ou supprimer une sous-catégorie #}
			<div class="div-action-title">
				{# Bouton ajout d'une création de n'importe où#}
				<a href="{{ path('creation_add') }}"
					class="" title="Ajout d'une création">
					<div class="btn-action">
						<img class="img-45" src="{{ asset('img/png/add.png') }}" alt="">
					</div>
				</a>

				{% if subcategory is defined %}
					<a href="{{ path('sub_category_edit', {'id': subcategory.id}) }}"
						title="Modifier la sous-catégorie">
						<div class="btn-action">
							<img class="img-45" src="{{ asset('img/svg/edit-4.svg') }}" alt="">
						</div>
					</a>
					<a href="{{ path('sub_category_delete', {'id': subcategory.id}) }}"
						title="Supprimer la sous catégorie">
						<div class="btn-action">
							<img class="img-45" src="{{ asset('img/svg/trash-red-1.svg') }}" alt="">
						</div>
					</a>
				{# Boutons d'action pour modifier ou supprimer une catégorie #}
				{% elseif category is defined %}
					<a href="{{ path('category_edit', {'id': category.id}) }}"
						title="Modifier la catégorie">
						<div class="btn-action">
							<img class="img-45" src="{{ asset('img/svg/edit-4.svg') }}" alt="">
						</div>
					</a>
					<a href="{{ path('category_delete', {'id': category.id}) }}"
						title="Supprimer la catégorie">
						<div class="btn-action">
							<img class="img-45" src="{{ asset('img/svg/trash-red-1.svg') }}" alt="">
						</div>
					</a>
				{% endif %}
			</div>
        </h1>        
		
		<div class="list-content">
			<div class="container-fluid">
				<div class="demo-gallery">
					<ul id="lightgallery" class="list-unstyled row all-creation " data-masonry='{"percentPosition": true }'>
							{% if creationsList is defined %}
							
								{% for creation in creationsList %}
									<li class="col-6 col-md-3 col-lg-2" data-src="{{asset('img/upload/creations/' ~ 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('creation_edit', {id: creation.id}) }}><img class='trash' src='{{asset('img/svg/edit.svg')}}' alt=''></a>
									
												<a class=button-creation data-bs-toggle=modal data-bs-target=#deleteCreationModal{{creation.id}}>
													<img class='trash' src='{{asset('img/svg/trash.svg')}}' alt=''>
												</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/upload/creations/' ~ creation.picture)}}" alt="Thumb-1">
									</a>
									</li>
								{% endfor %}
							{% endif %}
							
					</ul>
				</div>
			</div>
			{% if creationsList is defined %}
				<div class="delete-modal">
					{% for c in creationsList %}
						<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('creation_delete', {id: c.id} ) }}>
											Oui, supprimer
										</a>
									</div>
								</div>
							</div>
						</div>
					{% endfor %}
				</div>
			{% endif %}
		</div>
	</div>

	

{% endblock %}

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