pop-camarades/views/people.html

{% extends "layouts/main.html" %}

{% block main %}
<div class="container mt-4">
	<div class="mb-4">
		<nav>
			<ol class="breadcrumb">
				<li class="breadcrumb-item"><a href="/">Accueil</a></li>

				{% if MembersPage %}
					<li class="breadcrumb-item active">Membres</li>
				{% else %}
					<li class="breadcrumb-item active">Contacts</li>					
				{% endif %}
				
			</ol>
		</nav>
		<hr>
	</div>

	<div class="my-3 text-end">
		{% if MembersPage %}
			<div class="btn-group">
				<a class="btn btn-primary" href="/members/add">
					<i class="bi-plus-lg"></i>
					Ajouter
				</a>
				<a class="btn btn-primary" href="/members/export?se={{ FilterSection }}&s={{ FilterSearch|urlencode }}&a={{ FilterArchive }}">
					<i class="bi-filetype-csv"></i>
					Exporter
				</a>
			</div>
		{% else %}
			<div class="btn-group">
				<a class="btn btn-primary" href="/contacts/add">
					<i class="bi-plus-lg"></i>
					Ajouter
				</a>
				<a class="btn btn-primary" href="/contacts/export?se={{ FilterSection }}&s={{ FilterSearch|urlencode }}&a={{ FilterArchive }}">
					<i class="bi-filetype-csv"></i>
					Exporter
				</a>
			</div>
		{% endif %}
	</div>

	<form id="filters" method="get" class="my-3">
		<input type="hidden" name="p" value="{{ Page }}">

		<div class="row">
			<div class="col-6 col-lg-3 mb-2">

				<label
					for="archive"
					class="form-label"
				>
					Section
				</label>
				<select
					class="form-select"
					id="section"
					name="se"
				>
					<option value="0">Toutes</option>
					{% for Section in Sections %}
						<option
							value="{{ Section.ID }}"

							{% if Section.ID == FilterSection %}
							selected
							{% endif %}
						>
							{{ Section.Name }}
						</option>
					{% endfor %}
				</select>

			</div>
			<div class="col-6 col-lg-3 mb-2">

				<label
					for="archive"
					class="form-label"
				>
					Status
				</label>
				<select
					class="form-select"
					id="archive"
					name="a"
				>
					{% if PermShow %}
					<option value="0">
						Actif
					</option>
					{% endif %}

					{% if PermShowArchived %}
					<option
						value="1"

						{% if FilterArchive == "1" %}
						selected
						{% endif %}
					>
						Archivé
					</option>
					{% endif %}
				</select>

			</div>
			<div class="col-lg-6 mb-2">

				<label
					for="search"
					class="form-label"
				>
					Recherche
				</label>
				<div class="input-group">
					<input
						type="text"
						class="form-control"
						id="search"
						name="s"
						value="{{ FilterSearch }}"
					>
					<button
						class="btn btn-outline-success"
						type="submit"
					>
						<i class="bi-search"></i>
					</button>
				</div>
	
			</div>
		</div>
	</form>

	<div class="table-responsive">
		<table class="table">
			<thead>
				<tr>
					<th class="w-25">Nom</th>
					<th class="w-50 d-none d-sm-table-cell">Adresse</th>
					<th class="w-25">Section</th>
				</tr>
			</thead>
			<tbody>
				{% for Person in People %}
				<tr>
					<td>
						{% if Person.IsMember %}
							<a href="/members/{{ Person.ID }}">
								{{ Person.LastName }} {{ Person.FirstName }}
							</a>
						{% else %}
							<a href="/contacts/{{ Person.ID }}">
								{{ Person.LastName }} {{ Person.FirstName }}
							</a>
						{% endif %}
					</td>
					<td class="d-none d-sm-table-cell">
						{{ Person.Address1 }}
						{% if Person.Address1 and (Person.PostalCode or Person.City) %}						
						&ndash;
						{% endif %}
						{{ Person.PostalCode }} {{ Person.City }}
					</td>
					<td>
						{% if Person.SectionID %}
							{{ Person.Section.Name }}
						{% endif %}
					</td>
				</tr>
				{% endfor %}
			</tbody>
		</table>
	</div>

	<nav class="mt-3 mb-5">
		<ul class="pagination justify-content-center">

			{% if Page <= 1 %}
			<li class="page-item disabled">
				<a class="page-link" href="javascript:;">
					<i class="bi-rewind"></i>
				</a>
			</li>
			<li class="page-item disabled">
				<a class="page-link" href="javascript:;">
					<i class="bi-caret-left"></i>
				</a>
			</li>
			{% else %}
			<li class="page-item">
				<a class="page-link" href="?se={{ FilterSection }}&s={{ FilterSearch|urlencode }}&a={{ FilterArchive }}&p=1">
					<i class="bi-rewind"></i>
				</a>
			</li>
			<li class="page-item">
				<a class="page-link" href="?se={{ FilterSection }}&s={{ FilterSearch|urlencode }}&a={{ FilterArchive }}&p={{ Page - 1 }}">
					<i class="bi-caret-left"></i>
				</a>
			</li>
			{% endif %}

			{% for i in Pages %}
			<li class="page-item">
				<a
					{% if i == Page %}
					class="page-link active"
					{% else %}
					class="page-link"
					{% endif %}
					
					href="?se={{ FilterSection }}&s={{ FilterSearch|urlencode }}&a={{ FilterArchive }}&p={{ i }}"
				>
					{{ i }}
				</a>
			</li>
			{% endfor %}

			{% if Page >= MaxPages %}
				<li class="page-item disabled">
					<a class="page-link" href="javascript:;">
						<i class="bi-caret-right"></i>
					</a>
				</li>
				<li class="page-item disabled">
					<a class="page-link" href="javascript:;">
						<i class="bi-fast-forward"></i>
					</a>
				</li>
			{% else %}
				<li class="page-item">
					<a class="page-link" href="?se={{ FilterSection }}&s={{ FilterSearch|urlencode }}&a={{ FilterArchive }}&p={{ Page + 1 }}">
						<i class="bi-caret-right"></i>
					</a>
				</li>
				<li class="page-item">
					<a class="page-link" href="?se={{ FilterSection }}&s={{ FilterSearch|urlencode }}&a={{ FilterArchive }}&p={{ MaxPages }}">
						<i class="bi-fast-forward"></i>
					</a>
				</li>
			{% endif %}
		</ul>
	</nav>

</div>
{% endblock %}

{% block javascript %}
<script>
	$(document).ready(function() {
		$("#filters select").on("change", function() {
			$("#filters").submit();
		});
	});
</script>
{% endblock %}