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

{% block page_title %}
	Bandeau du site | BO
{% endblock %}

{% block name_title_page_top %}
	<i class="fa-solid fa-image"></i> Bandeau
{% 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">
		<h4 class="mb-0 order-first order-sm-0 flex-grow-1">
			<i class="fas fa-edit text-muted me-2"></i>Bandeau du site
		</h4>
		<button type="submit" form="bandeau-form" class="btn btn-success px-4">
			<i class="fas fa-save me-2"></i>Enregistrer
		</button>
	</div>

	<form id="bandeau-form" action="{{ ea_url().setRoute('socle_bandeau') }}" method="POST" enctype="multipart/form-data">
		{# Section Affichage #}
		<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-eye me-2"></i>Affichage
				</h6>
				<div class="row g-4">
					<div class="col-12 col-md-6">
						<div class="form-check form-switch">
							{# Champ cache : une case decochee n'est pas postee, on force alors la valeur 0 #}
							<input type="hidden" name="form[banActif|bool]" value="0">
							<input class="form-check-input" type="checkbox" id="switch-banActif" name="form[banActif|bool]" value="1" {% if bandeau.banActif %} checked {% endif %}>
							<label class="form-check-label" for="switch-banActif">
								<strong>Afficher le bandeau</strong>
								<br><small class="text-muted">Sans image chargee, rien ne s'affiche sur le site</small>
							</label>
						</div>
					</div>
					<div class="col-12 col-md-6">
						<div class="form-check form-switch">
							<input type="hidden" name="form[banToutesPages|bool]" value="0">
							<input class="form-check-input" type="checkbox" id="switch-banToutesPages" name="form[banToutesPages|bool]" value="1" {% if bandeau.banToutesPages %} checked {% endif %}>
							<label class="form-check-label" for="switch-banToutesPages">
								<strong>Sur toutes les pages</strong>
								<br><small class="text-muted">Decoche : uniquement sur la page d'accueil</small>
							</label>
						</div>
					</div>
				</div>
			</div>
		</div>

		{# Section Lien (spec L344) #}
		<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-link me-2"></i>Lien
				</h6>
				<div class="row g-4">
					<div class="col-12 col-md-8">
						<div class="form-floating">
							<input type="url" name="form[banLien]" class="form-control" id="input-banLien" placeholder="https://…" value="{{ bandeau.banLien|default('') }}">
							<label for="input-banLien">Page ouverte au clic sur le bandeau (facultatif)</label>
						</div>
						<small class="text-muted">Vide : le bandeau n'est pas cliquable.</small>
					</div>
				</div>
			</div>
		</div>

		{# Section Image #}
		<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-image me-2"></i>Image
				</h6>
				<div class="row g-4">
					<div class="col-12 col-md-6">
						{% include "components/_mediaManager.html.twig" with {
							media: {
								label: 'Image du bandeau',
								currentUrl: imageUrl,
								showOriginal: false,
								formFieldName: 'form[banImage]',
								deleteRoute: 'media_delete',
								deleteRouteParams: {typeEntite: 'socle_bandeaux', idEntity: bandeau.banId, medType: 'MediaPrincipal'}
							},
							modalId: 'deleteBandeauModal'
						} %}
					</div>
				</div>
			</div>
		</div>
	</form>
</div>
{% endblock %}