<!DOCTYPE html>{% load sass_tags compress %}
<html>
    <head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
{% compress css file site %}
<link rel="stylesheet" href="/static/css/reset.css"></link>
<link rel="stylesheet" href="{% sass_src 'css/site.scss' %}"></link>
<link rel="stylesheet" href="/static/css/style.css"></link>
<link rel="stylesheet" href="{% sass_src 'css/comments.scss' %}"></link>
{% endcompress %}
{% block head %}
{% endblock %}
    </head>
    <body>
{% block header %}
<header>
    <div class="burger">
        <svg width="512" height="512" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">
            <path fill="#F0F0F0" d="M32 29H4a1 1 0 0 1 0-2h28a1 1 0 0 1 0 2Z" />
            <path fill="#F0F0F0" d="M32 19H4a1 1 0 0 1 0-2h28a1 1 0 0 1 0 2Z" />
            <path fill="#F0F0F0" d="M32 9H4a1 1 0 0 1 0-2h28a1 1 0 0 1 0 2Z" />
        </svg>
    </div>
    <div>
        <a href="/">{{ settings.SITENAME }}</a>
    </div>
</header>
<nav class="overlay">
    <header>
        <div class="burger">
            <svg width="512" height="512" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
                <path fill="#f0f0f0" d="M24 9.4L22.6 8L16 14.6L9.4 8L8 9.4l6.6 6.6L8 22.6L9.4 24l6.6-6.6l6.6 6.6l1.4-1.4l-6.6-6.6L24 9.4z"/>
            </svg>
        </div>
        <div>
            <a href="/">{{ settings.SITENAME }}</a>
        </div>
    </header>
    <div class="about">
        {{ overlay.content | safe }}
    </div>
    {% if now %}
    <div class="now">
        <a href="?now={{ previous_week }}">previous week</a>
        {{ now }}
        <a href="?now={{ next_week }}">next week</a>
    </div>
    {% endif %}
    <div class="user">
    {% if request.user.is_authenticated %}
    <div>You are logged in as {{ request.user.username }}</div>
    <a href="/logout/">logout</a>
    {% else %}
    <a href="/login/">login</a>
    <br>
    <a href="/register/">register</a>
    {% endif %}
    </div>
</nav>
<style>
</style>
<script>
    document.querySelectorAll('.burger').forEach(burger => {
        burger.addEventListener('click', event => {
            event.preventDefault()
            event.stopPropagation()
            var overlay = document.querySelector('nav.overlay')
            if (overlay.classList.contains('active')) {
                overlay.classList.remove('active')
                document.body.style.overflow = ''
            } else {
                overlay.classList.add('active')
                document.body.style.overflow = 'hidden'
            }
        })
    })
</script>
{% endblock %}
{% block main %}
<div class="content">
    {% block content %}
    {% endblock %}
</div>
{% endblock %}
{% block end %}
{% endblock %}
{% block footer %}
{% endblock %}
    </body>
</html>