---
layout: default
title: "{{ page.file }}"
---

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

      <h1 class="title is-3 mb-4"><code>{{ page.file }}</code></h1>

      {% if page.file or page.bpm %}
      <div class="mb-5">
        <div class="columns is-mobile is-multiline is-vcentered">
          {% if page.file %}
            <div class="column is-narrow">
              <span><strong><code>📁 Arquivo:</code></strong> {{ page.file }}</span>
            </div>
          {% endif %}
          {% if page.bpm %}
            <div class="column is-narrow">
              <span><strong><code>🎵 BPM:</code></strong> {{ page.bpm }}</span>
            </div>
          {% endif %}
        </div>
      </div>
      {% endif %}

      {% assign audio_file_path = '/mmp/wav/' | append: page.file | append: '.wav' %}
      {% if page.file %}
        <section class="audio-player-section mb-6">
          <audio controls>
            <source src="{{ audio_file_path | relative_url }}" type="audio/wav">
            {% assign audio_ogg_path = '/mmp/ogg/' | append: page.file | append: '.ogg' %}
            <source src="{{ audio_ogg_path | relative_url }}" type="audio/ogg">
            Seu navegador não suporta o elemento <code>audio</code>.
          </audio>
        </section>
      {% endif %}


      <div class="columns">
        
        <div class="column is-two-thirds">
          
          {% if page.tags %}
            {% assign tags_vazias = true %}
            {% for categoria in page.tags %}
              {% if categoria[1] and categoria[1].size > 0 %}
                {% assign tags_vazias = false %}
              {% endif %}
            {% endfor %}

            {% unless tags_vazias %}
            <section class="tags-section mb-6">
            <details>
              <summary class="title is-5" style="cursor: pointer; padding-left: 0;">
                <code>🏷️ Tags</code>
              </summary>
              {% for categoria in page.tags %}
                {% if categoria[1] and categoria[1].size > 0 %}
                  <div class="mb-4">
                    <strong><code>{{ categoria[0] }}:</code></strong>
                    <div class="tags mt-2">
                      {% for valor in categoria[1] %}
                        {% if valor != "" %}
                          {% assign tag_slug = valor | replace: ' ', '+' %}
                          {% if categoria[0] == 'bassline' %}
                            <a href="{{ '/bassline/?bassline=' | append: tag_slug | relative_url }}" class="tag is-info is-light">{{ valor }}</a>
                          {% elsif categoria[0] == 'sample' %}
                            <a href="{{ '/sample/?sample=' | append: tag_slug | relative_url }}" class="tag is-info is-light">{{ valor }}</a>
                          {% elsif categoria[0] == 'plugin' %}
                            <a href="{{ '/plugin/?plugin=' | append: tag_slug | relative_url }}" class="tag is-info is-light">{{ valor }}</a>
                          {% elsif categoria[0] == 'automation' %}
                            <a href="{{ '/automation/?automation=' | append: tag_slug | relative_url }}" class="tag is-info is-light">{{ valor }}</a>
                          {% else %}
                            <a href="{{ '/' | append: tag_slug | relative_url }}" class="tag is-info is-light">{{ valor }}</a>
                          {% endif %}
                        {% endif %}
                      {% endfor %}
                    </div>
                  </div>
                {% endif %}
              {% endfor %}
            </details>
            </section>
            {% endunless %}
          {% endif %}

          {% if page.tracks and page.tracks.size > 0 %}
            <section class="instruments-section">
              <details open>
                <summary class="title is-5" style="cursor: pointer; padding-left: 0;">
                    <code>🎚️ Instrumentos </code>
                </summary>
                
                <div class="content mt-3">
                    <ul style="list-style: none; padding-left: 0;">
                        {% for track in page.tracks %}
                            {% assign tem_instr = false %}
                            {% if track.instruments and track.instruments.size > 0 %}
                                {% assign tem_instr = true %}
                            {% endif %}

                            {% if track.bassline_name or tem_instr %}
                            <li class="mb-5">
                                {% if track.bassline_name %}
                                    <p class="has-text-weight-bold mb-2">🎼 {{ track.bassline_name }}</p>
                                {% endif %}

                                {% if tem_instr %}
                                    <ul class="pl-4">
                                        {% for instrument in track.instruments %}
                                            {% if instrument.instrument_name %}
                                            <li style="margin-bottom: 0.4rem;">
                                                
                                                <div style="display: flex; align-items: center; gap: 8px;">
                                                    {% assign display_name = instrument.instrument_name %}
                                                    {% if display_name contains "audiofileprocessor" and instrument.patterns %}
                                                        {% assign first_pattern_name = instrument.patterns | map: 'name' | first %}
                                                        {% if first_pattern_name and first_pattern_name != empty %}
                                                            {% assign display_name = first_pattern_name | remove: ".ogg" | remove: ".wav" | remove: ".flac" | remove: ".mp3" %}
                                                        {% elsif instrument.audiofileprocessor.src %}
                                                            {% assign src_parts = instrument.audiofileprocessor.src | split: '/' %}
                                                            {% assign file_name = src_parts | last %}
                                                            {% assign display_name = file_name | remove: ".ogg" | remove: ".wav" | remove: ".flac" | remove: ".mp3" %}
                                                        {% endif %}
                                                    {% endif %}

                                                    {% assign instrument_slug = display_name | replace: ' ', '+' %}
                                                    <a href="{{ '/instruments/?instrument=' | append: instrument_slug | relative_url }}" class="tag is-info is-light">
                                                        <code>{{ display_name }}</code>
                                                    </a>
                                                </div>

                                                {% comment %}
                                                    LOOP para múltiplos patterns com rótulo P1, P2, P3.
                                                {% endcomment %}
                                                {% for pattern in instrument.patterns %}
                                                    {% assign pattern_steps = pattern.steps %}
                                                    
                                                    {% if pattern_steps and pattern_steps.size > 0 %}
                                                        <div class="mt-2" style="display: flex; align-items: center; gap: 4px;">
                                                            
                                                            <span class="is-size-7 has-text-grey-light">
                                                                P{{ forloop.index }}:
                                                            </span>
                                                            
                                                            {% comment %} 
                                                                >>> INÍCIO DA LÓGICA DE STEPS CLICÁVEIS (4-steps) <<<
                                                                (O container agora é 'row' para manter os chunks na horizontal)
                                                            {% endcomment %}
                                                            <div class="patterns-container" style="display: flex; flex-direction: row; flex-wrap: wrap; gap: 4px;">
                                                                {% assign total_steps = pattern_steps.size %}
                                                                {% assign chunk_size = 4 %}
                                                                
                                                                {% comment %} Calcula quantos pedaços de 4 steps teremos {% endcomment %}
                                                                {% assign num_chunks = total_steps | divided_by: chunk_size %}

                                                                {% comment %} 
                                                                  FIX: Primeiro calculamos o 'resto' e salvamos numa variável 
                                                                {% endcomment %}
                                                                {% assign remainder = total_steps | modulo: chunk_size %}

                                                                {% comment %} 
                                                                  FIX: Agora sim usamos a variável na comparação 
                                                                {% endcomment %}
                                                                {% if remainder > 0 %}
                                                                    {% assign num_chunks = num_chunks | plus: 1 %}
                                                                {% endif %}

                                                                {% for i in (0..num_chunks) %}
                                                                    {% assign start_index = i | times: chunk_size %}
                                                                    
                                                                    {% comment %} Pega a fatia de 4 steps {% endcomment %}
                                                                    {% assign current_chunk_array = pattern_steps | slice: start_index, chunk_size %}

                                                                    {% if current_chunk_array.size > 0 %}
                                                                        
                                                                        {% comment %} 1. Serializa o chunk (ex: [1,0,0,1] -> "1001") {% endcomment %}
                                                                        {% assign chunk_string = "" %}
                                                                        {% for step in current_chunk_array %}
                                                                            {% if step == true or step == 'true' or step == 1 %}
                                                                                {% assign chunk_string = chunk_string | append: '1' %}
                                                                            {% else %}
                                                                                {% assign chunk_string = chunk_string | append: '0' %}
                                                                            {% endif %}
                                                                        {% endfor %}

                                                                        {% comment %} 
                                                                          2. Cria o link clicável 
                                                                        {% endcomment %}
                                                                        {% assign search_url = '/pattern/?p=' | append: chunk_string | relative_url %}
                                                                        
                                                                        <a href="{{ search_url }}" title="Buscar padrão {{ chunk_string }}" style="display: inline-block;">
                                                                        
                                                                            {% comment %} 3. Renderiza o visual do step DENTRO do link {% endcomment %}
                                                                            <div style="display: flex; flex-direction: row; border: 1px solid #999; padding: 2px; border-radius: 2px; background-color: #f0f0f0;">
                                                                                
                                                                                {% for step_active in current_chunk_array %}
                                                                                    {% assign step_color = '#d9d9d9' %} 
                                                                                    {% if step_active == true or step_active == 'true' or step_active == 1 %} 
                                                                                        {% assign step_color = '#4caf50' %} 
                                                                                    {% endif %}
                                                                                    
                                                                                    <div style="width: 5px; height: 10px; background-color: {{ step_color }}; border-radius: 1px; margin-right: 1px;"></div>
                                                                                {% endfor %}

                                                                                {% comment %} Preenche com steps vazios se o chunk for menor que 4 {% endcomment %}
                                                                                {% assign remaining_steps = chunk_size | minus: current_chunk_array.size %}
                                                                                {% if remaining_steps > 0 %}
                                                                                    {% for j in (1..remaining_steps) %}
                                                                                        <div style="width: 5px; height: 10px; background-color: #d9d9d9; border-radius: 1px; margin-right: 1px;"></div>
                                                                                    {% endfor %}
                                                                                {% endif %}

                                                                            </div>
                                                                        </a>
                                                                    {% endif %}
                                                                {% endfor %}
                                                            </div>
                                                            {% comment %} >>> FIM DA LÓGICA DE STEPS CLICÁVEIS <<< {% endcomment %}
                                                        </div>
                                                    {% endif %}
                                                {% endfor %}
                                                
                                                
                                                {% comment %} Player de áudio e condição de sample ausente {% endcomment %}
                                                {% assign sample_src = instrument.audiofileprocessor.src | default: "" | strip %}
                                                
                                                {% if instrument.audiofileprocessor and sample_src != "" %}
                                                    {% assign audio_filename_with_path = 'src/samples/' | append: sample_src %}
                                                    <div class="audio-player-section mt-3">
                                                        <audio controls>
                                                            <source 
                                                                src="{{ audio_filename_with_path | relative_url }}" 
                                                                type="audio/ogg"
                                                            >
                                                            {% assign wav_path = audio_filename_with_path | replace: '.ogg', '.wav' %}
                                                            <source 
                                                                src="{{ wav_path | relative_url }}" 
                                                                type="audio/wav"
                                                            >
                                                            Seu navegador não suporta o elemento <code>audio</code>.
                                                        </audio>
                                                    </div>
                                                {% else %}
                                                    <p class="has-text-danger is-size-7 mt-3">
                                                        O sample **não foi enviado** 😢
                                                    </p>
                                                {% endif %}
                                            </li>
                                            {% endif %}
                                        {% endfor %}
                                    </ul>
                                {% endif %}
                            </li>
                            {% endif %}
                        {% endfor %}
                    </ul>
                </div>
              </details>

            </section>
            {% endif %}
          </div>
          
          <div class="column is-one-third">
            <div class="box p-4 has-background-info-light">
                <h3 class="title is-6 has-text-info mb-3">🛠️ Abra na Criação Colaborativa</h3>
                
                {% comment %} 
                  CONSTRUÇÃO DA URL CORRIGIDA PARA AMBIENTES DE TESTE:
                {% endcomment %}
                {% assign creation_url = '/~jotachina/mmpSearch/creation.html?project=' | append: page.file %}
                    <span class="icon"><i class="fa-solid fa-up-right-from-square"></i></span>
                <a 
                    href="{{ creation_url }}" 
                    target="_blank" 
                    class="button is-info is-fullwidth is-medium mb-4"
                >Abrir no MMPCreator</a>
                
                <p class="is-size-7 has-text-grey-dark">
                    O link abrirá o projeto em uma nova aba para edição.
                    <br>
                    Arquivo: <code>{{ page.file }}</code>
                </p>

                <div class="mt-4 is-hidden-mobile">
                    {% assign embed_url = creation_url | append: '&embed=true' %}

                    <iframe 
                        src="{{ embed_url }}"
                        title="Prévia do Projeto"
                        style="width: 500px; height: 800px; border: 1px solid #ccc; border-radius: 4px;"
                    >
                    </iframe>
                </div>
            </div>
          </div>
        </div> 
      </div>
    </main>
</div>