{% extends "layout.html" %}

{% block layout_script %}
<script>
(unknown => {
	$('#users-table').children('tbody').children().each(function() {
		let tbrow = this;
		$(this).find('[data-delete]').on('click',event => {
			let data_usr = $(tbrow).children(':first').text();
			let message = `Anda Yakin Hapus User "${data_usr}" ?`;

			if (! window.confirm(message)) event.preventDefault();
		});
	});
})();
</script>
{% endblock %}

{% block layout_content %}
<div class="card mt-3" style="box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;">
	<div class="card-body">
		{% include 'extra/base_messages.html' %}
		<h5 class="card-title mt-0">
			<span>List User</span>
		</h5>

		<table id="users-table" class="table table-striped table-hover" style="box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;">
			<thead class="text-white" style="background-color: rgb(33, 112, 202) !important;">
				<tr>
					<th>Nama</th>
					<th>Peran</th>
					<th>Dibuat Pada</th>
					<th>Diubah Pada</th>
					<th title="Aksi" class="text-center"><i class="fas fa-fw fa-cog"></i></th>
				</tr>
			</thead>
			<tbody>
				{% for i in result %}
				<tr>
					<td>{{ i.usr }}</td>
					<td>{{ i.pk_roles.role }}</td>
					<td>{{ i.created }}</td>
					<td>{{ i.updated }}</td>
					<td class="text-center">
						{% if session_current.pk != i.pk %}
							<a href="{% url 'users_delete' i.pk %}" data-delete class="btn btn-danger shadow py-2 text-uppercase"><i class="fa fa-trash"></i></a>
						{% endif %}
						<a href="{% url 'users_update' i.pk %}" class="btn btn-success shadow py-2 text-uppercase"><i class="fa fa-edit"></i></a>
					</td>
				</tr>
				{% endfor %}
			</tbody>
		</table>
		<a href="{% url 'users_create' %}" class="btn btn-accent px-lg-4 shadow text-uppercase"><i class="fa fa-plus"></i> tambah</a>
	</div>
	<ul class="pagination justify-content-center mb-3">
			{% if result.has_previous %}
			<li class="page-item">
				<a class="page-link" href="?page={{ result.previous_page_number }}">&lsaquo; Sebelumnya</a>
			</li>
			{% else %}
			<li class="page-item disabled"><a z-index="-1" class="page-link">&lsaquo; Sebelumnya</a></li>
			{% endif %}
			{% if result.has_next %}
			<li class="page-item">
				<a class="page-link" href="?page={{ result.next_page_number }}">Selanjutnya &rsaquo;</a>
			</li>
			{% else %}
			<li class="page-item disabled">
				<a class="page-link" z-index="-1">Selanjutnya &rsaquo;</a>
			</li>
			{% endif %}
		</ul>
</div>
{% endblock %}