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

{% block page_title %}
	Lignes de Transport | BO
{% 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">
		<h4 class="mb-0">
			<i class="fas fa-train-subway text-muted me-2"></i>Gestion des Lignes de Transport
		</h4>
		<a href="{{ ea_url().setRoute('geolocale_transport_lignes_create') }}" class="btn btn-primary">
			<i class="fas fa-plus me-2"></i>Nouvelle ligne
		</a>
	</div>

	{% for type in types %}
		<div class="card shadow-sm border-0 mb-4">
			<div class="card-header bg-light">
				<h6 class="mb-0 d-flex align-items-center">
					{% if type.gttIcone is defined and type.gttIcone %}
						<img src="{{ asset('img/transports/' ~ type.gttIcone) }}" alt="{{ type.gttIcone }}" class="transport-icon">
					{% endif %}
					<span class="ms-2">{{ type.gttNom }}</span>
					<span class="badge bg-secondary ms-2">
						{{ lignesByType[type.gttId]|default([])|length }} ligne(s)
					</span>
				</h6>
			</div>
			<div class="card-body">
				{% if lignesByType[type.gttId] is defined and lignesByType[type.gttId]|length > 0 %}
					<div class="d-flex flex-wrap gap-2">
						{% for ligne in lignesByType[type.gttId] %}
							<a href="{{ ea_url().setRoute('geolocale_transport_lignes_edit', {'id': ligne.gtlId}) }}"
							   class="btn btn-primary d-flex align-items-center">
								{% if ligne.gtlIcone is defined and ligne.gtlIcone %}
									<img src="{{ asset('img/transports/' ~ ligne.gtlIcone) }}" alt="{{ ligne.gtlIcone }}" class="transport-icon">
								{% endif %}
								<span class="ms-1">{{ ligne.gtlNom }}</span>
							</a>
						{% endfor %}
					</div>
				{% else %}
					<p class="text-muted mb-0">Aucune ligne de ce type</p>
				{% endif %}
			</div>
		</div>
	{% else %}
		<div class="alert alert-info">
			Aucun type de transport configuré.
		</div>
	{% endfor %}
</div>
{% endblock %}