{{ define "folders" }}
<section class="section">
  <div class="container is-fluid">
    <div class="columns">
      <!-- Sidebar interne si besoin -->
      <div class="column is-2">
        <aside class="menu">
          <p class="menu-label">Dossiers</p>
          <ul class="menu-list">
            {{- range .Dirs }}
            <li>
              <a
                hx-get="/folders?path={{ urlquery .Path }}"
                hx-target="#file-list"
                hx-swap="innerHTML"
                hx-push-url="true"
                class="{{ if eq $.CurrentPath .Path }}is-active{{ end }}"
              >
                {{ .Name }}
              </a>
            </li>
            {{- end }}
          </ul>
        </aside>
      </div>

      <!-- Grille principale -->
      <div class="column is-7">
        <nav class="breadcrumb" aria-label="breadcrumbs">
          <ul>
            <li>
              <a hx-get="/folders"
                 hx-target="#file-list"
                 hx-swap="innerHTML"
                 hx-push-url="true">
                 Home
              </a>
            </li>
            {{- $parts := split .CurrentPath "/" }}
            {{- $acc := "" }}
            {{- range $i, $p := $parts }}
              {{- if ne $p "" }}
                {{- $acc = printf "%s/%s" $acc $p }}
                <li class="is-active">
                  <a hx-get="/folders?path={{ urlquery (trimPrefix "/" $acc) }}"
                     hx-target="#file-list"
                     hx-swap="innerHTML"
                     hx-push-url="true">
                     {{ $p }}
                  </a>
                </li>
              {{- end }}
            {{- end }}
          </ul>
        </nav>

        <div id="file-list">
          {{ template "_file_list" . }}
        </div>
      </div>

      <!-- Détails -->
      <div class="column is-3">
        <div id="detail-panel">
          <em>Sélectionnez un fichier ou un dossier…</em>
        </div>
      </div>
    </div>
  </div>
</section>
{{ end }}