{% load i18n %}
{% with dept_q=section.department_id %}
{% if message %}
<div style="margin-bottom:0.75rem; padding:0.5rem 0.75rem; border-radius:0.5rem; font-size:0.8125rem;
            {% if message_type == 'success' %}color:#137333; background:rgba(19,115,51,0.1); border:1px solid rgba(19,115,51,0.25);
            {% else %}color:#d63333; background:rgba(214,51,51,0.1); border:1px solid rgba(214,51,51,0.25);{% endif %}">
    {{ message }}
</div>
{% endif %}

{% if crumbs or section.department_name or section.key == 'mine' %}
<div style="display:flex; align-items:center; gap:0.375rem; flex-wrap:wrap; margin-bottom:0.75rem; font-size:0.8125rem;">
    <a href="#" hx-get="/documents/browse/?section={{ section.key }}{% if dept_q and section.key == 'org' %}&dept={{ dept_q }}{% endif %}"
       hx-target="#documents-browser" hx-swap="innerHTML"
       style="color:var(--color-primary); text-decoration:none; font-weight:500;">{% if section.key == 'org' %}{% trans "Структура" %}{% elif section.key == 'mine' %}{% trans "Мой отдел" %}{% else %}{{ section.label }}{% endif %}</a>
    {% if section.key == 'org' and section.department_name %}
    <span style="color:var(--color-muted-foreground);">/</span>
    <a href="#" hx-get="/documents/browse/?section=org&dept={{ dept_q }}"
       hx-target="#documents-browser" hx-swap="innerHTML"
       style="color:var(--color-primary); text-decoration:none;">{{ section.department_name }}</a>
    {% elif section.key == 'mine' and section.department_name and crumbs %}
    <span style="color:var(--color-muted-foreground);">/</span>
    <a href="#" hx-get="/documents/browse/?section=mine"
       hx-target="#documents-browser" hx-swap="innerHTML"
       style="color:var(--color-primary); text-decoration:none;">{{ section.department_name }}</a>
    {% endif %}
    {% for c in crumbs %}
    <span style="color:var(--color-muted-foreground);">/</span>
    {% if forloop.last %}
    <span style="color:var(--color-foreground);">{{ c.name }}</span>
    {% else %}
    <a href="#" hx-get="/documents/browse/?section={{ section.key }}{% if dept_q and section.key == 'org' %}&dept={{ dept_q }}{% endif %}&path={{ c.path|urlencode }}"
       hx-target="#documents-browser" hx-swap="innerHTML"
       style="color:var(--color-primary); text-decoration:none;">{{ c.name }}</a>
    {% endif %}
    {% endfor %}
    {% if can_manage_acl and section.key == 'org' and dept_q or can_manage_acl and section.key == 'mine' and dept_q or can_manage_acl and section.key != 'org' and section.key != 'mine' %}
    <span style="flex:1;"></span>
    <button type="button" class="nc-file-act"
            hx-get="/documents/acl/?section={{ section.key }}{% if dept_q %}&dept={{ dept_q }}{% endif %}&path={{ sub|urlencode }}"
            hx-target="#docs-acl-panel" hx-swap="innerHTML">
        {% trans "Права" %}
    </button>
    {% endif %}
</div>
{% elif can_manage_acl %}
<div style="display:flex; justify-content:flex-end; margin-bottom:0.5rem;">
    <button type="button" class="nc-file-act"
            hx-get="/documents/acl/?section={{ section.key }}{% if dept_q %}&dept={{ dept_q }}{% endif %}&path={{ sub|urlencode }}"
            hx-target="#docs-acl-panel" hx-swap="innerHTML">
        {% trans "Права" %}
    </button>
</div>
{% endif %}

{% if error == 'not_configured' %}
<div style="padding:0.5rem 0; font-size:0.8125rem; color:var(--color-muted-foreground);">
    {% trans "Файловое хранилище пока не настроено." %}
