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

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

{% block name_title_page_top %}
	<i class="fa-solid fa-location-dot"></i> Stations 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_stations') }}" class="btn btn-secondary">
			<i class="fas fa-arrow-left me-2"></i>Retour aux stations
		</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 station %}
				Éditer <strong>{{ station.gtsNom }}</strong>
			{% else %}
				Nouvelle station
			{% endif %}
		</h4>
		<button type="submit" form="station-form" class="btn btn-success px-4">
			<i class="fas fa-save me-2"></i>Enregistrer
		</button>
	</div>

	<form id="station-form"
		  action="{{ station ? ea_url().setRoute('geolocale_transport_stations_edit', {'id': station.gtsId}) : ea_url().setRoute('geolocale_transport_stations_create') }}"
		  method="POST"
		  {{ stimulus_controller('geolocale-select', {apiUrl: api_url}) }}>
		<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 station
				</h6>
				<div class="row g-4">
					<div class="col-12 col-md-6">
						<div class="form-floating">
							<input type="text"
								   name="form[gtsNom]"
								   class="form-control"
								   id="input-gtsNom"
								   placeholder="Nom de la station"
								   value="{{ station.gtsNom|default('') }}"
								   required>
							<label for="input-gtsNom">Nom de la station</label>
						</div>
					</div>
					<div class="col-12 col-md-6">
						<label for="select-station-ville" class="form-label">Ville</label>
						<select class="form-select" id="select-station-ville" name="form[ville]" required
								placeholder="Cherchez une ville...">
							{% if station and station.ville is defined %}
								<option value="/geolocale_villes/{{ station.ville.vilId }}" selected>
									{{ station.ville.vilNom }}
								</option>
							{% endif %}
						</select>
					</div>
				</div>
			</div>
		</div>

		<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-train-subway me-2"></i>Lignes desservant cette station
				</h6>
				<div class="row g-3">
					{% for ligne in lignes %}
						<div class="col-6 col-md-4 col-lg-3">
							<div class="form-check">
								<input class="form-check-input"
									   type="checkbox"
									   name="form[lignes][]"
									   value="/geolocale_transport_lignes/{{ ligne.gtlId }}"
									   id="ligne-{{ ligne.gtlId }}"
									   {% if station and station.lignes is defined %}
										   {% for stationLigne in station.lignes %}
											   {% if stationLigne.gtlId == ligne.gtlId %}checked{% endif %}
										   {% endfor %}
									   {% endif %}>
								<label class="form-check-label d-flex align-items-center" for="ligne-{{ ligne.gtlId }}">
									{% if ligne.gtlIcon is defined and ligne.gtlIcon %}
										{{ transport_icon(ligne.gtlIcon) }}
									{% endif %}
									<span class="ms-1">
										{{ ligne.transportType.gttNom|default('') }} {{ ligne.gtlNom }}
									</span>
								</label>
							</div>
						</div>
					{% else %}
						<div class="col-12">
							<p class="text-muted mb-0">Aucune ligne de transport disponible. <a href="{{ ea_url().setRoute('geolocale_transport_lignes_create') }}">Créer une ligne</a></p>
						</div>
					{% endfor %}
				</div>
			</div>
		</div>
	</form>

	{% if station %}
		<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_stations_delete', {'id': station.gtsId}) }}"
				   class="btn btn-danger">
					<i class="fas fa-trash me-2"></i>Supprimer cette station
				</a>
			</div>
		</div>
	{% endif %}
</div>
{% endblock %}