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

{% block page_title %}
	{{ libelle }} ({{ page.pagLangue|upper }}) | BO
{% endblock %}

{% block name_title_page_top %}
	<i class="fa-solid fa-file-lines"></i> Pages du site
{% endblock %}

{% block real_page_content %}
<div class="container-fluid py-4">
	{# Barre d'action #}
	<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('media_pages') }}" class="btn btn-secondary">
			<i class="fas fa-arrow-left me-2"></i>Retour aux pages
		</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>{{ libelle }}</strong>
		</h4>
		<button type="submit" form="page-form" class="btn btn-success px-4">
			<i class="fas fa-save me-2"></i>Enregistrer
		</button>
	</div>

	{# Onglets de langue : chaque langue est une ligne distincte, enregistrée séparément #}
	<ul class="nav nav-tabs mb-4">
		{% for code, nom in langues %}
			<li class="nav-item">
				<a class="nav-link {% if code == page.pagLangue %}active{% endif %}"
				   data-langue="{{ code }}"
				   href="{{ ea_url().setRoute('media_page_edit', {slug: page.pagSlug, langue: code}) }}">
					{{ nom }}
				</a>
			</li>
		{% endfor %}
	</ul>

	<form id="page-form" method="post" action="{{ ea_url().setRoute('media_page_edit', {slug: page.pagSlug, langue: page.pagLangue}) }}">
		{# Section Titre #}
		<div class="card shadow-sm border-0 mb-4">
			<div class="card-body p-4">
				<h6 class="text-muted text-uppercase small fw-bold mb-4">
					<i class="fas fa-info-circle me-2"></i>Informations générales
				</h6>
				<div class="row g-4">
					<div class="col-12 col-md-8">
						<div class="form-floating">
							<input type="text"
								   class="form-control"
								   id="page_titre"
								   name="page[pagTitre]"
								   placeholder="Titre"
								   value="{{ page.pagTitre }}"
								   required
								   maxlength="255">
							<label for="page_titre">Titre affiché sur le site *</label>
						</div>
					</div>
					<div class="col-12 col-md-4 d-flex align-items-center">
						<small class="text-muted">
							{% if page.pagMaj|default(null) %}
								Dernière mise à jour : {{ page.pagMaj|date('d/m/Y H:i') }}
							{% else %}
								Jamais modifiée
							{% endif %}
						</small>
					</div>
				</div>
			</div>
		</div>

		{# Section Contenu #}
		<div class="card shadow-sm border-0 mb-4">
			<div class="card-body p-4">
				<h6 class="text-muted text-uppercase small fw-bold mb-4">
					<i class="fas fa-file-alt me-2"></i>Contenu
				</h6>
				<div data-controller="ckeditor" data-ckeditor-target="container">
					<textarea class="form-control"
							  id="page_contenu"
							  name="page[pagContenu]"
							  data-ckeditor-target="editor"
							  rows="15">{{ page.pagContenu ?? '' }}</textarea>
				</div>
				{% if page.pagLangue != 'fr' %}
					<small class="text-muted d-block mt-2">
						Laissée vide, cette version affiche la page en français sur le site.
					</small>
				{% endif %}
			</div>
		</div>
	</form>
</div>
{% endblock %}