{% include modal_login.html %}

<ul>
  <li>
    <a href="{{ '/projetos/' | relative_url }}">
      <span class="icon is-small"><i class="fa-solid fa-folder-open"></i></span>
      <span>Projetos</span>
    </a>
  </li>
  
  <li>
    <a href="{{ '/samples/' | relative_url }}">
      <span class="icon is-small"><i class="fa-solid fa-music"></i></span>
      <span>Samples</span>
    </a>
  </li>
  
  <li>
    <a href="{{ '/beats/' | relative_url }}">
      <span class="icon is-small"><i class="fa-solid fa-headphones"></i></span>
      <span>Beats</span>
    </a>
  </li>
  
  <li>
    <a href="{{ '/buscas/' | relative_url }}">
      <span class="icon is-small"><i class="fa-solid fa-magnifying-glass"></i></span>
      <span>Buscas</span>
    </a>
  </li>
  
  <li>
    <a href="{{ '/creation.html' | relative_url }}" class="has-text-primary">
      <span class="icon is-small"><i class="fa-solid fa-wand-magic-sparkles"></i></span>
      <span>Crie seu projeto</span>
    </a>
  </li>
  
  <li>
    <a href="{{ '/envie_seu_projeto/' | relative_url }}" class="has-text-primary">
      <span class="icon is-small"><i class="fa-solid fa-cloud-arrow-up"></i></span>
      <span>Envie seu projeto</span>
    </a>
  </li>

  <li id="sidebar-btn-login">
    <a href="#" class="has-text-info js-trigger-login">
      <span class="icon is-small"><i class="fa-solid fa-right-to-bracket"></i></span>
      <span>Entrar</span>
    </a>
  </li>

  <li id="sidebar-btn-logout" class="is-hidden">
    <a href="#" id="action-sidebar-logout" class="has-text-danger">
      <span class="icon is-small"><i class="fa-solid fa-right-from-bracket"></i></span>
      <span>Sair</span>
    </a>
  </li>

</ul>

<script>
document.addEventListener('DOMContentLoaded', async () => {
    const loginLi = document.getElementById('sidebar-btn-login');
    const logoutLi = document.getElementById('sidebar-btn-logout');
    const logoutAction = document.getElementById('action-sidebar-logout');

    try {
        // Verifica status no servidor
        const res = await fetch('/api/check_auth');
        const data = await res.json();

        if (data.logged_in) {
            // Se logado: Esconde Login, Mostra Logout
            if(loginLi) loginLi.classList.add('is-hidden');
            if(logoutLi) logoutLi.classList.remove('is-hidden');
        } else {
            // Se visitante: Mostra Login, Esconde Logout
            if(loginLi) loginLi.classList.remove('is-hidden');
            if(logoutLi) logoutLi.classList.add('is-hidden');
        }
    } catch (e) {
        console.error("Erro sidebar auth:", e);
    }

    // Lógica do botão Sair
    if (logoutAction) {
        logoutAction.addEventListener('click', async (e) => {
            e.preventDefault();
            // Adiciona loading visual (opcional)
            logoutAction.classList.add('is-loading'); 
            
            try {
                await fetch('/api/logout', { method: 'POST' });
                // Recarrega a página para resetar o estado visual
                window.location.reload();
            } catch (error) {
                alert("Erro ao sair.");
                logoutAction.classList.remove('is-loading');
            }
        });
    }
});
</script>