</div>
{% elif error == 'access_denied' %}
<div style="padding:0.5rem 0; font-size:0.8125rem; color:#d63333;">
    {% trans "Немає доступу до цього каталогу. Зверніться до адміністратора для видачі прав." %}
</div>
{% elif error %}
<div style="padding:0.5rem 0; font-size:0.8125rem; color:#d63333;">
    {% trans "Не удалось получить список документов." %}
</div>
{% else %}
<div class="{% if can_edit_here %}nc-browser-drop{% endif %}" {% if can_edit_here %}data-nc-upload="1"{% endif %}>

    {% if section.key == 'mine' and section.department_name and not crumbs %}
    <div style="font-size:0.75rem; font-weight:600; text-transform:uppercase; letter-spacing:0.04em; color:var(--color-muted-foreground); margin-bottom:0.5rem;">
        {% trans "Документы отдела" %}: {{ section.department_name }}
    </div>
    {% endif %}

    {% if files %}
    <div style="border:1px solid var(--color-border); border-radius:0.5rem; overflow:hidden; margin-bottom:0.75rem;">
        <table style="width:100%; border-collapse:collapse; font-size:0.8125rem;">
            <tbody>
            {% for f in files %}
            <tr style="border-bottom:1px solid var(--color-border);" class="tr-hover">
                <td style="padding:0.45rem 0.75rem;">
                    {% if f.is_shared_target %}
                        {% include "partials/documents-share-link.html" with f=f onlyoffice_ready=onlyoffice_ready %}
                    {% elif f.is_virtual_dept %}
                    <a href="#" onclick="docOpenDept({{ f.dept_id }}); return false;"
                       style="color:var(--color-foreground); text-decoration:none; font-weight:500; display:inline-flex; align-items:center; gap:0.5rem;">
                        <span class="nc-file-ico nc-file-ico-folder" aria-hidden="true"></span>{{ f.name }}
                    </a>
                    {% elif f.is_dir %}
                    <a href="#" hx-get="/documents/browse/?section={{ section.key }}{% if dept_q and section.key == 'org' %}&dept={{ dept_q }}{% endif %}&path={{ f.path|urlencode }}"
                       hx-target="#documents-browser" hx-swap="innerHTML"
                       style="color:var(--color-foreground); text-decoration:none; font-weight:500; display:inline-flex; align-items:center; gap:0.5rem;">
                        <span class="nc-file-ico nc-file-ico-folder" aria-hidden="true"></span>{{ f.name }}
                    </a>
                    {% else %}
                    <span style="display:inline-flex; align-items:center; gap:0.5rem; flex-wrap:wrap;">
                        <span class="nc-file-ico nc-file-ico-file" aria-hidden="true"></span>
                        {% if f.is_office and onlyoffice_ready %}
                        <a href="/documents/edit/?section={{ section.key }}{% if dept_q and section.key == 'org' %}&dept={{ dept_q }}{% endif %}&path={{ sub|urlencode }}&name={{ f.name|urlencode }}"
                           style="color:var(--color-primary); text-decoration:none; font-weight:500;">{{ f.name }}</a>
                        <a href="/documents/download/?section={{ section.key }}{% if dept_q and section.key == 'org' %}&dept={{ dept_q }}{% endif %}&path={{ sub|urlencode }}&name={{ f.name|urlencode }}"
                           style="color:var(--color-muted-foreground); font-size:0.75rem; text-decoration:none;">{% trans "скачать" %}</a>
                        {% elif f.is_previewable %}
                        <a href="/documents/download/?section={{ section.key }}{% if dept_q and section.key == 'org' %}&dept={{ dept_q }}{% endif %}&path={{ sub|urlencode }}&name={{ f.name|urlencode }}&inline=1"
                           data-doc-kind="{{ f.preview_kind }}"
                           data-doc-title="{{ f.name }}"
                           data-doc-full="/documents/preview/?section={{ section.key }}{% if dept_q and section.key == 'org' %}&dept={{ dept_q }}{% endif %}&path={{ sub|urlencode }}&name={{ f.name|urlencode }}"
                           onclick="return docPreviewOpen(this);"
                           style="color:var(--color-primary); text-decoration:none; font-weight:500;">{{ f.name }}</a>
                        <a href="/documents/download/?section={{ section.key }}{% if dept_q and section.key == 'org' %}&dept={{ dept_q }}{% endif %}&path={{ sub|urlencode }}&name={{ f.name|urlencode }}"
                           style="color:var(--color-muted-foreground); font-size:0.75rem; text-decoration:none;">{% trans "скачать" %}</a>
                        {% else %}
                        <a href="/documents/download/?section={{ section.key }}{% if dept_q and section.key == 'org' %}&dept={{ dept_q }}{% endif %}&path={{ sub|urlencode }}&name={{ f.name|urlencode }}"
                           style="color:var(--color-primary); text-decoration:none;">{{ f.name }}</a>
                        {% endif %}
                        {% if can_manage_acl or f.can_edit %}
                        <button type="button" class="nc-file-act" style="font-size:0.7rem;"
                                hx-get="/documents/acl/?section={{ section.key }}{% if dept_q %}&dept={{ dept_q }}{% endif %}&path={{ sub|urlencode }}&name={{ f.name|urlencode }}"
                                hx-target="#docs-acl-panel" hx-swap="innerHTML">{% trans "права" %}</button>
                        {% endif %}
                    </span>
                    {% endif %}
                </td>
                <td style="padding:0.45rem 0.75rem; text-align:right; color:var(--color-muted-foreground); white-space:nowrap;">
                    {% if f.size is not None %}{{ f.size|filesizeformat }}{% endif %}
                    {% if f.can_edit %}<span style="margin-left:0.35rem; font-size:0.7rem; color:var(--color-muted-foreground);">edit</span>
                    {% elif f.can_view %}<span style="margin-left:0.35rem; font-size:0.7rem; color:var(--color-muted-foreground);">view</span>{% endif %}
                </td>
                {% if can_edit_here and not f.is_virtual_dept and not f.is_shared_target %}
                <td style="padding:0.45rem 0.75rem; text-align:right; white-space:nowrap; width:1%;">
                    {% if f.can_edit %}
                    <form method="post" action="/documents/rename/"
                          hx-post="/documents/rename/" hx-target="#documents-browser" hx-swap="innerHTML"
                          hx-prompt="{% trans 'Новое имя' %}" style="display:inline;">
                        {% csrf_token %}
                        <input type="hidden" name="section" value="{{ section.key }}">
                        {% if dept_q and section.key == 'org' %}<input type="hidden" name="dept" value="{{ dept_q }}">{% endif %}
                        <input type="hidden" name="path" value="{{ sub }}">
                        <input type="hidden" name="name" value="{{ f.name }}">
                        <button type="submit" class="nc-file-act">{% trans "Переименовать" %}</button>
                    </form>
                    <form method="post" action="/documents/delete/"
                          hx-post="/documents/delete/" hx-target="#documents-browser" hx-swap="innerHTML"
                          hx-confirm="{% if f.is_dir %}{% trans 'Удалить папку и всё содержимое?' %}{% else %}{% trans 'Удалить файл?' %}{% endif %}"
                          style="display:inline; margin-left:0.375rem;">
                        {% csrf_token %}
                        <input type="hidden" name="section" value="{{ section.key }}">
                        {% if dept_q and section.key == 'org' %}<input type="hidden" name="dept" value="{{ dept_q }}">{% endif %}
                        <input type="hidden" name="path" value="{{ sub }}">
                        <input type="hidden" name="name" value="{{ f.name }}">
                        <button type="submit" class="nc-file-act nc-file-act-danger">{% trans "Удалить" %}</button>
                    </form>
                    {% endif %}
                </td>
                {% endif %}
            </tr>
            {% endfor %}
            </tbody>
        </table>
    </div>
    {% elif not files %}
    <div style="padding:0.35rem 0 0.65rem; font-size:0.8125rem; color:var(--color-muted-foreground);">
        {% if section.key == 'mine' %}{% trans "В папке отдела пока нет файлов." %}{% else %}{% trans "В этой папке пока нет файлов." %}{% endif %}
    </div>
    {% endif %}

    {% if share_entries %}
    <div style="font-size:0.75rem; font-weight:600; text-transform:uppercase; letter-spacing:0.04em; color:var(--color-muted-foreground); margin:1rem 0 0.5rem;">
        {% trans "Дополнительно доступно" %}
    </div>
    <div style="border:1px solid var(--color-border); border-radius:0.5rem; overflow:hidden; margin-bottom:0.75rem;">
        <table style="width:100%; border-collapse:collapse; font-size:0.8125rem;">
            <tbody>
            {% for f in share_entries %}
            <tr style="border-bottom:1px solid var(--color-border);" class="tr-hover">
                <td style="padding:0.45rem 0.75rem;">
                    {% include "partials/documents-share-link.html" with f=f onlyoffice_ready=onlyoffice_ready %}
                </td>
                <td style="padding:0.45rem 0.75rem; text-align:right; color:var(--color-muted-foreground); white-space:nowrap;">
                    {% if f.can_edit %}<span style="font-size:0.7rem;">edit</span>
                    {% else %}<span style="font-size:0.7rem;">view</span>{% endif %}
                </td>
            </tr>
            {% endfor %}
            </tbody>
        </table>
    </div>
    {% endif %}

    {% if can_create_here %}
    <div class="nc-file-toolbar">
        <form method="post" action="/documents/upload/"
              hx-post="/documents/upload/" hx-target="#documents-browser" hx-swap="innerHTML"
              hx-encoding="multipart/form-data" enctype="multipart/form-data"
              class="nc-drop">
            {% csrf_token %}
            <input type="hidden" name="section" value="{{ section.key }}">
            {% if dept_q and section.key == 'org' %}<input type="hidden" name="dept" value="{{ dept_q }}">{% endif %}
            <input type="hidden" name="path" value="{{ sub }}">
            <label class="nc-drop-label">
                <input type="file" name="file" class="nc-drop-input" multiple>
                <span class="nc-drop-text">
                    <strong class="nc-drop-title">{% trans "Загрузить файл" %}</strong>
                    <span class="nc-drop-name">{% trans "или перетащите сюда / в список" %}</span>
                </span>
            </label>
            <button type="submit" class="btn btn-primary" style="font-size:0.8125rem; white-space:nowrap;">{% trans "Загрузить" %}</button>
        </form>
        <form method="post" action="/documents/create/"
              hx-post="/documents/create/" hx-target="#documents-browser" hx-swap="innerHTML"
              class="nc-mkdir">
            {% csrf_token %}
            <input type="hidden" name="section" value="{{ section.key }}">
            {% if dept_q and section.key == 'org' %}<input type="hidden" name="dept" value="{{ dept_q }}">{% endif %}
            <input type="hidden" name="path" value="{{ sub }}">
            <input type="text" name="name" class="input" maxlength="120"
                   placeholder="{% trans 'Имя' %}" style="width:11rem; max-width:40vw; font-size:0.8125rem;">
            <select name="type" class="input" style="width:auto; font-size:0.8125rem;">
                <option value="folder">{% trans "Папка" %}</option>
                <option value="docx">{% trans "Word" %}</option>
                <option value="xlsx">{% trans "Excel" %}</option>
            </select>
            <button type="submit" class="btn btn-secondary" style="font-size:0.8125rem; white-space:nowrap;">{% trans "Создать" %}</button>
        </form>
    </div>
    {% endif %}
</div>
{% endif %}
{% endwith %}