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

{% block page_title %}
	Catégories du Mag | BO
{% endblock %}

{% block name_title_page_top %}
	<i class="fa-solid fa-folder"></i> Catégories du Mag
{% 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-folder text-muted me-2"></i>Catégories du Mag</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 une catégorie
		</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">L'accueil du Mag liste ces catégories ; chaque article peut en porter une, et sa page liste les articles de la catégorie.</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>Nom</th>
							<th class="d-none d-md-table-cell">Slug (URL)</th>
							<th class="text-end" style="width: 100px;">Actions</th>
						</tr>
					</thead>
					<tbody>
						{% for c in categories %}
							<tr>
								<td>{{ c.ordre }}</td>
								<td>{{ c.nom }}</td>
								<td class="d-none d-md-table-cell"><code>/articles/categorie/{{ c.slug }}</code></td>
								<td class="text-end">
									<a href="{{ ea_url().setRoute('article_categories_edit', {"id": c.id}) }}" class="text-primary me-2" data-bs-toggle="tooltip" title="Modifier"><i class="fas fa-edit"></i></a>
									<a href="{{ ea_url().setRoute('article_categories_delete', {"id": c.id}) }}" class="text-danger" data-bs-toggle="tooltip" title="Supprimer"><i class="fas fa-trash"></i></a>
								</td>
							</tr>
						{% else %}
							<tr><td colspan="4" class="text-center text-muted py-4">Aucune catégorie pour le moment.</td></tr>
						{% endfor %}
					</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 une catégorie</h6>
					<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
				</div>
				<div class="modal-body p-4">
					<form action="{{ ea_url().setRoute('article_categories_create') }}" method="POST">
						<div class="row g-3">
							<div class="col-12 col-md-8">
								<label class="form-label small text-muted mb-1">Nom</label>
								<input type="text" name="form[nom]" class="form-control" placeholder="Ex. Portraits" required>
							</div>
							<div class="col-12 col-md-4">
								<label class="form-label small text-muted mb-1">Ordre</label>
								<input type="number" name="form[ordre|int]" class="form-control" value="0">
							</div>
							<div class="col-12">
								<label class="form-label small text-muted mb-1">Slug (URL, minuscules et tirets)</label>
								<input type="text" name="form[slug]" class="form-control" placeholder="portraits" pattern="[a-z0-9-]+" required>
							</div>
							<div class="col-12">
								<label class="form-label small text-muted mb-1">Description</label>
								<textarea name="form[description]" class="form-control" rows="2" placeholder="Quelques mots sur la catégorie"></textarea>
							</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 %}