ACORE/templates/pages/documents.html

{% load i18n %}
<div class="page-content">
    {% if people_picker_tree %}
    {{ people_picker_tree|json_script:"department-tree-data" }}
    {% endif %}

    <div style="margin-bottom:1rem;">
        <h1 style="font-size:1.25rem; font-weight:500; color:var(--color-foreground);">{% trans "Документы" %}</h1>
    </div>

    {% if sections %}
    <div style="display:flex; gap:2px; background:var(--color-muted); border-radius:var(--radius); padding:3px; width:fit-content; margin-bottom:0.75rem; flex-wrap:wrap;">
        {% for s in sections %}
        <button type="button" class="doc-section-btn{% if forloop.first %} doc-section-active{% endif %}" data-section="{{ s.key }}"
                onclick="docSectionSwitch('{{ s.key }}')"
                style="padding:0.3125rem 1rem; border-radius:calc(var(--radius) - 2px); font-size:0.8125rem; font-weight:500; border:none; cursor:pointer; {% if forloop.first %}background:var(--color-card); color:var(--color-foreground);{% else %}background:transparent; color:var(--color-muted-foreground);{% endif %}">{{ s.label }}</button>
        {% endfor %}
    </div>

    <div style="display:flex; gap:0.75rem; align-items:stretch; min-height:22rem;">
        <aside id="docs-org-tree" style="display:none; width:16rem; flex-shrink:0; background:var(--color-card); border-radius:0.75rem; border:1px solid var(--color-border); padding:0.65rem 0.5rem; overflow:auto; max-height:70vh;">
            <div style="font-size:0.6875rem; font-weight:600; text-transform:uppercase; letter-spacing:0.04em; color:var(--color-muted-foreground); padding:0 0.4rem 0.4rem;">{% trans "Департаменты" %}</div>
            {% if department_tree %}
            <ul class="docs-tree" style="list-style:none; margin:0; padding:0;">
                {% include "partials/documents-tree-nodes.html" with nodes=department_tree %}
            </ul>
            {% else %}
            <div style="font-size:0.75rem; color:var(--color-muted-foreground); padding:0.4rem;">{% trans "Немає відділів." %}</div>
            {% endif %}
        </aside>

        <div style="flex:1; min-width:0; background:var(--color-card); border-radius:0.75rem; border:1px solid var(--color-border); box-shadow:0 1px 2px rgb(0 0 0/0.05); padding:0.875rem 1rem;">
            <div id="documents-browser"
                 style="font-size:0.8125rem; color:var(--color-muted-foreground);"
                 hx-get="/documents/browse/?section={{ sections.0.key }}"
                 hx-trigger="load" hx-swap="innerHTML">
                {% trans "Загрузка…" %}
            </div>
            <div id="docs-acl-panel"></div>
        </div>
    </div>
    {% else %}
    <div style="background:var(--color-card); border-radius:0.75rem; border:1px solid var(--color-border); padding:1.5rem; font-size:0.875rem; color:var(--color-muted-foreground);">
        {% trans "Нет доступных разделов документов." %}
    </div>
    {% endif %}

</div>

<script>
    function docSectionSwitch(key) {
        document.querySelectorAll('.doc-section-btn').forEach(function (btn) {
            var active = btn.getAttribute('data-section') === key;
            btn.classList.toggle('doc-section-active', active);
            btn.style.background = active ? 'var(--color-card)' : 'transparent';
            btn.style.color = active ? 'var(--color-foreground)' : 'var(--color-muted-foreground)';
        });
        var tree = document.getElementById('docs-org-tree');
        if (tree) tree.style.display = (key === 'org') ? 'block' : 'none';
        document.getElementById('docs-acl-panel').innerHTML = '';
        htmx.ajax('GET', '/documents/browse/?section=' + encodeURIComponent(key),
                  { target: '#documents-browser', swap: 'innerHTML' });
    }
    function docOpenDept(deptId) {
        document.querySelectorAll('.docs-tree-link').forEach(function (a) {
            a.style.fontWeight = (a.getAttribute('data-dept') === String(deptId)) ? '600' : '400';
            a.style.color = (a.getAttribute('data-dept') === String(deptId))
                ? 'var(--color-primary)' : 'var(--color-foreground)';
        });
        document.getElementById('docs-acl-panel').innerHTML = '';
        htmx.ajax('GET', '/documents/browse/?section=org&dept=' + encodeURIComponent(deptId),
                  { target: '#documents-browser', swap: 'innerHTML' });
    }
    (function () {
        var first = document.querySelector('.doc-section-btn.doc-section-active');
        if (first && first.getAttribute('data-section') === 'org') {
            var tree = document.getElementById('docs-org-tree');
            if (tree) tree.style.display = 'block';
        }
        document.body.addEventListener('htmx:afterSwap', function (ev) {
            if (ev.detail && ev.detail.target && ev.detail.target.id === 'docs-acl-panel') {
                if (typeof initPeoplePickers === 'function') initPeoplePickers(ev.detail.target);
                if (typeof initSearchableSelects === 'function') initSearchableSelects(ev.detail.target);
            }
        });
    })();
</script>