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

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

{% block name_title_page_top %}
	<i class="fa-solid fa-building-columns"></i> EPCI
{% endblock %}

{% block real_page_content %}
	<div class="container-fluid py-4">
		<div class="d-flex justify-content-between align-items-center mb-4">
			<h4 class="mb-0"><i class="fas fa-building-columns text-muted me-2"></i>EPCI</h4>
		</div>

		{% for message in app.flashes('success') %}
			<div class="alert alert-success alert-dismissible fade show" role="alert">
				{{ message }}
				<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
			</div>
		{% endfor %}
		{% 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 %}

		{# Section principale #}
		<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_epci') }}?refId={{ epciRefId }}">

				{# 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 un EPCI..."
						   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>

				<div class="table-responsive">
					<table class="table table-hover align-middle mb-0">
						<thead class="table-light">
							<tr>
								<th>Nom</th>
								<th class="d-none d-md-table-cell">URL</th>
								<th class="d-none d-md-table-cell">Logo Partenaire</th>
								<th class="text-end">Actions</th>
							</tr>
						</thead>
						<tbody data-listing-search-target="results">
							{% include 'geolocale/_epci_rows.html.twig' with {'epciList': epciList} %}
						</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" %}
			</div>
		</div>

		{# Formulaire creation #}
		<div class="card shadow-sm border-0 mt-4">
			<div class="card-header bg-success bg-opacity-10 border-0">
				<h6 class="mb-0 fw-semibold text-success">
					<i class="fas fa-plus-circle me-2"></i>Ajouter un EPCI
				</h6>
			</div>
			<div class="card-body p-4">
				<form action="{{ ea_url().setRoute('geolocale_epci_create') }}" method="POST">
					<div class="row g-3">
						<div class="col-12 col-md-6">
							<label class="form-label small text-muted mb-1">Nom de l'EPCI</label>
							<input type="text" name="form[suaNom]" class="form-control" placeholder="Ex: Rennes Metropole" required>
						</div>
						<input type="hidden" name="form[suaRef]" value="/geolocale_referentiel_subdivisions/{{ epciRefId }}">
						<div class="col-12">
							<button class="btn btn-success" type="submit">
								<i class="fas fa-plus me-1"></i>Ajouter
							</button>
						</div>
					</div>
				</form>
			</div>
		</div>
	</div>
{% endblock %}