{% extends 'base.html' %}
{% load static %}

{% block content %}
<main class="content">
	<div class="container-fluid p-4">
		<div class="d-flex justify-content-between align-items-center mb-4">
			<div>
				<h1 class="h2 mb-1 fw-bold" style="color: #0e2e63;">
					<i class="fas fa-user-circle me-2"></i>{{user_profile.user.first_name|upper}} {{user_profile.middle_name|upper}}
				</h1>
				<p class="text-muted small">{{user_profile.user.username}}</p>
			</div>
			<div>
				<a href="{% url 'user-details' %}" class="btn btn-light">
					<i class="fas fa-list me-1"></i> User Details
				</a>
			</div>
		</div>

		<div class="row">
			<div class="col-12 col-xl-6">
				{% include 'partials/_messages.html' %}

				<div class="card shadow-sm border-0" style="border-radius: 12px;">
					<div class="card-header bg-white border-0">
						<div class="d-flex justify-content-between align-items-center">
							<h5 class="fw-bold" style="color: #0e2e63;">
								<i class="fas fa-id-card me-2"></i>User Details
							</h5>
							<span class="badge {% if user_profile.user.is_active %}bg-success{% else %}bg-danger{% endif %}">
								{{ user_profile.user.is_active|yesno:"Active,Inactive" }}
							</span>
						</div>
					</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="Profile Picture" src="{{user_profile.profile_picture_url}}"
										class="rounded-circle img-responsive mt-2" width="128" height="128" />
									{% else %}
									<img alt="Profile Picture" 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 style="color: #0e2e63; width: 40%;">Username</th>
											<td>{{user_profile.user.username}}</td>
										</tr>
										<tr>
											<th style="color: #0e2e63;">System Role</th>
											<td>{{user_profile.system_role.role_name|upper}}</td>
										</tr>
										<tr>
											<th style="color: #0e2e63;">First Name</th>
											<td>{{user_profile.user.first_name|upper}}</td>
										</tr>
										<tr>
											<th style="color: #0e2e63;">Middle Name</th>
											<td>{{user_profile.middle_name|upper}}</td>
										</tr>
										<tr>
											<th style="color: #0e2e63;">Last Name</th>
											<td>{{user_profile.user.last_name|upper}}</td>
										</tr>
										<tr>
											<th style="color: #0e2e63;">Email</th>
											<td>{{user_profile.user.email}}</td>
										</tr>
										<tr>
											<th style="color: #0e2e63;">Mobile</th>
											<td>{{user_profile.mobile}}</td>
										</tr>
										<tr>
											<th style="color: #0e2e63;">Telephone</th>
											<td>{{user_profile.telephone}}</td>
										</tr>
										<tr>
											<th style="color: #0e2e63;">Address</th>
											<td>{{user_profile.address|upper}}</td>
										</tr>
										<tr>
											<th style="color: #0e2e63;">Branch Code</th>
											<td>{{user_profile.branch.branch_code}}</td>
										</tr>
										<tr>
											<th style="color: #0e2e63;">Branch Name</th>
											<td>{{user_profile.branch.branch_name|upper}}</td>
										</tr>
										<tr>
											<th style="color: #0e2e63;">Country</th>
											<td>{{user_profile.branch.country.country_name|upper}}</td>
										</tr>
										<tr>
											<th style="color: #0e2e63;">Employee Number</th>
											<td>{{user_profile.employee_number}}</td>
										</tr>
										<tr>
											<th style="color: #0e2e63;">Job Role</th>
											<td>{{user_profile.job_role|upper}}</td>
										</tr>
										<tr>
											<th style="color: #0e2e63;">Reference ID</th>
											<td>{{user_profile.reference_id|default:"-"}}</td>
										</tr>
									</tbody>
								</table>
							</div>
						</div>

						<div class="mt-3 text-sm-end">
							<a href="{% url 'change-password' user_profile.user.id %}" class="btn" style="background: #0e2e63; color: #fff; border-radius: 6px; padding: 8px 20px;">
								<i class="fas fa-key me-1"></i> Change Password
							</a>
							<a href="{% url 'update-user' user_profile.user.id %}" class="btn" style="background: #0e2e63; color: #fff; border-radius: 6px; padding: 8px 20px;">
								<i class="fas fa-edit me-1"></i> Update User
							</a>
							<button type="button" class="btn btn-danger" style="border-radius: 6px; padding: 8px 20px;" data-bs-toggle="modal" data-bs-target="#centeredModalDanger">
								<i class="fas fa-trash me-1"></i> Delete User
							</button>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</main>

<!-- Delete Modal -->
<div class="modal fade" id="centeredModalDanger" tabindex="-1" aria-hidden="true">
	<div class="modal-dialog modal-dialog-centered">
		<div class="modal-content" style="border-radius: 12px;">
			<div class="modal-header border-0">
				<h5 class="modal-title text-danger">Delete User</h5>
				<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
			</div>
			<div class="modal-body">
				<p>Are you sure you want to delete <strong>{{user_profile.user.username}}</strong>?</p>
				<p class="text-muted small">This action cannot be undone.</p>
			</div>
			<div class="modal-footer border-0">
				<button type="button" class="btn btn-light" data-bs-dismiss="modal" style="border-radius: 6px;">Cancel</button>
				<form action="{% url 'delete-user' %}" method="post">
					{% csrf_token %}
					<input type="hidden" name="username" value="{{user_profile.user.username}}">
					<button type="submit" class="btn btn-danger" style="border-radius: 6px;">Delete</button>
				</form>
			</div>
		</div>
	</div>
</div>
{% endblock %}