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

{% block page_title %}
	Soutiens | BO
{% endblock %}

{% block name_title_page_top %}
	<i class="fa-solid fa-hand-holding-heart"></i> Soutiens
{% endblock %}

{% block real_page_content %}
<div class="container-fluid py-4">
	<div class="d-flex justify-content-between align-items-center mb-4">
		<h4 class="mb-0"><i class="fas fa-hand-holding-heart text-muted me-2"></i>Soutiens de l'association</h4>
		<button type="button" class="btn btn-success" data-bs-toggle="modal" data-bs-target="#createModal">
			<i class="fas fa-plus me-1"></i>Ajouter un soutien
		</button>
	</div>

	{% for message in app.flashes('success') %}
		<div class="alert alert-success alert-dismissible fade show" role="alert">
			{{ message }}
			<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
		</div>
	{% endfor %}
	{% for message in app.flashes('danger') %}
		<div class="alert alert-danger alert-dismissible fade show" role="alert">
			{{ message }}
			<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
		</div>
	{% endfor %}

	<p class="text-muted">Les soutiens cochés « pied de page » voient leur logo affiché en bas de toutes les pages du site ; tous les soutiens actifs figurent sur la page « Soutiens ».</p>

	<div class="card shadow-sm border-0">
		<div class="card-body p-4">
			<div class="table-responsive">
				<table class="table table-hover align-middle mb-0">
					<thead class="table-light">
						<tr>
							<th style="width: 80px;">Ordre</th>
							<th>Soutien</th>
							<th class="d-none d-md-table-cell">Site</th>
							<th>Actif</th>
							<th>Pied de page</th>
							<th class="text-end" style="width: 100px;">Actions</th>
						</tr>
					</thead>
					<tbody>
						{% include 'socle/_soutiens_rows.html.twig' %}
					</tbody>
				</table>
			</div>
		</div>
	</div>

	{# Modal de création #}
	<div class="modal fade" id="createModal" tabindex="-1" aria-hidden="true">
		<div class="modal-dialog modal-dialog-centered">
			<div class="modal-content">
				<div class="modal-header bg-success bg-opacity-10 border-0">
					<h6 class="modal-title fw-semibold text-success">
						<i class="fas fa-plus-circle me-2"></i>Créer un soutien
					</h6>
					<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
				</div>
				<div class="modal-body p-4">
					<p class="small text-muted">Le logo, la description et l'affichage en pied de page se règlent ensuite sur l'écran d'édition.</p>
					<form action="{{ ea_url().setRoute('socle_soutiens_create') }}" method="POST">
						<div class="row g-3">
							<div class="col-12">
								<label class="form-label small text-muted mb-1">Nom du soutien</label>
								<input type="text" name="form[souNom]" class="form-control" placeholder="Ex. Région Bretagne" required>
							</div>
							<div class="col-12">
								<label class="form-label small text-muted mb-1">Site web</label>
								<input type="url" name="form[souUrl]" class="form-control" placeholder="https://…">
							</div>
							<div class="col-12">
								<button class="btn btn-success" type="submit">
									<i class="fas fa-plus me-1"></i>Ajouter
								</button>
							</div>
						</div>
					</form>
				</div>
			</div>
		</div>
	</div>
</div>
{% endblock %}