{% extends 'base.html' %}

{% load static %}




{% block content %}

<main class="content">
	<div class="container-fluid p-0">

		<div class="row">
			<div class="col-md-6 mb-3">
				<div class="row align-items-center">
					<div class="col-12 col-md">
					  <h1 class="h3 mb-0 d-inline align-middle">
						{{ user_profile.user.first_name|upper }} {{ user_profile.middle_name|upper }}
						- ({{ user_profile.user.username }})
					  </h1>
					</div>
				  
					<div class="col-12 col-md-auto">
					  <div class="d-flex justify-content-md-end flex-nowrap mt-2 mt-md-0 gap-2">
						<a href="{% url 'user-details' %}" class="btn btn-dark">
						  <i class="align-middle" data-feather="list"></i> User Details
						</a>
						<a href="{% url 'add-user' %}" class="btn btn-primary">Add User</a>
					  </div>
					</div>
				  </div>
				  
				  
			</div>
		</div>
	

		<div class="row">


			<div class="col-12 col-xl-6">

				{% include 'partials/_messages.html' %}

				<div class="card">
					<div class="card-header">
						<h5 class="card-title mb-0">User Details - {{user_profile.user.first_name|upper}}
							{{user_profile.middle_name|upper}} {{user_profile.user.last_name|upper}}</h5>
					</div>

					

					<div class="card-body">


						<div class="row">

							<div class="col-md-4">
								<div class="text-center">
									{% if user_profile.profile_picture_url %}
									<img alt="Charles Hall" src="{{user_profile.profile_picture_url}}"
										class="rounded-circle img-responsive mt-2" width="128" height="128" />
									{% else %}
									<img alt="Avatar" src="{% static 'img/avatars/default-user.png' %}"
										class="rounded-circle img-responsive mt-2" width="128" height="128" />
									{% endif %}
								</div>
							</div>


							

							<div class="col-md-8">


								<table class="table table-sm mt-2 mb-4">
									<tbody>

										<tr>
											<th>Username</th>
											<td>{{user_profile.user.username}}</td>
										</tr>

										<tr>
											<th>System Role</th>
											<td>{{user_profile.system_role.role_name|upper}}</td>
										</tr>

										<tr>
											<th>First Name</th>
											<td>{{user_profile.user.first_name|upper}}</td>
										</tr>
										<tr>
											<th>Middle Name</th>
											<td>{{user_profile.middle_name|upper}}</td>
										</tr>
										<tr>
											<th>Last Name</th>
											<td>{{user_profile.user.last_name|upper}}</td>
										</tr>
										<tr>
											<th>Email Address</th>
											<td>{{user_profile.user.email}}</td>
										</tr>
										<tr>
											<th>Mobile</th>
											<td>{{user_profile.mobile}}</td>
										</tr>
										
										<tr>
											<th>Status</th>

											{% if user_profile.user.is_active %}
											<td><span class="badge bg-success">Active</span></td>

											{% else %}
											<td><span class="badge bg-danger">Inactive</span></td>

											{% endif %}

										</tr>
									</tbody>
								</table>

							</div>

						</div>



						<div class="col-md-12 text-sm-end">


							

							<div class="btn-group mr-5" role="group" aria-label="Second group">
								<a href="{% url 'change-password'  user_profile.user.id %}"
									class=" btn btn-primary mb-3 mt-3">Change Password</a>
					
							</div>
							
							<div class="btn-group mr-5" role="group" aria-label="Second group">

								<a href="{% url 'update-user'  user_profile.user.id %}"
									class="btn btn-primary mb-3 mt-3">Update User</a>
							</div>

							<button type="button" class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#centeredModalDanger">
								Delete User
							</button>
							<div class="modal fade" id="centeredModalDanger" tabindex="-1" role="dialog" aria-hidden="true">
								<div class="modal-dialog modal-dialog-centered" role="document">
									<div class="modal-content">
										<div class="modal-header">
											<h5 class="modal-title">Delete User ({{user_profile.user.username}})</h5>
											<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
										</div>
										<div class="modal-body m-3">
											<p class="mb-0">Deleting this user may cause loss of data</p>
										</div>
										<div class="modal-footer">
											<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>

											<form class="form-inline" action="{% url 'delete-user' %}"
												method="post">
												{% csrf_token %}
												<input type="hidden" id="originalUsername" name="username" value="{{user_profile.user.username}}">
												<button type="submit" class="btn btn-danger mb-3 mt-3">Delete User</button>
											</form>
										</div>
									</div>
								</div>
							</div>

						</div>


					</div>
				</div>

			</div>


		</div>

	</div>
</main>

{% endblock %}