{% extends "base.html" %}
{% load static %}
{% block title %}User Management{% endblock %}
{% block extra_css %}
  <link href="{% static 'assets/plugins/datatable/css/dataTables.bootstrap5.min.css' %}" rel="stylesheet" />
{% endblock %}
{% block content %}
<div class="page-breadcrumb d-none d-sm-flex align-items-center mb-1 justify-content-between">
	<div class="breadcrumb-title pe-3">User Management</div>
	<a href="{% url 'user-create' %}" class="btn btn-success ms-auto">Add User</a>
</div>
<div class="row">
	<hr>
				<div class="card">
					<div class="card-body">
						<div class="table-responsive">
							<table id="user_management" class="table table-striped table-bordered" style="width:100%">
								<thead>
									<tr>
										<th>User Name</th>
										<th>Full Name</th>
										<th>Email</th>
										<th>Role</th>
										<th>Banned</th>
										<th>Start date</th>
										<th>Actions</th>
									</tr>
								</thead>
								<tbody>
									{% for user in users %}
									<tr>
										<td>{{ user.username }}</td>
										<td>{{ user.first_name }} {{ user.last_name }}</td>
										<td>{{ user.email }}</td>
										<td>{% if user.is_superuser %}Admin{% elif user.is_staff %}Staff{% else %}Customer{% endif %}</td>
										<td>{% if user.banned %}<span class="badge bg-danger">Yes</span>{% else %}<span class="badge bg-success">No</span>{% endif %}</td>
										<td>{{ user.date_joined }}</td>
										 <td>
											<a href="{% url 'user-view' user.id %}" class="btn btn-info btn-sm" title="View">
												<i class="bi bi-eye"></i>
											</a>
											<a href="{% url 'user-edit' user.id %}" class="btn btn-warning btn-sm" title="Edit">
												<i class="bi bi-pencil"></i>
											</a>
											<form method="post" action="{% url 'user-delete' user.id %}" style="display:inline;">
												{% csrf_token %}
												<button type="submit" class="btn btn-danger btn-sm" title="Delete" onclick="return confirm('Are you sure you want to delete this user?');">
													<i class="bi bi-trash"></i>
												</button>
											</form>
                                        </td>
									</tr>
									{% endfor %}
								</tbody>
							</table>
						</div>
					</div>
				</div>
</div>
{% endblock %}
{% block extra_js %}
  <script src="{% static 'assets/plugins/datatable/js/jquery.dataTables.min.js' %}"></script>
  <script src="{% static 'assets/plugins/datatable/js/dataTables.bootstrap5.min.js' %}"></script>
  <script>
	$(document).ready(function() {
		$('#user_management').DataTable();
	} );
  </script>           
{% endblock %}