{% extends "base.html" %}
{% block content %}
<p class="page_title">Control Panel</p>

{% set active_tab = 'Backups' %}
{% include "includes/cp_tabs.html" %}
{% include "includes/working_modal.html" %}

<div>
	<h3>Back up database and photos</h3>
</div>
<div>
	<form action="/cp_backupnow" method="post" style="display:inline;">
	<input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
        <button type="submit" class="imps icon-left backup">
        Backup now
        </button>
        </form>
	<form action="/cp_backuprestoreupload" method="post" enctype="multipart/form-data" id="uploadForm" style="display:inline;">
	<input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
	<button type="button" class="imps icon-left upload" id="openUpload">Upload&hellip;</button>
	<input type="file" name="upload" id="uploadInput" accept=".zip" style="display:none;">
	</form>
</div>
{% if snapshots %}
<div class="item_display_table">
<span class="table_head">
	<span class="table_label">Date</span>
	<span class="table_label table_label-actions">Download</span>
	<span class="table_label table_label-actions">Restore</span>
</span>
<span class="table_body">
{% for snap in snapshots %}
	<div class="table_row">
		<div class="table_cell">{{ snap.backup_time }}</div>
		<div class="table_cell table_cell-actions">
			<a href="{{ snap.download_url }}">
				<button type="button" class="imps icon-only download" title="Download"></button>
			</a>
		</div>
		<div class="table_cell table_cell-actions">
			<a href="{{ snap.restore_url }}" data-working>
				<button type="button" class="imps icon-only restore" title="Restore"></button>
			</a>
		</div>
	</div>
{% endfor %}
</span>
</div>
{% endif %}

<script>
document.getElementById("openUpload").addEventListener("click", function () {
	document.getElementById("uploadInput").click();
});
document.getElementById("uploadInput").addEventListener("change", function () {
	if (this.files.length) {
		document.getElementById("uploadForm").submit();
	}
});
</script>
{% endblock %}