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

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

{% block name_title_page_top %}
	<i class="fa-solid fa-globe"></i> Villes
{% endblock %}

{% block real_page_content %}
	<div class="card">
		<div class="card-body">
				<form action="{{ ea_url().setRoute('geolocale_villes') }}" method="post">
					<div class="input-group mb-3">
						<select class="form-select" name="countrie">
							<option>Selectionner un pays</option>
							{% for c in countries %}
								<option value="{{c.payId}}" {% if c.payId == idPays %} selected {% endif %}>{{c.payNom}}</option>
							{% endfor %}

						</select>
						<button class="btn btn-primary" type="submit">Chercher !</button>
					</div>
				</form>
				<form action="{{ ea_url().setRoute('geolocale_villes') }}" method="post">
					<div class="input-group mb-3">
						<input type="text" placeholder="Ville recherchée ..." name="cityName" class="form-control">
						<input type="hidden" name="cityFilter" value="1">
						<button class="btn btn-success" type="submit">Rechercher cette ville
						</button>
					</div>
				</form>

				<table class="table table-striped">
					<thead>
						<tr>
							<th>Code Postal</th>
							<th>Nom</th>
							<th class="d-none d-md-table-cell">Sub1</th>
							<th class="d-none d-md-table-cell">Sub2</th>
							<th>Pays</th>
							<th>Actions</th>
						</tr>
					</thead>
					<tbody>

						{% for c in cities %}
							<tr>
								<td>
									{% if c.vilCodepostal is defined %}
										{{c.vilCodepostal}}
									{% else %}
										X
									{% endif %}
								</td>
								<td>
									{{c.vilNom }}</td>
								<td class="d-none d-md-table-cell">{{ c.vilSub1.subNom }}</td>
								<td class="d-none d-md-table-cell">{{ c.vilSub2.subNom}}</td>
								<td>
									{{c.vilPay.payNom }}</td>
								<td class="table-action">
									<a href="{{ ea_url().setRoute('geolocale_villes_edit', {"id":c.vilId}) }}">
										<i class="align-middle text-primary fas fa-edit"></i>
									</a>
									<a href="{{ ea_url().setRoute('geolocale_villes_delete', {"id":c.vilId}) }}">
										<i class="align-middle text-danger fas fa-trash"></i>
									</a>
								</td>
							</tr>
						{% endfor %}
					</tbody>
				</table>

				{% include "components/_paginationApi.html.twig" %}

			</div>
		</div>
		<div class="card mt-5">
			<div class="card-header">
				<h5 class="card-title">
					Ajouter une ville
				</h5>
			</div>
			<div class="card-body">
				<form action="{{ ea_url().setRoute('geolocale_villes_create') }}" method="POST">
					<div class="row g-2">
						<div class="col-md-6">
							<div class="form-floating">
								<input type="text" name="form[vilNom]" class="form-control" id="input-vilNom" placeholder="Nom de la ville">
								<label for="input-vilNom">Nom de la ville</label>
							</div>
						</div>
						<div class="col-md-6">
							<div class="form-floating">
								<select class="form-select" name="form[vilSub1]" id="select-vilSub1">
									{% for s in sub1 %}
										<option value="/geolocale_subdivisions/{{s.subId}}">{{s.subNom}}</option>
									{% endfor %}
								</select>
								<label for="select-payCon">Selectionner La Subdivision 1</label>
							</div>
						</div>
						<div class="col-md-6">
							<div class="form-floating">
								<select class="form-select" name="form[vilSub2]" id="select-vilSub2">
									{% for s in sub2 %}
										<option value="/geolocale_subdivisions/{{s.subId}}">{{s.subNom}}</option>
									{% endfor %}
								</select>
								<label for="select-payCon">Selectionner La Subdivision 2</label>
							</div>
						</div>


						<div class="col-md-12 text-center mt-3">
							<input type="hidden" name="form[vilPay]" class="form-control" id="input-vilPay" value="/geolocale_pays/{{idPays}}">
							<button class="btn btn-success btn-lg" type="submit">
								Ajouter
							</button>
						</div>
					</div>
				</form>
			</div>
		</div>
	</div>
{% endblock %}