{%- extends 'root.html' -%}
{% import 'settings/common.html' as common with context %}
{% block pagetitle %}Settings{% endblock %}
{% block pagetype %}settings{% endblock %}
{% block body %}
	{% include "header.html" %}
		<div class="container">
		<div class="row justify-content-around">
	<div class="col h-100">

		{% if error %}
		<div class="alert alert-danger alert-dismissible fade show my-3" role="alert">
			<i class="fas fa-exclamation-circle my-auto"></i>
			<span>
				{{error}}
			</span>
			<button type="button" class="close" data-bs-dismiss="alert" aria-label="Close">
				<span aria-hidden="true"><i class="far fa-times"></i></span>
			</button>
		</div>
		{% endif %}
		{% if msg %}
		<div class="alert alert-success alert-dismissible fade show my-3" role="alert">
			<i class="fas fa-check-circle my-auto" aria-hidden="true"></i>
			<span>
				{{msg}}
			</span>
			<button type="button" class="close" data-bs-dismiss="alert" aria-label="Close">
				<span aria-hidden="true"><i class="far fa-times"></i></span>
			</button>
		</div>
		{% endif %}

		<div class="mt-3">
			<h1 class="d-mob-none">Settings</h1>
			<h3 class="mt-5 d-md-none">Settings</h3>
		</div>
		<div class="flex-row bg-white box-shadow-bottom sticky d-none d-sm-flex mt-3 mb-3 mb-sm-5">
			<nav>
				<ul class="nav settings-nav">
					<li class="nav-item"><a class="nav-link{% if request.path=='/settings/personal' %} active{% endif %}" href="/settings/personal">Personal</a></li>
					<li class="nav-item"><a class="nav-link{% if request.path=='/settings/advanced' %} active{% endif %}" href="/settings/advanced">Advanced</a></li>
					<li class="nav-item"><a class="nav-link{% if request.path=='/settings/css' %} active{% endif %}" href="/settings/css">CSS</a></li>
					<li class="nav-item"><a class="nav-link{% if request.path=='/settings/security' %} active{% endif %}" href="/settings/security">Security</a></li>
					<li class="nav-item"><a class="nav-link{% if request.path=='/settings/apps' %} active{% endif %}" href="/settings/apps">Apps/Bots</a></li>
				</ul>
			</nav>
		</div>
		<div class="flex-row bg-white box-shadow-bottom sticky justify-content-center d-flex d-sm-none mt-3 mb-3 mb-sm-5">
			<nav>
				<ul class="nav settings-nav">
					<li class="nav-item"><a class="nav-link{% if request.path=='/settings/personal' %} active{% endif %} navsettings" href="/settings/personal"><i class="fas fa-cog text-base mr-0"></i></a></li>
					<li class="nav-item"><a class="nav-link{% if request.path=='/settings/advanced' %} active{% endif %} navsettings" href="/settings/advanced"><i class="fas fa-filter text-base mr-0"></i></a></li>
					<li class="nav-item"><a class="nav-link{% if request.path=='/settings/css' %} active{% endif %} navsettings" href="/settings/css"><i class="fas fa-palette text-base mr-0"></i></a></li>
					<li class="nav-item"><a class="nav-link{% if request.path=='/settings/security' %} active{% endif %} navsettings" href="/settings/security"><i class="fas fa-lock-alt text-base mr-0"></i></a></li>
					<li class="nav-item"><a class="nav-link{% if request.path=='/settings/apps' %} active{% endif %} navsettings" href="/settings/apps"><i class="fas fa-code text-base mr-0"></i></a></li>
				</ul>
			</nav>
		</div>
	{% block content %}{% endblock %}
	</div>
</div>
</div>
{% block clipboard %}
<div class="toast clipboard" id="toast-success" role="alert" aria-live="assertive" aria-atomic="true" data-bs-animation="true" data-bs-autohide="true" data-bs-delay="5000">
	<div class="toast-body text-center">
		<i class="fas fa-check-circle text-success mr-2"></i>Link copied to clipboard
	</div>
</div>
{% endblock %}
<div class="toast" id="toast-post-success" style="position: fixed; bottom: 1.5rem; margin: 0 auto; left: 0; right: 0; width: 275px; z-index: 1000" role="alert" aria-live="assertive" aria-atomic="true" data-bs-animation="true" data-bs-autohide="true" data-bs-delay="5000">
	<div class="toast-body bg-success text-center text-white">
		<i class="fas fa-comment-alt-smile mr-2"></i><span id="toast-post-success-text">Action successful!</span>
	</div>
</div>
<div class="toast" id="toast-post-error" style="position: fixed; bottom: 1.5rem; margin: 0 auto; left: 0; right: 0; width: 275px; z-index: 1000" role="alert" aria-live="assertive" aria-atomic="true" data-bs-animation="true" data-bs-autohide="true" data-bs-delay="5000">
	<div class="toast-body bg-danger text-center text-white">
		<i class="fas fa-exclamation-circle mr-2"></i><span id="toast-post-error-text">Error, please try again later.</span>
	</div>
</div>
{% block onload %}{% endblock %}
<script defer src="{{'js/vendor/clipboard.js' | asset}}"></script>
{% endblock %}