pop-camarades/views/people.html

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

{% block main %}
<div class="container my-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-outline-primary" href="/members/add">
					<i class="bi-plus-lg"></i>
					Ajouter
				</a>
				<a class="btn btn-outline-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-outline-primary" href="/contacts/add">
					<i class="bi-plus-lg"></i>
					Ajouter
				</a>
				<a class="btn btn-outline-primary" href="/contacts/export?se={{ FilterSection }}&s={{ FilterSearch|urlencode }}&a={{ FilterArchive }}">
					<i class="bi-filetype-csv"></i>
					Exporter
				</a>
			</div>
		{% endif %}
	</div>

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

			<label for="name" class="form-label">
				Nom
			</label>
			<input type="text" class="form-control" id="name" data-search-field="name" data-search-advanced="false" name="name">

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

			<label for="section" class="form-label">
				Section
			</label>
			<select class="form-select" id="section" data-search-field="section" data-search-advanced="false" name="section">
				<option value="">Choisir...</option>
				{% for Section in Sections %}
					<option value="{{ Section.ID }}">
						{{ Section.Name }}
					</option>
				{% endfor %}
			</select>

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

			<label class="form-label">
				Status
			</label>
			<div class="form-check form-switch">
				<input class="form-check-input" type="checkbox" role="switch" data-search-field="archive" data-search-advanced="false" id="archive">
				<label class="form-check-label" for="archive">Archivé</label>
			</div>

		</div>
	</div>

	<div class="mb-3 d-none" id="advanced-section">
		<div class="row">
			<div class="col-lg-6 mb-3">

				<label for="email" class="form-label">
					Email
				</label>
				<input type="text" class="form-control" id="email" data-search-field="email" data-search-advanced="true" name="email">

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

				<label for="phone" class="form-label">
					Téléphone
				</label>
				<input type="text" class="form-control" id="phone" data-search-field="phone" data-search-advanced="true" name="phone">

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

				<label for="address" class="form-label">
					Adresse
				</label>
				<input type="text" class="form-control" id="address" data-search-field="address" data-search-advanced="true" name="address">

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

				<label for="postal_code" class="form-label">
					Code postal
				</label>
				<input type="text" class="form-control" id="postal_code" data-search-field="postal_code" data-search-advanced="true" name="postal_code">

			</div>
			<div class="col-sm-8 col-lg-4 mb-3">

				<label for="city" class="form-label">
					Lieu
				</label>
				<input type="text" class="form-control" id="city" data-search-field="city" data-search-advanced="true" name="city">

			</div>
		</div>
	</div>

	<div class="row my-3">
		<div class="col-6">
			<button class="btn btn-outline-primary btn-sm" id="advanced" data-state="false" type="button">
				<i class="bi-chevron-double-down me-1"></i> Avancé
			</button>
		</div>
		<div class="col-6 text-end">
			<button class="btn btn-outline-success btn-sm" id="search" type="button">
				<i class="bi-search me-1"></i> Recherche
			</button>
		</div>
	</div>

	<form id="search-form" method="get" class="my-3 d-none">
		<input type="hidden" name="p" value="{{ Pagination.CurrentPage }}">
		<input type="hidden" id="search-json" name="s" value="{{ FilterSearch }}">
	</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 Pagination.CurrentPage <= 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={{ Pagination.CurrentPage - 1 }}"
				>
					<i class="bi-caret-left"></i>
				</a>
			</li>
			{% endif %}

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

			{% if Pagination.CurrentPage >= Pagination.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={{ Pagination.CurrentPage + 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={{ Pagination.MaxPages }}"
					>
						<i class="bi-fast-forward"></i>
					</a>
				</li>
			{% endif %}
		</ul>
	</nav>

</div>
{% endblock %}

{% block javascript %}
<script src="/static/search.js"></script>
{% endblock %}