{% 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">

		<div class="table-responsive">
			<table class="table">
				<thead>
					<tr>
						<th>Section</th>
						<th>Rôle</th>
					</tr>
				</thead>
				<tbody>
					{% for Section in Sections %}
					<tr>
						<td>
							<input
								type="text"
								class="form-control"
								readonly
								value="{{ Section.Name }}"
							>
						</td>
						<td>
							<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>
						</td>
					</tr>
					{% endfor %}
				</tbody>
			</table>
		</div>

		<div class="mt-3">
			<button class="btn btn-primary" type="submit">
				<i class="me-1 bi-floppy"></i>
				Enregistrer
			</button>
		</div>
	</form>

</div>
{% endblock %}