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

{% 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-users me-2"></i>User Details
				</h1>
				<p class="text-muted small">Manage all users</p>
			</div>
			<a href="{% url 'add-user' %}" class="btn" style="background: #0e2e63; color: #fff; padding: 10px 25px; border-radius: 8px;">
				<i class="fas fa-plus me-2"></i> Add User
			</a>
		</div>

		<!-- Filter Card -->
		<div class="card shadow-sm border-0 mb-4" style="border-radius: 12px;">
			<div class="card-body">
				<form action="{% url 'user-details' %}" method="GET">
					<div class="row g-3">
						<div class="col-md-3">
							<label class="form-label fw-semibold" style="color: #0e2e63;">Given Name</label>
							<input type="text" class="form-control" name="given_name" style="border-radius: 8px; padding: 10px;" placeholder="Search by name" value="{{default_given_name}}">
						</div>
						<div class="col-md-2">
							<label class="form-label fw-semibold" style="color: #0e2e63;">Job Role</label>
							<select class="form-select" name="job_role" style="border-radius: 8px; padding: 10px;">
								{% for job_role in job_roles %}
								{% if job_role|lower == default_job_role|lower %}
								<option value="{{job_role}}" selected>{{job_role}}</option>
								{% else %}
								<option value="{{job_role}}">{{job_role}}</option>
								{% endif %}
								{% endfor %}
							</select>
						</div>
						<div class="col-md-2">
							<label class="form-label fw-semibold" style="color: #0e2e63;">System Role</label>
							<select class="form-select" name="system_role_id" style="border-radius: 8px; padding: 10px;">
								<option value="ALL">ALL</option>
								{% for system_role in system_roles %}
								{% if system_role.id|slugify == default_system_role_id %}
								<option value="{{system_role.id}}" selected>{{system_role.role_name|upper}}</option>
								{% else %}
								<option value="{{system_role.id}}">{{system_role.role_name|upper}}</option>
								{% endif %}
								{% endfor %}
							</select>
						</div>
						<div class="col-md-2">
							<label class="form-label fw-semibold" style="color: #0e2e63;">Branch</label>
							<select class="form-select" name="branch_code" id="selectBranchName" style="border-radius: 8px; padding: 10px;">
								<option value="ALL">ALL</option>
								{% for branch in branches %}
								{% if branch.branch_code|lower == default_branch_code|lower %}
								<option value="{{branch.branch_code}}" selected>{{branch.branch_name}} ({{branch.branch_code}})</option>
								{% else %}
								<option value="{{branch.branch_code}}">{{branch.branch_name}} ({{branch.branch_code}})</option>
								{% endif %}
								{% endfor %}
							</select>
						</div>
						<div class="col-md-2">
							<label class="form-label fw-semibold" style="color: #0e2e63;">Account Status</label>
							<select class="form-select" name="user_account_status" style="border-radius: 8px; padding: 10px;">
								{% for user_account_status in user_account_statuses %}
								{% if user_account_status|lower == default_user_account_status|lower %}
								<option value="{{user_account_status}}" selected>{{user_account_status}}</option>
								{% else %}
								<option value="{{user_account_status}}">{{user_account_status}}</option>
								{% endif %}
								{% endfor %}
							</select>
						</div>
						<div class="col-md-1 d-flex align-items-end">
							<button type="submit" class="btn w-100" style="background: #0e2e63; color: #fff; border-radius: 8px; padding: 10px;">
								<i class="fas fa-search"></i>
							</button>
						</div>
					</div>
				</form>
			</div>
		</div>

		<!-- Users Table -->
		<div class="card shadow-sm border-0" style="border-radius: 12px;">
			<div class="card-body">
				<div class="table-responsive">
					<table class="table table-hover align-middle">
						<thead style="background: #f8f9fa;">
							<tr>
								<th>User</th>
								<th>Given Name</th>
								<th>Last Name</th>
								<th>Job Role</th>
								<th>System Role</th>
								<th>Branch</th>
								<th>Username</th>
								<th>Status</th>
								<th class="text-sm-end">Action</th>
							</tr>
						</thead>
						<tbody>
							{% for user_profile in page %}
							<tr>
								<td>
									{% if user_profile.profile_picture_url %}
									<img src="{{user_profile.profile_picture_url}}" width="32" height="32" class="rounded-circle my-n1" alt="Avatar">
									{% else %}
									<img src="{% static 'img/avatars/default-user.png' %}" width="32" height="32" class="rounded-circle my-n1" alt="Avatar">
									{% endif %}
								</td>
								<td>{{user_profile.user.first_name|upper}} {{user_profile.middle_name|upper}}</td>
								<td>{{user_profile.user.last_name|upper}}</td>
								<td>{{user_profile.job_role}}</td>
								<td>{{user_profile.system_role.role_name|upper}}</td>
								<td>{{user_profile.branch.branch_name|upper}}</td>
								<td>{{user_profile.user.username}}</td>
								<td>
									{% if user_profile.user.is_active %}
									<span class="badge bg-success">Active</span>
									{% else %}
									<span class="badge bg-danger">Inactive</span>
									{% endif %}
								</td>
								<td class="text-sm-end">
									<a href="{% url 'view-user' user_profile.user.id %}" class="btn btn-sm" style="background: #0e2e63; color: #fff; border-radius: 6px;">
										<i class="fas fa-eye"></i> View
									</a>
								</td>
							</tr>
							{% empty %}
							<tr>
								<td colspan="9" class="text-center py-4">
									<i class="fas fa-users fa-3x text-muted mb-3"></i>
									<h5 class="text-muted">No users found</h5>
								</td>
							</tr>
							{% endfor %}
						</tbody>
					</table>
				</div>

				<!-- Pagination -->
				{% if has_entries %}
				<div class="row align-items-center mt-3">
					<div class="col-md-6">
						<p class="text-muted small">
							Showing {{ page.start_index }} to {{ page.end_index }} of {{ page.paginator.count }} entries
						</p>
					</div>
					<div class="col-md-6">
						<nav>
							<ul class="pagination justify-content-end">
								{% if page.has_previous %}
								<li class="page-item">
									<a class="page-link" href="?page_number={{page.previous_page_number}}&per_page_count={{default_per_page_count}}&given_name={{default_given_name}}&job_role={{default_job_role}}&system_role_id={{default_system_role_id}}&branch_code={{default_branch_code}}&user_account_status={{default_user_account_status}}">
										Previous
									</a>
								</li>
								{% else %}
								<li class="page-item disabled"><a class="page-link">Previous</a></li>
								{% endif %}

								{% for page_number in page_list %}
								{% if page_number == page.paginator.ELLIPSIS %}
								<li class="page-item disabled"><a class="page-link">...</a></li>
								{% else %}
								<li class="page-item {% if page_number == page.number %}active{% endif %}">
									<a class="page-link" href="?page_number={{page_number}}&per_page_count={{default_per_page_count}}&given_name={{default_given_name}}&job_role={{default_job_role}}&system_role_id={{default_system_role_id}}&branch_code={{default_branch_code}}&user_account_status={{default_user_account_status}}">
										{{page_number}}
									</a>
								</li>
								{% endif %}
								{% endfor %}

								{% if page.has_next %}
								<li class="page-item">
									<a class="page-link" href="?page_number={{page.next_page_number}}&per_page_count={{default_per_page_count}}&given_name={{default_given_name}}&job_role={{default_job_role}}&system_role_id={{default_system_role_id}}&branch_code={{default_branch_code}}&user_account_status={{default_user_account_status}}">
										Next
									</a>
								</li>
								{% else %}
								<li class="page-item disabled"><a class="page-link">Next</a></li>
								{% endif %}
							</ul>
						</nav>
					</div>
				</div>
				{% endif %}
			</div>
		</div>
	</div>
</main>
{% endblock %}