{% extends 'admin/base.html' %}
{% block _title %}{{ _('Import/Export') }}{% endblock %}
{% set import_link = 'active' %}
{% block _content %}
		<h2 id="general" class="mb-2 fw-normal">{{ _('Import/Export') }}</h2>
		<p class="fs-5 h3 text-body-secondary mb-3">{{ _('Import or export your {} instance data').format(const.appName) }}</p>
		<h3 id="import" class="mb-3 fw-light">{{ _('Import') }}</h3>
		<div class="alert alert-info border-0 small" role="alert">
			<p class="m-0 d-flex align-items-center gap-2 fw-medium"><i class="bi bi-info-circle fs-5"></i> {{ _('Note') }}</p>
			<p class="m-0">
				{{ _('Please note that import may take a while, depending on your database size') }}
			</p>
		</div>
		<form class="mb-2" hx-disabled-elt="find button[type=submit]" hx-put="{{ url_for('api.importData') }}" hx-encoding="multipart/form-data" hx-target="#response-container" hx-swap="none">
			<div class="form-group mb-3">
				<label class="form-label" for="import_archive">{{ _('Import data') }}</label>
				<input class="form-control" type="file" id="import_archive" name="import_archive" required>
				<p class="form-text">{{ _('Note: Retrospring exports are not supported yet') }}</p>
			</div>
			<button type="submit" class="btn btn-primary mt-2" id="import-data">
				<span class="me-1 spinner-border spinner-border-sm htmx-indicator" aria-hidden="true"></span>
				<span class="visually-hidden" role="status">{{ _('Loading...') }}</span>
				<i class="bi bi-database-up me-1"></i> {{ _('Import') }}
			</button>
		</form>
		{#
		<hr>
		<form class="mb-2" hx-disabled-elt="find button[type=submit]" hx-put="{{ url_for('api.importRsData') }}" hx-encoding="multipart/form-data" hx-target="#response-container" hx-swap="none">
			<div class="form-group mb-3">
				<label class="form-label" for="import_archive_rs">Retrospring data</label>
				<input class="form-control" type="file" id="import_archive_rs" name="import_archive" required>
				<!-- <p class="form-text">Note: Retrospring exports are not supported yet</p> -->
			</div>
			<button type="submit" class="btn btn-primary mt-2" id="import-data">
				<span class="me-1 spinner-border spinner-border-sm htmx-indicator" aria-hidden="true"></span>
				<span class="visually-hidden" role="status">Loading...</span>
				<i class="bi bi-database-up me-1"></i> Import
			</button>
		</form>
		#}
		<h3 id="export" class="mb-3 mt-5 fw-light">{{ _('Export') }}</h3>
		<div class="form-group mb-3">
			<form hx-post="{{ url_for('api.createExport') }}" hx-swap="none" hx-disabled-elt="#export-btn">
				<button type="submit" class="btn btn-primary" id="export-btn">
					<span class="spinner-border spinner-border-sm htmx-indicator" aria-hidden="true"></span>
					<span class="visually-hidden" role="status">{{ _('Loading...') }}</span>
					<i class="bi bi-plus-lg me-1"></i> {{ _('New Export') }}
				</button>
			</form>
			{% if exports %}
			<div class="table-responsive mt-2">
				<table class="table align-middle">
					<thead>
						<tr>
							<th>{{ _('Date') }}</th>
							<th>{{ _('Actions') }}</th>
						</tr>
					</thead>
					<tbody>
						{% for export in exports %}
						<tr id="export-{{ export.timestamp_esc }}">
							<td>{{ export.timestamp }}</td>
							<td>
								<a href="/{{ export.downloadPath }}" class="btn btn-secondary btn-sm px-3 px-md-2"><i class="bi bi-download"></i> <span class="d-none d-lg-inline-block ms-1">{{ _('Download') }}</span></a>
								<button class="btn btn-outline-danger btn-sm px-3 px-md-2" hx-target="#export-{{ export.timestamp_esc }}" hx-swap="delete" hx-delete="{{ url_for('api.deleteExport', timestamp=export.timestamp_esc) }}"><i class="bi bi-trash"></i> <span class="d-none d-lg-inline-block ms-1">{{ _('Delete') }}</span></button>
							</td>
						</tr>
						{% endfor %}
					</tbody>
				</table>
			</div>
			{% else %}
			<p class="text-center my-3">{{ _('No exports created yet') }}</p>
			{% endif %}
		</div>
{% endblock %}
{% block _scripts %}
<script>
	// fix handling checkboxes
	document.querySelectorAll('.form-check-input[type=checkbox]').forEach(function(checkbox) {
		checkbox.addEventListener('change', function() {
			checkbox.nextElementSibling.value = this.checked ? 'True' : 'False';
		});
	});
</script>
{% endblock %}