{% extends "app/base.html" %}

{% block head %}

{% load static %}
<link rel="stylesheet" href="{% static 'app/output.css' %}">
<link rel="stylesheet" href="{% static 'app/main_styles.css' %}">
<link rel="stylesheet" href="{% static 'app/chart_animations.css' %}">
<link rel="stylesheet" href="{% static 'app/spinner.css' %}">
<link rel="stylesheet" href="{% static 'app/notifications.css' %}">
<script defer src="{% static 'app/htmxIncludeChartDimensions.js' %}"></script>

{% endblock %}

{% block content %}

<main class="flex flex-row">

    {% if titles %}
    <div id="sidebar-container" class="fixed pt-5 hidden lg:block">
        <div id="sidebar" 
        class="flex flex-col p-5 pe-12 m-5 mt-12
        bg-surface-2-light dark:bg-surface-dark
        text-text-light dark:text-text-dark">
            {% for title in titles %}

                <a class="text-{{ title.navbar_text_size }} hover:underline
                {% if title.navbar_margin_y %}my-{{ title.navbar_margin_y }}{% endif %}
                {% if title.navbar_margin_start %}ms-{{ title.navbar_margin_start }}{% endif %}" 
                href="#{{ title.id }}"
                >
                    {{ title.title }}
                </a>
            
            {% endfor %}
        </div>

    </div>
    {% endif %}
    
    <div class="hidden lg:block fixed px-5 py-8 left-0 bottom-0">
        {% if user.is_authenticated %}
            <p>
                Logged in as: {{ user.username }}
            </p>
            <p>
                <a href="{% url 'logout-view' %}"
                class="underline text-blue-light dark:text-blue-dark">Logout</a>
            </p>
        {% else %}
            <a href="{% url 'login-page' %}"
            class="underline text-blue-light dark:text-blue-dark">
                Log In
            </a>
        {% endif %}
    </div>
    

    <div class="flex-3 hidden lg:block"></div>
    <div class="grow mx-5" style="max-width: 700px;">
        {{ content }}
    </div>
    <div class="flex-2 hidden lg:block"></div>
    {% include "app/notifications.html" %}
</main>

{% endblock %}