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

{% block layout_script %}
{% include 'extra/toast_simple.html' %}
<script>
(unknown => {
	bsCustomFileInput.init();

	var form = document.querySelector('#settings-main');
	var request = () => {
		$.ajax({
			data: new FormData(form),
			method: form.method,
			processData: false,
			contentType: false,
			success: () => window.Toaster_Simple.theme('success').text('Berhasil Simpan Pengaturan').show(),
			error: () => window.Toaster_Simple.theme('warning').text('Gagal Simpan Pengaturan').show(),
		});
	};

	$(form).on('submit',event => {
		event.preventDefault();
		request();
	});
})();
</script>
{% endblock %}

{% block layout_content %}
<form id="settings-main" method="post" class="mt-3">

	{% for item in settings_main %}
	<div class="form-group row">
	  <label class="col-sm-4 col-form-label">{{ item.k }}</label>
	  <div class="col-sm-8">
	    <input class="form-control" name="{{ item.k }}" value="{{ item.v }}">
	  </div>
	</div>
	{% endfor %}

	<div class="row">
		<div class="col-md-6">
			<div class="custom-file">
			  <input type="file" name="logo.png" class="custom-file-input" accept="image/png">
			  <label class="custom-file-label">Gambar Logo Pemda</label>
			</div>
		</div>
		<div class="col-md-6">
			<div class="custom-file">
			  <input type="file" name="site-bg.png" class="custom-file-input" accept="image/png">
			  <label class="custom-file-label">Gambar Background</label>
			</div>
		</div>
	</div>

	<div class="mt-4">
		<button type="submit" class="btn btn-webapp text-uppercase mr-2">simpan</button>
		<span class="text-muted">Gambar tidak bisa langsung berubah, harus refresh Cache browser dahulu.</span>
	</div>
</form>
{% endblock %}