{% extends "layout.html" %}
{% load common %}

{% block layout_script %}
<script>
(unknown => {
	$('#suratd_table1').find('[data-delete]').each(function() {
		$(this).on('click',event => {
			let message = `Yakin Hapus Disposisi Ini?`
			if (! window.confirm(message)) event.preventDefault();
		});
	});

	$('#suratd_table1').find('[data-htmlreport]').each(function() {
		$(this).on('click',event => {
			event.preventDefault();
			$('#suratd_htmlreport').prop('src',this.href);
		});
	});
})();
</script>
{% endblock %}

{% block layout_content %}
{% include 'extra/base_messages.html' %}
<div class="card mt-3">
	<div class="card-body">
		<h5 class="card-title d-flex mt-0">
			<span class="text-capitalize">List Disposisi Surat</span>

			<div class="d-inline ml-auto mr-3">
				<a href="{% url 'surat_list' surat_type=surat_type|lower %}" class="btn px-lg-4 btn-secondary text-uppercase ml-1">
					<i class="fa fa-undo"></i> Kembali
				</a>
				<a href="{% url 'suratd_create' surat_pk=surat.pk %}" class=" btn btn-webapp text-uppercase">
					<i class="fa fa-plus"></i> tambah
				</a>
			</div>
			<form class="d-inline form-inline" autocomplete="off">
				<input type="search" name="term" value="{{ page_term }}" placeholder="Pencarian ..." class="form-control">
			</form>
		</h5>

		<div class="h4 mb-1">
			<a href="{% url 'surat_item' surat_type=surat_type|lower surat_pk=surat.pk %}">
				{{ surat.nomor }} ({{ surat.tanggal }})
			</a>
		</div>
		<div class="mb-3">
			<b>Perihal:</b>
			{{ surat.perihal|linebreaksbr|default:"(kosong)" }}
		</div>

		<table id="suratd_table1" class="table table-bordered table-hover">
			<thead class="text-white" style="background-color: rgb(33, 112, 202) !important;">
				<tr>
					<th>Disposisi Kepada</th>
					<th>Catatan Disposisi</th>
					<th title="Aksi" class="text-center"><i class="fas fa-fw fa-cog"></i></th>
				</tr>
			</thead>
			{% for i in paging %}
			<tbody>
				<tr>
					<td class="font-weight-bold">{{ i.kepada|linebreaksbr }}</td>
					<td title="{{ i.tanggal|stringDateYMD }}">{{ i.catatan|linebreaksbr }}</td>
					<td class="text-center">{% include './disp_list_action.html' %}</td>
				</tr>
			</tbody>
			{% empty %}
				<tr><td colspan="999" class="text-center text-muted">(kosong)</td></tr>
			{% endfor %}
		</table>

		<ul class="pagination justify-content-center mb-0">
			{% if paging.has_previous %}
			<li class="page-item">
				<a class="page-link" href="?page={{ paging.previous_page_number }}&term={{ page_term }}">&lsaquo; Sebelumnya</a>
			</li>
			{% else %}
			<li class="page-item disabled"><a z-index="-1" class="page-link">&lsaquo; Sebelumnya</a></li>
			{% endif %}
			{% if paging.has_next %}
			<li class="page-item">
				<a class="page-link" href="?page={{ paging.next_page_number }}&term={{ page_term }}">Selanjutnya &rsaquo;</a>
			</li>
			{% else %}
			<li class="page-item disabled">
				<a class="page-link" z-index="-1">Selanjutnya &rsaquo;</a>
			</li>
			{% endif %}
		</ul>

	</div>
</div>

<iframe id="suratd_htmlreport" style="width:0;height:0;border:0;border:none;visibility:hidden;"></iframe>
{% endblock %}