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



{% block layout_script %}
<script>
(unknown => {
	$('#suratdisp_form').find('input,textarea').each(function() {
		if (this.type === 'hidden') return;

		dump(this);

		if (this.name === 'tanggal') {
			$(this).prop('type','date').addClass('form-control');
		}

		if (this.tagName === 'TEXTAREA') {
			$(this).removeAttr('rows').removeAttr('cols').attr('rows',5).addClass('form-control');
		}
	});
})();
</script>
{% endblock %}

{% block layout_content %}
<div class="card mt-3">
	<form method="post" enctype="multipart/form-data" autocomplete="off" id="surat_masuk_form" class="card-body">
		{% csrf_token %}

		<h5 class="card-title mt-0">
			<span >Form Disposisi Surat</span>
		</h5>

		{% include 'extra/base_messages.html' %}
		{% include 'extra/base_form_errors.html' %}

		{% url 'surat_item' surat_type=surat.type|lower surat_pk=surat.pk as surat_item_href %}

		<div class="row">
			<fieldset class="col col-md-5">
				<table class="table table-borderless border-0">
					<tr>
						<td>Surat</td>
						<td>:</td>
						<td>
							<a href="{{ surat_item_href }}">{{ surat.nomor }} ( {{ surat.tanggal }} )</a>
						</td>
					</tr>
					<tr><td>Jenis Surat</td><td>:</td><td>{{ surat.jenis }}</td></tr>
					<tr><td>Sifat Surat</td><td>:</td><td>{{ surat.sifat }}</td></tr>
					<tr>
						<td>Perihal</td>
						<td>:</td>
						<td>{{ surat.perihal|linebreaksbr }}</td>
					</tr>
				</table>
			</fieldset>
			<fieldset class="col col-md-7">
				<table id="suratdisp_form" class="table table-borderless">{{ form.as_table }}</table>
			</fieldset>
		</div>

		<div class="row" style="padding:.75rem;">
			<div class="col text-left">
				<a href="{% url 'suratdisp_list' surat_pk=surat_pk %}" class="btn btn-secondary px-lg-4 shadow text-uppercase ml-1"><i class="fa fa-undo"></i> kembali</a>
				<button type="submit" class="btn btn-info px-lg-4 shadow text-uppercase ml-1"> <i class="fa fa-save"></i> simpan</button>
			</div>
		</div>
	</form>
</div>
{% endblock %}