---
layout: default
title: MMPSearch - Projetos
permalink: /projetos/
---

<div class="publication">
  <div class="container is-fluid">
    <br />
    <div class="tabs is-centered is-boxed is-medium mb-5">
      {% include sidebar.html %}
    </div>

    <div class="columns">
      <div class="column is-3">
        <div class="box p-3" id="sidebar-filters"></div>
      </div>

      <div class="column is-9">
        <div id="project-list" class="columns is-multiline"></div>

        <div id="no-results" class="has-text-centered is-hidden mt-6">
          <p class="subtitle has-text-grey">Nenhum projeto encontrado.</p>
        </div>
      </div>
    </div>
  </div>
</div>

<script>
  document.addEventListener("DOMContentLoaded", function () {
    const projectList = document.getElementById("project-list");
    const JSON_URL =
      '{{ "/mmpSearch/src_mmpSearch/saida_analises/db_final_completo.json" | relative_url }}';

    fetch(JSON_URL)
      .then((r) => r.json())
      .then((data) => {
        renderAllCards(data);
        // Aqui você chama as suas funções de filtro originais (applyGlobalFilters)
        // que agora vão atuar sobre os elementos criados dinamicamente.
      });

    function renderAllCards(projects) {
      projectList.innerHTML = projects
        .map(
          (p) => `
            <div class="column is-4 project-item" 
                 data-name="${p.file.toLowerCase()}" 
                 data-bpm="${p.bpm || 0}">
                <div class="card project-card" style="height: 100%; border-radius: 12px; background-color: #f0f8ff;">
                    <a href="{{ '/projeto/?id=' | relative_url }}${p.file}" style="text-decoration: none;">
                        <div class="card-content has-text-centered">
                            <div class="icon is-large has-text-info"><i class="fa-solid fa-music fa-2x"></i></div>
                            <p class="title is-6 mt-3">${p.file.replace(".html", "")}</p>
                            <span class="tag is-dark is-rounded">🎵 ${p.bpm || "N/A"} BPM</span>
                            </div>
                    </a>
                    <footer class="card-footer">
                        <a href="{{ '/projeto/?id=' | relative_url }}${p.file}" class="card-footer-item">Ver Detalhes</a>
                    </footer>
                </div>
            </div>
        `,
        )
        .join("");
    }
  });
</script>