{% extends 'base.html' %}
{% block title %}{% block _title %}{% endblock %} - {{ _('Admin') }}{% endblock %}
{% set adminLink = 'active' %}
{% block additionalHeadItems %}
<link rel="stylesheet" href="{{ url_for('static', filename='css/toastify.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='css/coloris.min.css') }}">
{% block _additionalHeadItems %}{% endblock %}
<style>
	[data-bs-theme=dark] .form-switch .form-check-input:focus:not(:checked) {
		--bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23{{ cfg.style.accentDark[1:] }}'/%3e%3c/svg%3e");
	}
	[data-bs-theme=light] .form-switch .form-check-input:focus:not(:checked) {
		--bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23{{ cfg.style.accentLight[1:] }}'/%3e%3c/svg%3e");
	}
	.btn.btn-outline-secondary:focus {
		border-color: transparent;
		background-color: var(--bs-btn-active-bg) !important;
	}
	@media screen and (max-width: 767px) {
		#sidebar-col {
			border-right: 0 !important;
			padding-right: calc(var(--bs-gutter-x) * .5) !important;

		}
		#sidebar {
			padding-top: 0 !important;
		}
		#content {
			padding-left: calc(var(--bs-gutter-x) * .5) !important;
			margin-top: 1rem !important;
		}
	}
</style>
{% endblock %}
{% block content %}
<!-- this is actually not used anymore, but htmx requires a valid target so we have to use it -->
<div id="response-container"></div>
<div class="row">
	<div class="col-md-3 col-xxl-2 border-end pe-4" id="sidebar-col">
		<div id="sidebar" class="sticky-lg-top pt-2">
			<a class="ps-3 btn btn-outline-secondary my-1 fs-6 scale-parent {{ info_link }} d-flex align-items-center" href="{{ url_for('admin.information') }}">
				<i class="bi bi-card-text fs-5 scale-child"></i>
				<span class="sidebar-btn-text ms-2 ps-1">{{ _('Information') }}</span>
			</a>
			<a class="ps-3 btn btn-outline-secondary my-1 fs-6 scale-parent {{ access_link }} d-flex align-items-center" href="{{ url_for('admin.accessibility') }}">
				<i class="bi bi-universal-access fs-5 scale-child"></i>
				<span class="sidebar-btn-text ms-2 ps-1">{{ _('Accessibility') }}</span>
			</a>
			<a class="ps-3 btn btn-outline-secondary my-1 fs-6 scale-parent {{ crosspost_link }} d-flex align-items-center" href="{{ url_for('admin.crosspost') }}">
				<i class="bi bi-file-post fs-5 scale-child"></i>
				<span class="sidebar-btn-text ms-2 ps-1">{{ _('Crosspost') }}</span>
			</a>
			<a class="ps-3 btn btn-outline-secondary my-1 fs-6 scale-parent {{ langs_link }} d-flex align-items-center" href="{{ url_for('admin.languages') }}">
				<i class="bi bi-translate fs-5 scale-child"></i>
				<span class="sidebar-btn-text ms-2 ps-1">{{ _('Languages') }}</span>
			</a>
			<a class="ps-3 btn btn-outline-secondary my-1 fs-6 scale-parent {{ notif_link }} d-flex align-items-center" href="{{ url_for('admin.notifications') }}">
				<i class="bi bi-bell fs-5 scale-child"></i>
				<span class="sidebar-btn-text ms-2 ps-1">{{ _('Notifications') }}</span>
			</a>
			<a class="ps-3 btn btn-outline-secondary my-1 fs-6 scale-parent {{ custom_link }} d-flex align-items-center" href="{{ url_for('admin.customize') }}">
				<i class="bi bi-columns-gap fs-5 scale-child"></i>
				<span class="sidebar-btn-text ms-2 ps-1">{{ _('Customize') }}</span>
			</a>
			<a class="ps-3 btn btn-outline-secondary my-1 fs-6 scale-parent {{ antispam_link }} d-flex align-items-center" href="{{ url_for('admin.antispam') }}">
				<i class="bi bi-shield fs-5 scale-child"></i>
				<span class="sidebar-btn-text ms-2 ps-1">{{ _('Anti-spam') }}</span>
			</a>
			<a class="ps-3 btn btn-outline-secondary my-1 fs-6 scale-parent {{ general_link }} d-flex align-items-center" href="{{ url_for('admin.general') }}">
				<i class="bi bi-gear fs-5 scale-child"></i>
				<span class="sidebar-btn-text ms-2 ps-1">{{ _('General') }}</span>
			</a>
			<a class="ps-3 btn btn-outline-secondary my-1 fs-6 scale-parent {{ emojis_link }} d-flex align-items-center" href="{{ url_for('admin.emojis') }}">
				<i class="bi bi-emoji-smile fs-5 scale-child"></i>
				<span class="sidebar-btn-text ms-2 ps-1">{{ _('Emojis') }}</span>
			</a>
			<a class="ps-3 btn btn-outline-secondary my-1 fs-6 scale-parent {{ import_link }} d-flex align-items-center" href="{{ url_for('admin.importExport') }}">
				<i class="bi bi-box-seam fs-5 scale-child"></i>
				<span class="sidebar-btn-text ms-2 ps-1">{{ _('Import/Export') }}</span>
			</a>
			<a class="ps-3 btn btn-outline-secondary my-1 fs-6 scale-parent {{ blacklist_link }} d-flex align-items-center" href="{{ url_for('admin.blacklist') }}">
				<i class="bi bi-ban fs-5 scale-child"></i>
				<span class="sidebar-btn-text ms-2 ps-1">{{ _('Word blacklist') }}</span>
			</a>
			<hr class="d-block d-md-none mt-4">
		</div>
	</div>
	<div class="col-md-9 col-xxl-10 ps-4" id="content">
		{% block _content %}{% endblock %}
	</div>
</div>
{% endblock %}
{% block scripts %}
<script src="{{ url_for('static', filename='js/toastify.min.js') }}"></script>
<script>
		document.addEventListener('htmx:afterRequest', function(event) {
			const jsonResponse = event.detail.xhr.response;
			if (jsonResponse && event.detail.target.dataset.dontshowtoast != '') {
				const parsed = JSON.parse(jsonResponse);
				const alertType = event.detail.successful ? 'success' : 'danger';
				message = event.detail.successful ? parsed.message : parsed.error;
				if (event.detail.target.id != "question-count" && event.detail.target.dataset.dontshowtoast != '') {
					if (event.detail.target.className.includes("emoji-")) {
						event.detail.target.remove();
					}
					Toastify({
						text: message,
						duration: 3000,
						gravity: "top",
						position: "right",
						stopOnFocus: true,
						className: `alert alert-${alertType} shadow alert-dismissible`,
						close: true
					}).showToast();
				}
			}
		});
</script>
{% block _scripts %}
{% endblock %}
{% endblock %}