{% extends "base.html" %}
{% load i18n documents_tags %}

{% block head %}
    {{ block.super }}
    <style>
        :root { --nav-h: 0px; }
        /* Sidebar: visible dans le viewport, pas plus haute que l'espace dispo */
        .sidebar{
            height: calc(100dvh - var(--nav-h));
            overflow-y: auto;
            overflow-x: auto;
            scrollbar-width: thin;            /* Firefox */
            scrollbar-color: rgba(0,0,0,.35) transparent;
        }
        @media (min-width: 768px) {
            .sidebar {
                width: 300px;
                flex-shrink: 0;
            }
        }
        /* Chrome/Edge/Safari */
        .sidebar::-webkit-scrollbar{ height: 10px; }
        .sidebar::-webkit-scrollbar-thumb{
            background-color: rgba(0,0,0,.35);
            border-radius: 8px;
            border: 2px solid transparent;
        }
        /* garantit que le contenu peut dépasser en largeur */
        .sidebar .nav{ min-width: max-content; }

        .folder-tree-toggle {
            border: none;
            background: transparent;
            padding: 0;
            line-height: 1;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 1.5rem;
            height: 1.5rem;
            color: inherit;
        }

        .folder-tree-toggle:focus {
            outline: none;
            box-shadow: none;
        }

        .folder-tree-toggle .bi-chevron-right {
            transition: transform 0.2s ease-in-out;
        }

        .folder-tree-toggle[aria-expanded="true"] .bi-chevron-right {
            transform: rotate(90deg);
        }
    </style>
{% endblock head %}

{% block sidebar %}
    <a href="{% url 'documents:list' %}"
       class="nav-link d-flex align-items-center p-2 {% if request.path == '/documents/' and not request.GET.folder and not active_folder_slug %}active{% endif %}">
        <i class="bi bi-collection" data-bs-toggle="tooltip" data-bs-placement="right" title="{% translate 'All documents' %}"></i>
        <span class="ms-2 text d-none d-md-inline">{% translate "All documents" %}</span>
    </a>

    <hr>


    {% render_folder_tree folder_tree active_folder_slug active_trail_slugs %}
{% endblock sidebar %}



{% block script %}
    
<script>
(function(){
  const nav = document.querySelector('.navbar');
  function setNavH(){
    document.documentElement.style.setProperty('--nav-h', (nav?.offsetHeight || 0) + 'px');
  }
  setNavH();
  addEventListener('resize', setNavH);
})();
</script>

{% endblock script %}