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

{% block page_title %}
	{% if ligne %}
		Éditer la ligne {{ ligne.gtlNom }} | BO
	{% else %}
		Nouvelle ligne | BO
	{% endif %}
{% endblock %}

{% block name_title_page_top %}
	<i class="fa-solid fa-train-subway"></i> Lignes de Transport
{% 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('geolocale_transport_lignes') }}" class="btn btn-secondary">
			<i class="fas fa-arrow-left me-2"></i>Retour aux lignes
		</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>
			{% if ligne %}
				Éditer <strong>{{ ligne.gtlNom }}</strong>
			{% else %}
				Nouvelle ligne
			{% endif %}
		</h4>
		<button type="submit" form="ligne-form" class="btn btn-success px-4">
			<i class="fas fa-save me-2"></i>Enregistrer
		</button>
	</div>

	<form id="ligne-form"
		  action="{{ ligne ? ea_url().setRoute('geolocale_transport_lignes_edit', {'id': ligne.gtlId}) : ea_url().setRoute('geolocale_transport_lignes_create') }}"
		  method="POST">
		<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 de la ligne
				</h6>
				<div class="row g-4">
					<div class="col-12 col-md-6">
						<div class="form-floating">
							<input type="text"
								   name="form[gtlNom]"
								   class="form-control"
								   id="input-gtlNom"
								   placeholder="Nom de la ligne"
								   value="{{ ligne.gtlNom|default('') }}"
								   required>
							<label for="input-gtlNom">Nom de la ligne</label>
						</div>
					</div>
					<div class="col-12 col-md-6">
						<div class="form-floating">
							<select class="form-select" id="select-transportType" name="form[transportType]" required>
								<option value="">Sélectionner un type</option>
								{% for type in types %}
									<option value="/geolocale_transport_types/{{ type.gttId }}"
											{% if ligne and ligne.transportType.gttId == type.gttId %}selected{% endif %}>
										{{ type.gttNom }}
									</option>
								{% endfor %}
							</select>
							<label for="select-transportType">Type de transport</label>
						</div>
					</div>
					<div class="col-12 col-md-6">
						<div class="form-floating">
							<input type="text"
								   name="form[gtlIcone]"
								   class="form-control"
								   id="input-gtlIcone"
								   placeholder="Icône (optionnel)"
								   value="{{ ligne.gtlIcone|default('') }}">
							<label for="input-gtlIcone">Icône (nom du fichier)</label>
						</div>
						{% if ligne and ligne.gtlIcone|default %}
							<div class="mt-2">
								{{ transport_icon(ligne.gtlIcone) }}
							</div>
						{% endif %}
					</div>
				</div>
			</div>
		</div>
	</form>

	{% if ligne %}
		<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-trash me-2"></i>Zone de danger
				</h6>
				<a href="{{ ea_url().setRoute('geolocale_transport_lignes_delete', {'id': ligne.gtlId}) }}"
				   class="btn btn-danger">
					<i class="fas fa-trash me-2"></i>Supprimer cette ligne
				</a>
			</div>
		</div>
	{% endif %}
</div>
{% endblock %}