---
layout: default
title: Projetos com a tag Automation
permalink: /automation/
---
<meta charset="utf-8">

<main class="main-content">  
  <div class="publication">
    {% include sidebar.html %}
  </div>

  <div class="container">
    <div class="columns is-mobile is-vcentered" style="margin-bottom: 2rem;">
      <!-- Título -->
      <div class="column is-auto">
        <h2 class="title is-4"><code>Projetos que possuem a tag automation:</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>

    <!-- Projetos -->
    <div id="project-list" class="columns is-multiline">
      {% for projeto in site.data.all %}
        {% if projeto.tags.TAG contains "automation" %}
          <div class="column is-6 project-item" data-automation="{{ projeto.tags.automation | join: ',' }}">
            <div class="box">
              <!-- Botão do projeto -->
              {% assign file_url = projeto.file | downcase 
                                    | replace: ' ', '-' 
                                    | replace: 'ç', 'c' 
                                    | replace: 'ã', 'a' 
                                    | replace: 'á', 'a'
                                    | replace: 'â', 'a'
                                    | replace: 'é', 'e'
                                    | replace: 'ê', 'e'
                                    | replace: 'í', 'i' 
                                    | replace: 'ó', 'o' 
                                    | replace: 'ô', 'o'
                                    | replace: 'õ', 'o'
                                    | replace: 'ú', 'u' %}

              <a href="../mmp_pages/{{ file_url }}.html" class="button is-link is-fullwidth">
                {{ projeto.file }}
              </a>

              <!-- Lista de automations clicáveis -->
              {% if projeto.tags.automation and projeto.tags.automation.size > 0 %}
                <div style="margin-top: 1rem;">
                  <p><strong>Automation:</strong></p>
                  <ul style="list-style-type: disc; padding-left: 1.25rem;">
                    {% for automation in projeto.tags.automation %}
                      {% if automation != "" %}
                        <li><a href="#" class="automation-item" data-automation="{{ automation }}">{{ automation }}</a></li>
                      {% endif %}
                    {% endfor %}
                  </ul>
                </div>
              {% endif %}
            </div>
          </div>
        {% endif %}
      {% endfor %}
    </div>
  </div>
</main>

<script>
  document.addEventListener('DOMContentLoaded', function () {
    const projects = document.querySelectorAll('.project-item');

    // Função para aplicar filtro por automation
    function filterByAutomation(automationName) {
      projects.forEach(project => {
        const projectAutomations = project.getAttribute('data-automation').split(',');
        if (projectAutomations.includes(automationName)) {
          project.style.display = 'block';
        } else {
          project.style.display = 'none';
        }
      });
    }

    // Lê a automation da URL se houver
    const urlParams = new URLSearchParams(window.location.search);
    const automationFromUrl = urlParams.get('automation');
    if (automationFromUrl) {
      filterByAutomation(automationFromUrl);
    }

    // Ao clicar numa automation na lista
    const automationItems = document.querySelectorAll('.automation-item');
    automationItems.forEach(item => {
      item.addEventListener('click', function (event) {
        event.preventDefault();
        const selectedAutomation = item.getAttribute('data-automation');
        filterByAutomation(selectedAutomation);

        // Atualiza a URL sem recarregar a página
        const newUrl = new URL(window.location.href);
        newUrl.searchParams.set('automation', selectedAutomation);
        window.history.replaceState({}, '', newUrl);
      });
    });

    // Botão para limpar filtro
    const clearFilterButton = document.querySelector('#clearFilterButton');
    clearFilterButton.addEventListener('click', function () {
      projects.forEach(project => {
        project.style.display = 'block';
      });

      // Remove o filtro da URL
      const newUrl = new URL(window.location.href);
      newUrl.searchParams.delete('automation');
      window.history.replaceState({}, '', newUrl);
    });
  });
</script>