{% extends "htmx_base.html" %}

{% block head %}
<script src="https://unpkg.com/htmx.org@1.9.12" integrity="sha384-ujb1lZYygJmzgSwoxRggbCHcjc0rB2XoQrxeTUQyRjrOnlCoYta87iKBWq3EsdM2" crossorigin="anonymous"></script>
<!-- HTMX Config -->
<meta name="htmx-config" content='{"useTemplateFragments":"true"}'>
{% if theme %}
<link rel="stylesheet" href="/static/themes/{{ theme }}.css" />
{% else %}
<link rel="stylesheet" href="/static/color-schemes/light.css" media="(prefers-color-scheme: light)" />
<link rel="stylesheet" href="/static/color-schemes/dark.css" media="(prefers-color-scheme: dark)" />
{% endif %}
<style>
body.override {
padding: 0;
width: 100%;
max-width: 100%;
margin-top: 0;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
}
.override > header > nav > ul {
  padding: 1rem;
}
.override > header > nav > ul {
  max-width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-weight: bold;
  list-style: none;
}


.override > footer, .override > header {
width: 100%;
max-width: 100%;
margin-top: 0;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
}
.override > main {
padding: 1em;
max-width: 100%;
}
.override section {
width: 100%;
max-width: 100%;
}

{% comment %}
* {
  background-color: var(--main-bg-color);
  color: var(--main-fg-color);
}
a {
  color: var(--main-link-color);
  background-color: var(--main-bg-color);
}
header nav ul {
  background-color: var(--nav-bg-color);
  color: var(--nav-fg-color);
}
{% endcomment %}
</style>
{% endblock head %}

{% block header %}
<header>
<nav>
<ul>
<li><a href="{% url 'htmx:incident-list' %}"><span>Logo</span> Argus: {{ page_title }}</a></li>
<li><a href="{% url 'htmx:timeslot-placeholder' %}">Timeslots</a></li>
<li><a href="{% url 'htmx:notificationprofile-placeholder' %}">Profiles</a></li>
<li>Theme: <a href="{% url 'htmx:theme-list' %}">{{ theme }}</a></li>
<li>{% block userlink %}
{% if request.user.is_authenticated %}
{{ request.user }}
<form action="{% url "htmx:logout" %}" method="POST">
{% csrf_token %}
<button>Log out</button>
</form>
{% else %}
<a href="{% url 'htmx:login' %}">Log in</a>
{% endif %}
{% endblock %}</li>
</ul>
</nav>
</header>
{% endblock header %}
