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

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

{% block head %}
{{ block.super }}
<script src="{% static 'orgapy/js/sheets.js' %}"></script>
<link rel="stylesheet" href="{% static 'orgapy/css/sheets.css' %}" />
{% endblock head %}

{% block column_main %}
<div class="sheet" sheet-nonce="{{document.nonce}}">
    <div class="sheet-toolbar">
        <span class="sheet-toolbar-primary">{% if not readonly %}
            <a class="link-hidden" href="{% url 'orgapy:documents' %}"><i class="ri-table-line"></i></a>
            <span class="sheet-toolbar-buttons dropdown row">
                <a class="button" href="?edit=1"><i class="ri-pencil-fill"></i></a>
                <button title="Save" class="sheet-button-save"><i class="ri-save-line"></i></button>
                <a class="button dropdown-toggle" title="More" tabindex="0"><i class="ri-more-fill"></i></a>
                <ul class="menu">
                    <li class="menu-item"><button title="Script" class="sheet-button-script">ℱ Script</button></li>
                    <li class="menu-item"><button title="Toggle shrink" class="sheet-button-shrink"><i class="ri-fullscreen-exit-line"></i> Shrink</button></li>
                    <li class="menu-item"><button title="Upload TSV" class="sheet-button-upload"><i class="ri-upload-line"></i> Upload TSV</button></li>
                    <li class="menu-item"><button title="Download as TSV" class="sheet-button-download"><i class="ri-download-line"></i> Download TSV</button></li>
                    <li class="menu-item"><button title="Download as TSV" class="sheet-button-copy"><i class="ri-file-copy-2-line"></i> Copy as Markdown</button></li>
                    <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>
                </ul>
            </span>
        {% endif %}</span>
        <span class="sheet-toolbar-secondary">
            <span class="sheet-title">{% if document.title %}{{document.title}}{% else %}<i>Untitled</i>{% endif %}</span>
            {% if document.categories.all %}
                {% for category in document.categories.all %}
                <a class="link-tenuous" href="{{ category.get_absolute_url }}">#{{category.name}}</a>
                {% endfor%}
            {% else %}
                <a class="link-tenuous" href="{% url 'orgapy:category' name='uncategorized' %}">uncategorized</a>
            {% endif %}
            {% if not readonly %}{% for ref in document.referenced_in.all %}<a class="reference label" href="{% url 'orgapy:document' ref.nonce %}"><i class="ri-links-line"></i> {{ ref.title }}</a>{% endfor %}{% endif %}
            {% if document.subtitle %}
            <span class="markdown-inline">{{document.subtitle | safe}}</span>
            {% endif %}
        </span>
    </div>
    <div class="sheet-head"></div>
    <div class="sheet-body"></div>
</div>

<script>
markdownToHtml(".markdown-inline", {fancy: false});
initializeSheets({% if readonly %}true{% else %}false{% endif %});
</script>
{% endblock %}