{% extends "base.html" %}

{% block body %}


<div>
	<h2>My Account</h2>
	<table class="vertical-table" style="margin-bottom: 40px;">
		<tr>
			<th>First Name:</th>
			<td>{{ current_user.username }}</input></td>
		</tr>
		<tr>
			<th>Email:</th>
			<td>{{ current_user.email }}</input></td>
		</tr>
		<tr>
			<th>User Type:</th>
			<td>{{ current_user.user_role.text }}</td>
		</tr>
	</table>
</div>


{% if current_user.user_role >= UserRoles.ADMIN  %}
<div>

	<div style="margin-bottom: 20px; text-decoration: none; cursor: pointer;">
		<a href="/account/new">Create User</a>
	</div>

	<table>
		<tr>
			<th>ID</th>
			<th>Name</th>
			<th>Email</th>
			<th>User Type</th>
			<th>Save</th>
		</tr>

		{% for user in users %}
		<tr>
			<form id="form-{{ user.id }}" method="POST" action="/account/update">

				<div style="display: none;">
					<input name="user-id" value="{{ user.id }}" />
				</div>

				<td>{{ user.id }}</td>
				<td>{{ user.username }}</td>
				<td>{{ user.email }}</td>

				{% if current_user.user_role >= UserRoles.ADMIN %}
				<td>
					<select name="user-type" oninput="document.getElementById('save-btn-{{ user.id }}').removeAttribute('disabled');">
						{% for role in UserRoles %}
						<option value="{{ role.text }}" {% if role == user.user_role %} selected {% endif %}>
							{{ role.text }}
						</option>
						{% endfor %}
					</select>
				</td>
				<td><button id="save-btn-{{ user.id }}" type="submit" disabled>Save</button></td>
				{% else %}
				<td>{{ user.usertype.type }}</td>
				{% endif %}

			</form>
		</tr>
		{% endfor %}

	</table>
</div>
{% endif %}

{% endblock %}