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

{% block page_title %}
	Soutien | BO
{% endblock %}

{% block name_title_page_top %}
	<i class="fa-solid fa-hand-holding-heart"></i> Soutiens
{% 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('socle_soutiens') }}" class="btn btn-secondary">
			<i class="fas fa-arrow-left me-2"></i>Retour aux soutiens
		</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>{{ soutien.souNom }}</strong>
		</h4>
		<button type="submit" form="soutien-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="soutien-form" action="{{ ea_url().setRoute('socle_soutiens_edit', {"id": soutien.souId}) }}" method="POST" enctype="multipart/form-data">
		{# Section Informations #}
		<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
				</h6>
				<div class="row g-4">
					<div class="col-12 col-md-6">
						<div class="form-floating">
							<input type="text" name="form[souNom]" class="form-control" id="input-souNom" placeholder="Nom" value="{{ soutien.souNom }}" required>
							<label for="input-souNom">Nom du soutien</label>
						</div>
					</div>
					<div class="col-12 col-md-4">
						<div class="form-floating">
							<input type="url" name="form[souUrl]" class="form-control" id="input-souUrl" placeholder="https://…" value="{{ soutien.souUrl }}">
							<label for="input-souUrl">Site web (cible du logo)</label>
						</div>
					</div>
					<div class="col-12 col-md-2">
						<div class="form-floating">
							<input type="number" name="form[souOrdre|int]" class="form-control" id="input-souOrdre" placeholder="0" value="{{ soutien.souOrdre }}">
							<label for="input-souOrdre">Ordre</label>
						</div>
					</div>
					<div class="col-12">
						<div class="form-floating">
							<textarea name="form[souDescription]" class="form-control" id="input-souDescription" placeholder="Description" style="height: 120px;">{{ soutien.souDescription }}</textarea>
							<label for="input-souDescription">Description (page « Soutiens »)</label>
						</div>
					</div>
				</div>
			</div>
		</div>

		{# 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 sur le site
				</h6>
				<div class="row g-4">
					<div class="col-12 col-md-6">
						<div class="form-check form-switch">
							{# Champ caché : une case décochée n'est pas postée, on force alors la valeur 0 #}
							<input type="hidden" name="form[souActif|bool]" value="0">
							<input class="form-check-input" type="checkbox" id="switch-souActif" name="form[souActif|bool]" value="1" {% if soutien.souActif %} checked {% endif %}>
							<label class="form-check-label" for="switch-souActif">
								<strong>Soutien actif</strong>
								<br><small class="text-muted">Décoché : n'apparaît plus 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[souPiedDePage|bool]" value="0">
							<input class="form-check-input" type="checkbox" id="switch-souPiedDePage" name="form[souPiedDePage|bool]" value="1" {% if soutien.souPiedDePage %} checked {% endif %}>
							<label class="form-check-label" for="switch-souPiedDePage">
								<strong>Logo en pied de page</strong>
								<br><small class="text-muted">Affiché en bas de toutes les pages du site</small>
							</label>
						</div>
					</div>
				</div>
			</div>
		</div>

		{# Section Logo #}
		<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>Logo
				</h6>
				<div class="row g-4">
					<div class="col-12 col-md-6">
						{% include "components/_mediaManager.html.twig" with {
							media: {
								label: 'Logo du soutien',
								currentUrl: logoUrl,
								showOriginal: false,
								formFieldName: 'form[souLogo]',
								deleteRoute: 'media_delete',
								deleteRouteParams: {typeEntite: 'socle_soutien', idEntity: soutien.souId, medType: 'Logo'}
							},
							modalId: 'deleteSoutienLogoModal'
						} %}
					</div>
				</div>
			</div>
		</div>
	</form>
</div>
{% endblock %}