---
layout: default
title: "Projetos por Instrumento"
permalink: /instruments/
---
<meta charset="utf-8">
<main class="main-content">  
  <div class="publication">
    {% include sidebar.html %}
  <div class="container">
  <br>
  <div class="columns is-mobile is-vcentered" style="margin-bottom: 2rem;">
    <!-- Título -->
    <div class="column is-auto">
      <h2 class="title is-4"><code>Instrumentos disponíveis:</code></h2>
    </div>
    <!-- Botão Limpar Filtro -->
    <div class="column is-auto">
      <button id="clearFilterButton" class="button is-small is-light">
        Limpar filtro
      </button>
    </div>
  </div>

    {% assign instruments_exibidos = "" %}

    {% for item in site.data.all %}
      {% for track in item.tracks %}
        {% if track.instruments %}
          {% for instrument in track.instruments %}
            {% unless instruments_exibidos contains instrument.instrument_name %}
              {% capture instruments_exibidos %}{{ instruments_exibidos }},{{ instrument.instrument_name }}{% endcapture %}

              <!-- Gerar link para o instrumento -->
              {% assign instrument_slug = instrument.instrument_name %}
              <a href="{{ '/instruments/?instrument=' | append: instrument_slug | relative_url }}" class="button is-link instrument-button" style="margin-bottom: 1rem;">
                {{ instrument.instrument_name }}
              </a>
            {% endunless %}
          {% endfor %}
        {% endif %}
      {% endfor %}
    {% endfor %}
  </div>
  </div>
</main>

<script>
  document.addEventListener("DOMContentLoaded", function() {
  const instrumentButtons = document.querySelectorAll('.instrument-button');
  const urlParams = new URLSearchParams(window.location.search);
  let instrumentFilter = urlParams.get('instrument'); // Pega o parâmetro 'instrument' da URL, se houver

  // Função para aplicar o filtro de instrumento
  function filterInstruments() {
    instrumentButtons.forEach(button => {
      const instrumentSlug = button.getAttribute('href').split('=')[1]; // Obtém o slug do instrumento do link

      // Se o botão de instrumento não corresponder ao filtro da URL, esconde-o
      if (instrumentFilter && instrumentSlug !== instrumentFilter) {
        button.style.display = 'none';
      } else {
        button.style.display = 'inline-block'; // Mostra o botão do instrumento se corresponder ao filtro
      }

      // Se o botão do instrumento corresponder ao filtro, adiciona a classe de destaque
      if (instrumentSlug === instrumentFilter) {
        button.classList.add('is-info');
      } else {
        button.classList.remove('is-info');
      }
    });
  }

  filterInstruments(); // Aplica o filtro de instrumentos assim que a página é carregada

  // Botão para limpar filtro
  const clearFilterButton = document.querySelector('#clearFilterButton');
  if (clearFilterButton) {
    clearFilterButton.addEventListener('click', function () {
      // Limpa o filtro e mostra todos os botões
      instrumentButtons.forEach(button => {
        button.style.display = 'inline-block'; // Resetando a exibição de todos os botões
        button.classList.remove('is-info'); // Removendo a classe de destaque
      });

      // Remove o parâmetro 'instrument' da URL
      const newUrl = new URL(window.location.href);
      newUrl.searchParams.delete('instrument');
      window.history.replaceState({}, '', newUrl);

      // Reaplica o filtro com todos os instrumentos visíveis
      instrumentFilter = null; // Reseta o filtro para que todos os instrumentos apareçam
      filterInstruments(); // Reaplica a função de filtro para garantir que todos os botões sejam exibidos
    });
  }
});

</script>