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

{% block page_title %}
	Pages du site | 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">
	<div class="d-flex justify-content-between align-items-center mb-4">
		<h4 class="mb-0"><i class="fas fa-file-lines text-muted me-2"></i>Pages du site</h4>
	</div>

	<div class="card shadow-sm border-0">
		<div class="card-body p-4">
			<p class="text-muted">
				Chaque page existe dans les langues du site : cliquez sur une langue pour en éditer le titre et le contenu.
				Sur le site, une langue sans contenu affiche la version française.
			</p>

			<div class="table-responsive">
				<table class="table table-hover align-middle mb-0">
					<thead class="table-light">
						<tr>
							<th>Page</th>
							<th>Adresse</th>
							{% for code, nom in langues %}
								<th class="text-center">{{ nom }}</th>
							{% endfor %}
						</tr>
					</thead>
					<tbody>
						{% for slug, libelle in libelles %}
							<tr>
								<td><strong>{{ libelle }}</strong></td>
								<td><code>/{{ slug }}</code></td>
								{% for code, nom in langues %}
									{% set page = pages[slug][code] ?? null %}
									{% set rempli = (page.pagContenu ?? '') is not empty %}
									<td class="text-center">
										<a href="{{ ea_url().setRoute('media_page_edit', {slug: slug, langue: code}) }}"
										   data-langue="{{ code }}"
										   class="badge {{ rempli ? 'badge-rempli text-bg-success' : 'badge-vide text-bg-secondary' }} text-decoration-none px-3 py-2"
										   title="{{ rempli ? 'Éditer' : 'Rédiger' }} la version {{ nom|lower }}">
											{{ code|upper }}
										</a>
									</td>
								{% endfor %}
							</tr>
						{% endfor %}
					</tbody>
				</table>
			</div>
		</div>
	</div>
</div>
{% endblock %}