{% extends "base.html" %}

{% block content %}
<section class="page-header">
    <div>
        <p class="page-kicker">Files</p>
        <h1 class="page-title">File browser</h1>
        <p class="page-subtitle">Navigate, preview, and manage files across your allowed roots.</p>
    </div>
    <div class="chip-stack">
        <span class="chip">Local only</span>
        <span class="chip">HTMX powered</span>
    </div>
</section>

<section class="file-browser" data-file-browser>
    <aside class="tree-panel">
        <div class="panel-header">
            <h2>Folders</h2>
            <p>Browse allowed roots and jump between directories.</p>
        </div>
        <div
            id="directory-tree"
            class="directory-tree"
            hx-get="/ui/files/tree?active={{ active_path_param }}"
            hx-trigger="load, refresh"
            hx-target="#directory-tree"
            hx-swap="innerHTML"
        >
            <div class="loading-state">Loading folders...</div>
        </div>
    </aside>

    <div class="browser-main">
        <div id="file-results">
            {% include "files/_results.html" %}
        </div>
    </div>
</section>

<div id="preview-modal" class="modal" aria-hidden="true"></div>
{% endblock %}