{% extends "orgapy/layout/skeleton.html" %}
{% load static %}

{% block title %}{% if document.title %}{{document.title}}{% else %}Untitled{% endif %}{% endblock title %}

{% block head %}
{{ block.super }}
<meta name="etag" content="{{ etag }}">
<link rel="stylesheet" href="{% static 'orgapy/dependencies/darcula.min.css' %}">
<script src="{% static 'orgapy/dependencies/highlight.min.js' %}"></script>
<link rel="stylesheet" href="{% static 'orgapy/dependencies/katex.min.css' %}" />
<script src="{% static 'orgapy/dependencies/showdown-katex.min.js' %}"></script>
<link rel="stylesheet" href="{% static 'orgapy/css/projects.css' %}" />
<link rel="stylesheet" href="{% static 'orgapy/css/notes.css' %}" />
<script src="{% static 'orgapy/js/notes.js' %}"></script>
<script src="{% static 'orgapy/js/dragrank.js' %}"></script>
<script src="{% static 'orgapy/js/projects.js' %}"></script>
{% endblock head %}

{% block column_main %}

<header class="card card--nobottom" style="margin-bottom: -.8rem">
    <h1 class="card-header">{% if document.title %}{{document.title}}{% else %}<i>Untitled</i>{% endif %}</h1>
    <div class="card-body">
        <div class="col">
            <div class="muted"><i class="ri-calendar-line"></i> Created on <time>{{ document.date_creation | date:"Y-m-d" }}</time>{% if document.date_creation.date != document.date_modification.date %}, edited on <time>{{ document.date_modification | date:"Y-m-d" }}</time>{% endif %}</div>
            <div><i class="ri-hashtag"></i> {% if document.categories.all %}{% for category in document.categories.all %}{% if not forloop.first %}, {% endif %}<a class="link-tenuous" href="{{ category.get_absolute_url }}">{{ category.name | title }}</a>{% endfor %}{% else %}<a href="{% url 'orgapy:category' name='uncategorized' %}">uncategorized</a>{% endif %}</div>
            {% if document.referenced_in.all %}<div><i class="ri-links-line"></i> {% for ref in document.referenced_in.all %}{% if not forloop.first %}, {% endif %}<a class="link-tenuous" href="{% url 'orgapy:document' ref.nonce %}"> {{ ref.title }}</a>{% endfor %}</div>{% endif %}
        </div>
    </div>
</header>

{% if not readonly %}
<div class="card-actions card-actions--sticky">
    <a href="?edit=1" class="button" title="Edit"><i class="ri-pencil-fill"></i><span>Edit</span></a>
    <a href="?raw=1" class="button" title="Download as Markdown"><i class="ri-download-line"></i><span>Raw</span></a>
    <form method="post" action="">
        {% csrf_token %}
        <input type="hidden" name="etag" value="{{ etag }}">
        {% if document.pinned %}
            <button class="active" type="submit" name="pinned" value="off"><i class="ri-bookmark-fill"></i><span>Unpin</span></button>
        {% else %}
            <button type="submit" name="pinned" value="on"><i class="ri-bookmark-fill"></i><span>Pin</span></button>
        {% endif %}
        {% if document.hidden %}
            <button class="active" type="submit" name="hidden" value="off"><i class="ri-eye-off-line"></i><span>Unhide</span></button>
        {% else %}
            <button type="submit" name="hidden" value="on"><i class="ri-eye-line"></i><span>Hide</span></button>
        {% endif %}
        {% if document.public %}
            <button class="active" type="submit" name="public" value="off"><i class="ri-lock-line"></i><span>Make private</span></button>
        {% else %}
            <button type="submit" name="public" value="on"><i class="ri-lock-unlock-line"></i><span>Make public</span></button>
        {% endif %}
    </form>
    <form method="post" action="">
        {% csrf_token %}
        <input type="hidden" name="etag" value="{{ etag }}">
        <input type="hidden" name="next" value="{% url 'orgapy:documents' %}">
        <button type="submit" name="deleted" value="on" class="button-danger submit-confirm" message="Do you want to delete '{{ document.title }}'?"><i class="ri-delete-bin-line"></i><span>Delete</span></button>
    </form>
</div>
{% endif %}

<div id="cardNote" class="card"><div class="card-note">{% if document.content %}{{ document.content | safe }}{% else %}This document has no content.{% endif %}</div></div>

{% endblock column_main %}

{% block column_side %}
<div class="card">
    <div class="card-body col">
        <b>Contents</b>
        <div id="toc" class="col"></div>
    </div>
</div>
{% if not readonly %}
<div class="col">
    <div class="row">
        <button id="buttonAddProject" class="button-primary" title="Add project"><i class="ri-add-line"></i> Create project</button>
        <a class="button button-primary {% if document.project_set.count == 0 %}disabled{% endif %}" href="{% url 'orgapy:projects' %}?document={{ document.nonce }}"><i class="ri-briefcase-line"></i> View all ({{ document.project_set.count }})</a>
    </div>
    {% if not document.readonly %}
    <div id="projectsContainer" class="col">
        {% for project in document.get_ongoing_projects %}
        <div class="project-container" href="{{ project.get_absolute_url }}"></div>
        {% endfor %}
    </div>
    {% endif %}
</div>
{% endif %}
{% endblock column_side %}

{% block body_scripts %}
<script>
markdownToHtml(".card-note", {fancy: true, useKatex: true, embed: true, fetchReferences: true, documentsUrl: "{% url 'orgapy:documents' %}"});
createToc(cardNote, document.querySelector("#toc"));
{% if not readonly %}
bindWidgets("{{ document.nonce }}");
for (const projectContainer of document.querySelectorAll(".project-container")) {
     bindProject(
        projectContainer,
        "{% url 'orgapy:suggestions' %}");
}
bindCreateProjectButton(buttonAddProject, projectsContainer, "{% url 'orgapy:projects' %}", "{% url 'orgapy:suggestions' %}", "{{ document.nonce }}");
{% endif %}
</script>
{% endblock body_scripts %}