{% 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') }}">
<style>
	@media screen and (max-width: 800px) {
		#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 %}
<!-- <h1 class="mb-2"><i class="bi bi-sliders me-1"></i> Admin panel</h1> -->
<!-- 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 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 {{ 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 {{ 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 {{ 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>
		</div>
	</div>
	<div class="col-md-9 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) {
				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") {
					console.log(event.detail.target);
					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 %}