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

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

	{# Liste des stations #}
	<div class="card shadow-sm border-0">
		<div class="card-body p-4"
			 data-controller="listing-search"
			 data-listing-search-url-value="{{ path('admin_api_listing_stations') }}">

			{# Recherche #}
			<div class="position-relative mb-4">
				<i class="fas fa-search position-absolute text-muted" style="left: 1.25rem; top: 50%; transform: translateY(-50%);"></i>
				<input type="text"
					   class="form-control form-control-lg rounded-pill border-0 shadow-sm"
					   style="padding-left: 3rem; padding-right: 3rem; background-color: #f8f9fa;"
					   placeholder="Rechercher une station..."
					   data-listing-search-target="input"
					   data-action="input->listing-search#handleInput">
				<span class="position-absolute d-none" style="right: 1.25rem; top: 50%; transform: translateY(-50%);" data-listing-search-target="loading">
					<span class="spinner-border spinner-border-sm text-primary"></span>
				</span>
			</div>

			{% if stations|length > 0 %}
				<div class="table-responsive">
					<table class="table table-hover align-middle mb-0">
						<thead class="table-light">
							<tr>
								<th>Nom</th>
								<th>Ville</th>
								<th>Lignes</th>
								<th class="text-end">Actions</th>
							</tr>
						</thead>
						<tbody data-listing-search-target="results">
							{% include 'geolocale/transport/_stations_rows.html.twig' with {'stations': stations} %}
						</tbody>
					</table>
				</div>

				<div class="text-center py-4 d-none" data-listing-search-target="noResults">
					<i class="fas fa-search fa-2x text-muted mb-2"></i>
					<p class="text-muted">Aucun resultat pour cette recherche</p>
				</div>

				{% include "components/_paginationApi.html.twig" %}
			{% else %}
				<div class="alert alert-info mb-0">
					Aucune station configurée.
				</div>
			{% endif %}
		</div>
	</div>
</div>
{% endblock %}