{% 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 %}
	
	<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-control"
						name="section-{{ Section.ID }}"
						id="section-{{ Section.ID }}"
					>
						<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="mt-3">
			<button class="btn btn-primary" type="submit">
				<i class="me-1 bi-floppy"></i>
				Enregistrer
			</button>
		</div>
	</form>

</div>
{% endblock %}