<!DOCTYPE html>
<html lang="en">
{{ template "head" . }}

<body>
  <header></header>
 
    <div class="column">
      <h1>Dashboard</h1>
      <div class="columns is-mobile">
        <div class="column is-2">
          <aside class="menu">

            <p class="menu-label">GoDownloader</p>

            <ul class="menu-list">
              <li><a class="nav-link" onclick="toggleMenuGoDownload(); return false;">GoDownloader</a>
                <ul id="menuDownload" hidden>
<li><a hx-get="/downloads" class="nav-link" hx-target="#content" hx-swap="innerHTML">Téléchargements</a></li>
                </ul>
              
              </li>
              <p class="menu-label">Library</p>

              <li><a hx-get="/library" class="nav-link"
                onclick="toggleMenu(); return false;"
                hx-target="#content" hx-swap-oob="beforeend">Library</a>
              <li>
                <ul class="menu-list" id="libraryMenu" hidden>
                  <li>
                    <a class="is-active">Choise Library</a>
                     <ul id="paths-list">
                      {{range .paths}}
                      <li>
                        <a 
                          href="/api/paths/{{.ID}}/media" 
                          class="path-link" 
                          hx-get="/api/paths/{{.ID}}/media"
                          hx-target="#content"
                          hx-swap="innerHTML">
                          {{.PathName}}
                          <i class="fas fa-ellipsis-v"></i>
                        </a>
                      </li>
                      {{end}}

                    </ul>
                  </li>
                </ul>
              </li>
              <li><a hx-get="/folders" class="nav-link" hx-target="#content" hx-swap-oob="beforeend">Folders</a></li>
              <li><a hx-get="/settings" class="nav-link" hx-target="#content" hx-swap-oob="beforeend">Settings</a></li>
              </li>
            </ul>
          </aside>
        </div>
        <div class="column is-10">
            <div id="loading-spinner" class="has-text-centered" style="display:none; position: absolute; top: 1rem; right: 1rem; z-index: 50;">
    <button class="button is-loading is-white is-large" aria-label="Loading"></button>
  </div>
          <div id="content">
            <!-- Le contenu spécifique sera chargé ici -->
          </div>
        </div>
      </div>
    </div>

  <footer></footer>



</body>
<script>
  // static/js/spinner.js
// Écoute tous les événements HTMX et affiche/masque le spinner global
document.body.addEventListener('htmx:send', () => {
  const s = document.getElementById('loading-spinner');
  if (s) s.style.display = 'block';
});
document.body.addEventListener('htmx:afterOnLoad', () => {
  const s = document.getElementById('loading-spinner');
  if (s) s.style.display = 'none';
});
// En cas d’erreur réseau
document.body.addEventListener('htmx:afterRequest', (evt) => {
  if (evt.detail.xhr.status >= 400) {
    const s = document.getElementById('loading-spinner');
    if (s) s.style.display = 'none';
  }
});

</script>

</html>