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

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

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

{% block body %}
	{% if is_granted("ROLE_ADMIN") %}
		{{ render(controller("App\\Controller\\Admin\\AdminController::navbarLeftAdmin")) }}
	{% else %}
		{% include "layout/_navbar-left.html.twig" %}
	{% endif %}

	<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 annonces / Services #}
			{{title}}

			{# Boutons d'action pour modifier ou supprimer une sous-catégorie #}
			<div
				class="div-action-title">
				{# Bouton ajout d'une annonce ou d'un service #}
				{% if type == "announcement" %}
					<a href="{{ path('announcement_add', {'type': 'announcement'}) }}" class="" title="Ajout d'une annonce">
						<div class="btn-action">
							<img class="img-45" src="{{ asset('img/png/add.png') }}" alt="">
						</div>
					</a>
				{% elseif type == "service" %}
					<a href="{{ path('announcement_add', {'type': 'service'}) }}" class="" title="Ajout d'un service">
						<div class="btn-action">
							<img class="img-45" src="{{ asset('img/png/add.png') }}" alt="">
						</div>
					</a>
				{% endif %}
			</div>
		</h1>

		<div class="list-content content-gallery">
			<div
				class="creation-filter">{# {% include "creation/filter.html.twig" %} #}
			</div>
			<div class="container-fluid">
				{% if announcementList is defined %}
					{% if announcementList %}
						{% for announcement in announcementList %}
							<div class="announcement-card announcement-card-admin">
								<div class="announcement-bg"
									style="background: {{ announcement.backgroundColor }};
                                           border: 2px solid {{ announcement.borderColor }};">
									<div class="div-action-title">
										<a href="{{ path('announcement_edit', {'id': announcement.id}) }}"
											class="" title="Modifier">
											<div class="btn-action">
												<img class="img-45" src="{{ asset('img/svg/edit-4.svg') }}" alt="">
											</div>
										</a>
										
										{% if not announcement.hidden %}
											<a href="{{ path('announcement_desactivate', {'id': announcement.id}) }}"
												class="" title="Désactiver">
												<div class="btn-action">
													<img class="img-25" src="{{ asset('img/png/switch-on.png') }}" alt="">
												</div>
											</a>
										{% else %}
											<a href="{{ path('announcement_activate', {'id': announcement.id}) }}"
												class="" title="Activer">
												<div class="btn-action">
													<img class="img-25" src="{{ asset('img/png/switch-off.png') }}" alt="">
												</div>
											</a>
										{% endif %}

										<button type="button" 
												class="btn-action" 
												data-bs-toggle="modal" 
												data-bs-target="#deleteAnnounecementModal{{announcement.id}}"
												title="Supprimer"
											>
											<img class="img-45" src="{{ asset('img/svg/trash-red-1.svg') }}" alt="">
										</button>
									</div>
								</div>
								<div class="announcement-content" style="border: 2px solid {{ announcement.borderColor }};">
									<div class="announcement-title">{{ announcement.title }}</div>
									<div class="announcement-img">
										<img src="{{asset('img/upload/announcements/' ~ announcement.picture)}}" alt="Thumb-1">
									</div>
									<div class="announcement-text" style="color: {{ announcement.textColor }};">
										<div>
											{{ announcement.description | raw}}
										</div>
									</div>
								</div>
							</div>
						{% endfor %}
					{% else %}
						<div>Oups, il semblerait qu'il n'y ai rien via ces critères</div>
					{% endif %}
				{% endif %}

			</div>
			{% if announcementList is defined %}
				<div class="delete-modal">
					{% for announcement in announcementList %}
						<div class="modal fade" id="deleteAnnounecementModal{{announcement.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 :
											<span>{{announcement.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 :
										<span>{{announcement.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('announcement_delete', {id: announcement.id} ) }}>
											Oui, supprimer
										</a>
									</div>
								</div>
							</div>
						</div>
					{% endfor %}
				</div>
			{% endif %}
		</div>
	</div>


{% endblock %}

{% block javascripts %}
	{{parent()}}
{% endblock %}