{% 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>
				<li class="breadcrumb-item"><a href="/admin">Administration</a></li>
				<li class="breadcrumb-item"><a href="/admin/users">Utilisateurs</a></li>
				<li class="breadcrumb-item"><a href="/admin/users/{{ User.ID }}">{{ User.Name }}</a></li>
				<li class="breadcrumb-item active">Permissions</li>
			</ol>
		</nav>
		<hr>
	</div>

	{% if Errors %}
	<div class="alert alert-danger">
		<ul class="m-0">
			{% for Error in Errors %}
				<li>{{ Error }}</li>
			{% endfor %}
		</ul>
	</div>
	{% endif %}
	
	{% if Sections %}
		<form id="user" method="post">

			{% for Section in Sections %}
			<div class="row mb-3">
				<div class="col-md-2">
					{{ Section.Name }}
				</div>
				<div class="col-md-10">
					<div class="input-group">
						<span class="input-group-text">
							<i class="bi-key"></i>
						</span>
						<select
							class="form-select"
							name="section-{{ Section.ID }}"
							id="section-{{ Section.ID }}"
							autocomplete="off"
						>
							<option value="0">--- Aucun ---</option>
							{% for Role in Roles %}
								<option
									value="{{ Role.ID }}"

									{% for UserRole in UserRoles %}
										{% if Section.ID == UserRole.SectionID and Role.ID == UserRole.RoleID %}
											selected
										{% endif %}
									{% endfor %}
								>
									{{ Role.Name }}
								</option>
							{% endfor %}
						</select>
					</div>
				</div>
			</div>
			{% endfor %}

			<div class="my-4">
				<button class="btn btn-outline-primary" type="submit">
					<i class="me-1 bi-floppy"></i>
					Enregistrer
				</button>
			</div>
		</form>
	{% else %}
		<div class="my-4">
			Pas de section pour le moment
		</div>
	{% endif %}

</div>
{% endblock %}