{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <title>{% block title %}Orgapy{% endblock title %}</title>
    {% block head %}
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <link rel="icon" href="{% static 'orgapy/logo/32.png' %}" sizes="32x32" />
    <link rel="icon" href="{% static 'orgapy/logo/48.png' %}" sizes="48x48" />
    <link rel="icon" href="{% static 'orgapy/logo/96.png' %}" sizes="96x96" />
    <link rel="icon" href="{% static 'orgapy/logo/144.png' %}" sizes="144x144" />
    <link rel="stylesheet" href="{% static 'orgapy/remixicon/remixicon.css' %}" />
    <script src="{% static 'orgapy/dependencies/showdown.min.js' %}"></script>
    <link rel="stylesheet" href="{% static 'orgapy/css/orgapy.css' %}" />
    <script src="{% static 'orgapy/js/orgapy.js' %}"></script>
    {% if request.user.is_authenticated %}<script>const CSRF_TOKEN = "{{csrf_token}}";</script>{% endif %}
    {% endblock head %}
</head>
<body class="{% block body_class %}{% endblock %}">
{% block body %}
<div class="columns">
<div class="column-spacer"></div>
<main class="column column-main">
<nav class="navbar">
<div class="row">
    <a href="{% url 'orgapy:home' %}" class="button {% if active == "home" %}active{% endif %}" tabindex="2"><i class="ri-home-line"></i> Home</a>
    <a href="{% url 'orgapy:documents' %}" class="button {% if active == "documents" %}active{% endif %}" tabindex="2"><i class="ri-file-copy-2-line"></i> Documents</a>                    
</div>
<div class="row">
{% if request.user.is_authenticated %}
<form id="navbarSearchForm" class="search" action="{% url 'orgapy:documents' %}" method="get">
    <div class="search-bar">
        <input id="navbarSearchInput" class="search-input" autocomplete="off" type="search" name="query" tabindex="1" />
        <i class="search-icon ri-close-line"></i>
        <button id="navbarSubmitSearchFormButton" class="search-button" tabindex="-1"><i class="ri-search-line"></i></button>
    </div>
    <ul class="search-suggestions menu"></ul>
</form>
<button id="navbarSearchButton"><i class="ri-search-line"></i></button>
<script>
bindSearch(navbarSearchForm, "{% url 'orgapy:suggestions' %}", {});
bindSearchButton(navbarSearchForm, navbarSearchButton);
navbarSubmitSearchFormButton.onclick = (event) => {
    if (navbarSearchInput.value.trim() == "") {
        navbarSearchInput.focus();
        event.preventDefault();
    }
}
</script>
{% endif %}
<button popovertarget="main-menu"><i class="ri-menu-line"></i></button>
</div>
</nav>
{% block column_main %}{% endblock column_main %}
</main>
<div class="column-side"><div class="column column-side-sticky">{% block column_side %}{% endblock column_side %}</div></div>
</div>

<ul id="main-menu" popover class="menu">
{% block menu %}
{% if request.user.is_authenticated %}
<li class="menu-item"><button popovertarget="create-menu"><i class="ri-add-line"></i> Create</button></li>
<hr>
<li class="menu-item"><a href="{% url 'orgapy:calendars' %}" tabindex="3"><i class="ri-calendar-line"></i> Calendars</a></li>
<li class="menu-item"><a href="{% url 'orgapy:groceries' %}" tabindex="3"><i class="ri-shopping-basket-line"></i> Groceries</a></li>
<li class="menu-item"><a href="{% url 'orgapy:mood' %}" tabindex="3"><i class="ri-emotion-line"></i> Mood</a></li>
<li class="menu-item"><a href="{% url 'orgapy:objectives' %}" tabindex="3"><i class="ri-focus-2-line"></i> Objectives</a></li>
<li class="menu-item"><a href="{% url 'orgapy:progress' %}" tabindex="3"><i class="ri-bar-chart-2-line"></i> Progress</a></li>
<li class="menu-item"><a href="{% url 'orgapy:projects' %}" tabindex="3"><i class="ri-briefcase-line"></i> Projects</a></li>
<li class="menu-item"><a href="{% url 'orgapy:settings' %}?ref={{ request.get_full_path | urlencode }}" tabindex="3"><i class="ri-settings-2-line"></i> Settings</a></li>                            
<li class="menu-item"><a href="{% url 'orgapy:tags' %}" tabindex="3"><i class="ri-hashtag"></i> Tags</a></li>
<li class="menu-item"><a href="{% url 'orgapy:tasks' %}" tabindex="3"><i class="ri-task-line"></i> Tasks</a></li>
<li class="menu-item"><a href="{% url 'orgapy:trash' %}" tabindex="3"><i class="ri-delete-bin-line"></i> Trash</a></li>
<hr>
{% endif %}
<li class="menu-item"><a href="{% url 'orgapy:about' %}" tabindex="3"><i class="ri-information-line"></i> About</a></li>
{% endblock menu %}
</ul>
<ul id="create-menu" popover class="menu menu-secondary">
    {% block menu_create %}
    <form id="createDocForm" method="post" action="{% url 'orgapy:documents' %}">
        {% csrf_token %}
        <input name="title" type="hidden" />
        <li class="menu-item"><button type="submit" name="type" value="note"><i class="ri-sticky-note-line"></i> Note</button></li>
        <li class="menu-item"><button type="submit" name="type" value="sheet"><i class="ri-table-line"></i> Sheet</button></li>
        <li class="menu-item"><button type="submit" name="type" value="map"><i class="ri-map-2-line"></i> Map</button></li>
    </form>
    <script>bindCreateForm(createDocForm)</script>
    {% endblock menu_create %}
</ul>
{% endblock body %}
<script>
document.querySelectorAll(".link-confirm").forEach(bindLinkConfirm);
document.querySelectorAll(".submit-confirm").forEach(bindSubmitConfirm);
</script>
{% block body_scripts %}{% endblock body_scripts %}
</body>
</html>
