{# Shared file-tree partial used by the content, plugin and theme editors.
   Renders a nested, collapsible file tree from a list of nodes produced by
   scanEditorFiles()/scanContentFiles()/scanPluginFiles()/scanThemeFiles().

   Required variables (passed via include with ... context):
     - files:           array of nodes [{name, path, is_dir, extension, size, modified, children}]
     - relFile:         currently selected relative file path (for active highlight + auto-expand)
     - editableExts:    array of editable extensions (shown as .EXT badge)
     - treeIdPrefix:    prefix for collapse element ids (e.g. 'content-tree', 'plugin-tree', 'theme-tree')
     - treeRouteBase:   admin route base used to build file links, e.g. '/admin/content'
     - treeRouteParams: extra query string for file links, e.g. 'plugin=MyPlugin&' or 'theme=default&' or '' (content)
     - treeMoveRoute:   admin route for file move, e.g. '/admin/plugins-file-move'
     - treeMoveParams:  extra query string for move link, e.g. 'plugin=X&' or ''
     - treeDirActions:  boolean; show per-folder new-file/new-dir/rename buttons (default true)
     - treeFileMove:    boolean; show per-file move/rename pencil button (default true)
     - treeHideActionsFor: array of relative paths where move/delete actions are hidden (e.g. ['theme.json'])
     - treeDirSelectRoute:  if set, folder names are links to ?dir=<path> (map-detail pane)
     - treeDirRenameRoute:   if set, show a rename pencil per folder
     - treeDeleteBase:  POST URL for file deletion (scope-specific)
     - treeScope:       'content' | 'theme' | 'plugin' (for tree-interactions.js)
     - treeMoveUrl:     AJAX endpoint for drag-drop move (e.g. '/admin/tree-move')
     - treeScopeParam:  extra query param string (e.g. 'plugin=MyPlugin&' or 'theme=default&' or '')

   Icon maps are chosen automatically from the node extension. #}
{% macro tree(nodes, opts) %}
{% import _self as macros %}
<ul class="editor-tree">
    {% for n in nodes %}
        {# Een bestand is alleen actief wanneer er geen map geselecteerd is
           (een map-selectie opent het map-detail paneel, geen bestand). #}
        {% set isActive = n.path == opts.relFile and opts.selectedDir|default('') == '' %}
        {# Markeer de oudermap "bevat actieve selectie" voor auto-uitklappen:
           bij een geselecteerd bestand OF een geselecteerde (sub)map. #}
        {% set activePath = opts.selectedDir|default('') != '' ? opts.selectedDir : opts.relFile %}
        {% set containsActive = n.is_dir and activePath != '' and activePath starts with (n.path ~ '/') %}
        {% if n.is_dir %}
            {% set icon = 'bi-folder-fill text-warning' %}
        {% elseif n.extension == 'md' %}
            {% set icon = 'bi-file-text text-primary' %}
        {% elseif n.extension == 'php' %}
            {% set icon = 'bi-file-code text-success' %}
        {% elseif n.extension == 'twig' %}
            {% set icon = 'bi-filetype-tfn text-info' %}
        {% elseif n.extension == 'json' %}
            {% set icon = 'bi-filetype-json text-secondary' %}
        {% elseif n.extension in ['css','scss'] %}
            {% set icon = 'bi-filetype-css text-info' %}
        {% elseif n.extension == 'js' %}
            {% set icon = 'bi-filetype-js text-warning' %}
        {% elseif n.extension == 'html' %}
            {% set icon = 'bi-file-earmark text-info' %}
        {% elseif n.extension in ['jpg','jpeg','png','gif','webp','svg'] %}
            {% set icon = 'bi-file-image text-info' %}
        {% elseif n.extension == 'pdf' %}
            {% set icon = 'bi-file-pdf text-danger' %}
        {% else %}
            {% set icon = 'bi-file text-muted' %}
        {% endif %}
        <li data-path="{{ n.path }}" data-isdir="{{ n.is_dir ? '1' : '0' }}">
            {% if n.is_dir %}
                {% set collapseId = opts.treeIdPrefix ~ '-' ~ n.path|replace({'/':'-','.':'-'}) %}
                <div class="tree-dir-row" data-dir="{{ n.path }}">
                    {# Chevron: expand/collapse only (zonder navigatie) #}
                    <button type="button" class="tree-chevron-btn" data-bs-toggle="collapse" data-bs-target="#{{ collapseId }}" aria-expanded="{{ containsActive ? 'true' : 'false' }}" title="{{ ta.expand_collapse|default('Uitklappen/inklappen') }}" aria-label="{{ ta.expand_collapse|default('Uitklappen/inklappen') }}">
                        <i class="bi {{ containsActive ? 'bi-chevron-down' : 'bi-chevron-right' }} tree-chevron"></i>
                    </button>
                    {# Mapnaam: selecteer de map. Voor content gaat dit naar ?dir= (map-detail paneel rechts);
                       voor plugins/themes is het een niet-navigerende toggle (legacy gedrag). #}
                    {% if opts.treeDirSelectRoute %}
                    <a href="{{ opts.treeDirSelectRoute }}{% if '?' in opts.treeDirSelectRoute %}&{% else %}?{% endif %}dir={{ n.path|url_encode }}" class="tree-link tree-name {{ containsActive ? 'is-active' : '' }} {{ opts.selectedDir == n.path ? 'is-selected' : '' }}" title="{{ n.path }}">
                        <i class="bi {{ icon }}"></i>
                        <span class="text-truncate">{{ n.name }}</span>
                    </a>
                    {% else %}
                    <button type="button" class="tree-link tree-toggle btn-toggle {{ containsActive ? '' : 'collapsed' }}" data-bs-toggle="collapse" data-bs-target="#{{ collapseId }}" aria-expanded="{{ containsActive ? 'true' : 'false' }}" title="{{ n.path }}">
                        <i class="bi {{ icon }}"></i>
                        <span class="text-truncate">{{ n.name }}</span>
                    </button>
                    {% endif %}
                    {% if opts.treeDirActions %}
                    <span class="tree-dir-actions">
                        <button type="button" class="btn btn-link btn-sm p-0 tree-newfile-btn" title="{{ ta.new_file|default('Nieuw bestand hier') }}" aria-label="{{ ta.new_file|default('Nieuw bestand') }}" data-bs-toggle="modal" data-bs-target="{{ opts.newFileModalId|default('#newFileModal') }}" data-in-dir="{{ n.path }}">
                            <i class="bi bi-file-earmark-plus"></i>
                        </button>
                        {% if opts.newDirModalId is defined and opts.newDirModalId %}
                        <button type="button" class="btn btn-link btn-sm p-0 tree-newdir-btn" title="{{ ta.new_folder|default('Nieuwe map') }}" aria-label="{{ ta.new_folder|default('Nieuwe map') }}" data-bs-toggle="modal" data-bs-target="{{ opts.newDirModalId }}" data-in-dir="{{ n.path }}">
                            <i class="bi bi-folder-plus"></i>
                        </button>
                        {% endif %}
                        {% if opts.treeDirRenameRoute %}
                        <a href="{{ opts.treeDirRenameRoute }}{% if '?' in opts.treeDirRenameRoute %}&{% else %}?{% endif %}dir={{ n.path|url_encode }}" class="tree-rename-btn" title="{{ ta.rename|default('Hernoemen') }}" aria-label="{{ ta.rename|default('Hernoemen') }}">
                            <i class="bi bi-pencil"></i>
                        </a>
                        {% endif %}
                    </span>
                    {% endif %}
                </div>
                <div id="{{ collapseId }}"
                     class="tree-collapse collapse {{ containsActive ? 'show' : '' }}">
                    {% if n.children is not empty %}
                        {{ macros.tree(n.children, opts) }}
                    {% endif %}
                </div>
            {% else %}
                <a href="{{ opts.treeRouteBase }}?{{ opts.treeRouteParams }}file={{ n.path|url_encode }}"
                   class="tree-link {{ isActive ? 'is-active' : '' }}"
                   title="{{ n.path }}">
                    <span class="tree-chevron-spacer"></span>
                    <i class="bi {{ icon }}"></i>
                    <span class="text-truncate">{{ n.name }}</span>
                    {% if n.extension in opts.editableExts %}
                        <span class="badge bg-secondary badge-ext">{{ n.extension|upper }}</span>
                    {% endif %}
                </a>
                <span class="tree-file-actions">
                    {% if n.path not in (opts.treeHideActionsFor ?? []) %}
                    {% set showFileMove = opts.treeFileMove is defined ? opts.treeFileMove : true %}
                    {% if showFileMove %}
                    <a href="{{ opts.treeMoveRoute }}?{{ opts.treeMoveParams }}file={{ n.path|url_encode }}"
                       class="tree-move-btn" title="{{ ta.rename|default('Hernoemen/Verplaatsen') }}" aria-label="{{ ta.rename|default('Hernoemen/Verplaatsen') }}">
                        <i class="bi bi-pencil"></i>
                    </a>
                    {% endif %}
                    <button type="button" class="btn btn-link btn-sm p-0 tree-delete-btn" title="{{ ta.delete|default('Verwijderen') }}" aria-label="{{ ta.delete|default('Verwijderen') }}" data-path="{{ n.path }}">
                        <i class="bi bi-trash"></i>
                    </button>
                    {% endif %}
                </span>
            {% endif %}
        </li>
    {% endfor %}
</ul>
{% endmacro %}
{% import _self as tree_macros %}

{# Render the tree inside the standard sidebar card. The container keeps the
   generic id "editorFileTree" so shared CSS/JS selectors work everywhere. #}
<div class="plugin-file-tree">
    <div class="card shadow-sm h-100">
        <div class="card-header bg-white py-2 d-flex justify-content-between align-items-center">
            <span class="small text-muted fw-semibold"><i class="bi bi-folder2-open"></i> {{ treeHeader|default('Bestanden') }}</span>
        </div>
        <div class="card-body p-2" id="editorFileTree"
             data-csrf="{{ csrf_token|default('') }}"
             data-scope="{{ treeScope|default('content') }}"
             data-move-url="{{ treeMoveUrl|default('') }}"
             data-delete-base="{{ treeDeleteBase|default('') }}"
             data-new-file-modal="{{ newFileModalId|default('#newFileModal') }}"
             data-new-dir-modal="{{ newDirModalId|default('#newDirModal') }}"
             data-scope-param="{{ treeScopeParam|default('') }}"
             data-edit-base="{{ treeRouteBase|default('') }}">
            {% if treeDirSelectRoute is defined and treeDirSelectRoute is not empty %}
            {# Klikbare content-root: selecteert de root map (?dir= leeg).
               data-dir="" maakt de root ook een drag-drop doel (lege string = base dir). #}
            <a href="{{ treeDirSelectRoute }}" class="tree-link tree-root-link {{ selectedDir|default('') == '' ? 'is-selected' : '' }}" data-dir="" title="content">
                <i class="bi bi-folder2-open"></i>
                <span class="text-truncate">{{ treeRootLabel|default('content') }}</span>
            </a>
            {% endif %}
            {% if files is empty %}
                <div class="small text-muted p-2">{{ treeEmptyText|default('Geen bestanden gevonden.') }}</div>
            {% else %}
                {{ tree_macros.tree(files, {
                    'relFile': relFile,
                    'selectedDir': selectedDir|default(''),
                    'editableExts': editableExts,
                    'treeIdPrefix': treeIdPrefix,
                    'treeRouteBase': treeRouteBase,
                    'treeRouteParams': treeRouteParams,
                    'treeMoveRoute': treeMoveRoute,
                    'treeMoveParams': treeMoveParams,
                    'treeDirActions': treeDirActions is defined ? treeDirActions : true,
                    'treeDirSelectRoute': treeDirSelectRoute|default(''),
                    'treeDirRenameRoute': treeDirRenameRoute|default(''),
                    'treeFileMove': treeFileMove is defined ? treeFileMove : true,
                    'treeHideActionsFor': treeHideActionsFor|default([]),
                    'newFileModalId': newFileModalId|default('#newFileModal'),
                    'newDirModalId': newDirModalId|default(''),
                }) }}
            {% endif %}
        </div>
    </div>
</div>
<script src="/admin/assets/js/tree-interactions.js"></script>
<script>
(function () {
    var tree = document.getElementById('editorFileTree');
    if (!tree) return;

    function findToggle(collapseEl) {
        var id = collapseEl.id;
        if (!id) return null;
        return tree.querySelector('[data-bs-target="#' + id + '"]');
    }

    function expand(btn) {
        var icon = btn.querySelector('.tree-chevron');
        if (icon) { icon.classList.remove('bi-chevron-right'); icon.classList.add('bi-chevron-down'); }
    }

    function collapse(btn) {
        var icon = btn.querySelector('.tree-chevron');
        if (icon) { icon.classList.remove('bi-chevron-down'); icon.classList.add('bi-chevron-right'); }
    }

    tree.addEventListener('shown.bs.collapse', function (e) {
        var btn = findToggle(e.target);
        if (btn) expand(btn);
    });
    tree.addEventListener('hidden.bs.collapse', function (e) {
        var btn = findToggle(e.target);
        if (btn) collapse(btn);
    });

    // Set initial state for folders that are open on page load
    Array.prototype.forEach.call(tree.querySelectorAll('.tree-collapse.show'), function (c) {
        var btn = findToggle(c);
        if (btn) expand(btn);
    });

    // Make all tree <li> nodes draggable (for drag-and-drop move)
    Array.prototype.forEach.call(tree.querySelectorAll('li[data-path]'), function (li) {
        li.setAttribute('draggable', 'true');
    });
})();
</script>