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

{% block page_title %}
	Catégorie 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 flex-column flex-sm-row justify-content-between align-items-start align-items-sm-center gap-3 mb-4">
		<a href="{{ ea_url().setRoute('article_categories') }}" class="btn btn-secondary"><i class="fas fa-arrow-left me-2"></i>Retour aux catégories</a>
		<h4 class="mb-0 order-first order-sm-0 text-center flex-grow-1"><i class="fas fa-edit text-muted me-2"></i>Éditer <strong>{{ categorie.nom }}</strong></h4>
		<button type="submit" form="categorie-form" class="btn btn-success px-4"><i class="fas fa-save me-2"></i>Enregistrer</button>
	</div>

	{% 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 %}

	<form id="categorie-form" action="{{ ea_url().setRoute('article_categories_edit', {"id": categorie.id}) }}" method="POST">
		<div class="card shadow-sm border-0 mb-4">
			<div class="card-body p-4">
				<div class="row g-4">
					<div class="col-12 col-md-6">
						<div class="form-floating">
							<input type="text" name="form[nom]" class="form-control" id="input-nom" placeholder="Nom" value="{{ categorie.nom }}" required>
							<label for="input-nom">Nom</label>
						</div>
					</div>
					<div class="col-12 col-md-4">
						<div class="form-floating">
							<input type="text" name="form[slug]" class="form-control" id="input-slug" placeholder="slug" value="{{ categorie.slug }}" pattern="[a-z0-9-]+" required>
							<label for="input-slug">Slug (URL)</label>
						</div>
					</div>
					<div class="col-12 col-md-2">
						<div class="form-floating">
							<input type="number" name="form[ordre|int]" class="form-control" id="input-ordre" placeholder="0" value="{{ categorie.ordre }}">
							<label for="input-ordre">Ordre</label>
						</div>
					</div>
					<div class="col-12">
						<div class="form-floating">
							<textarea name="form[description]" class="form-control" id="input-description" placeholder="Description" style="height: 100px;">{{ categorie.description }}</textarea>
							<label for="input-description">Description</label>
						</div>
					</div>
				</div>
			</div>
		</div>
	</form>
</div>
{% endblock %}