{% extends "geolocale/geolocale.html.twig" %}
{% block title %}
	Géo Pays | BO
{% endblock %}

{% block section %}
	<div class="tab-pane fade show active" id="dances" role="tabpanel">
		<div class="card">
			<div class="card-body">
				<h5 class="card-title">Pays</h5>

				<table class="table table-striped">
					<thead>
						<tr>
							<th>
								Code ISO</th>
							<th>Pays</th>
							<th>Continent
							</th>
							<th class="d-none d-md-table-cell">Actions</th>
						</tr>
					</thead>
					<tbody>

						{% for p in pays %}
							<tr>
								<td>{{p.payCode}}</td>
								<td>{{ p.payNom }}</td>
								<td>{{ p.payCon.conNom }}</td>
								<td class="table-action">
									<a href="{{path('geolocale_pays_edit', {"id":p.payId})}}">

										<i class="align-middle text-primary" data-feather="edit-2"></i>
									</a>
									<a href="{{path('geolocale_pays_delete', {"id":p.payId})}}">
										<i class="align-middle text-danger" data-feather="trash"></i>
									</a>
								</td>
							</tr>
						{% endfor %}
					</tbody>
				</table>

				{% include "components/_paginationApi.html.twig" %}
				<!-- BEGIN primary modal -->
				<div class="card-header mt-5">
					<h5 class="card-title">
						Créer un Pays</h5>
					<div class="text-center">
						<button type="button" class="btn btn-primary btn-lg" data-bs-toggle="modal" data-bs-target="#centeredModalPrimary">
							Ajouter un Pays
						</button>
					</div>
				</div>
				<div class="modal fade" id="centeredModalPrimary" tabindex="-1" role="dialog" aria-hidden="true">
					<div class="modal-dialog modal-dialog-centered" role="document">
						<div class="modal-content">
							<div class="modal-header">
								<h5 class="modal-title">Créer un Pays
								</h5>
								<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
							</div>
							<div class="modal-body m-3">
								<form action="{{path('geolocale_pays_create')}}" method="POST">
									<div class="row g-2">
										<div class="col-md-6">
											<div class="form-floating">
												<input type="text" name="form[payCode]" class="form-control" id="input-payCode" placeholder="">
												<label for="input-payCode">Code du Pays</label>
											</div>
										</div>
										<div class="col-md-6">
											<div class="form-floating">
												<input type="text" name="form[payNom]" class="form-control" id="input-payNom" placeholder="">
												<label for="input-payNom">Nom du Pays</label>
											</div>
										</div>
										<div class="col-md-6">
											<div class="form-floating">
												<input type="text" name="form[payNomUsuel]" class="form-control" id="input-payNomUsuel" placeholder="">
												<label for="input-payNomUsuel">Nom Usuel du Pays</label>
											</div>
										</div>

										<div class="col-md-6">
											<div class="form-floating">
												<select class="form-select" name="form[payCon]" id="select-payCon">
													{% for c in continents %}

														<option value="/geolocale_continents/{{c.conId}}">{{c.conNom}}</option>
													{% endfor %}
												</select>
												<label for="select-payCon">Selectionner Le Continent</label>
											</div>
										</div>


										<div class="col-md-6 text-end">
											<button class="btn btn-success btn-lg" type="submit">
												Ajouter
											</button>
										</div>
									</div>
								</form>
							</div>
							<div class="modal-footer">
								<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fermer</button>
							</div>
						</div>
					</div>
				</div>
				<!-- END primary modal -->
			</div>
		</div>
	</div>
{% endblock %}