---
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 }}</h1></code>

      {% 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:</strong> {{ page.file }}</span></code>
            </div>
          {% endif %}
          {% if page.bpm %}
            <div class="column is-narrow">
              <span><strong><code>🎵 BPM:</strong> {{ page.bpm }}</span></code>
            </div>
          {% endif %}
        </div>
      </div>
      {% 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].size > 0 %}
                {% assign tags_vazias = false %}
              {% endif %}
            {% endfor %}

            {% unless tags_vazias %}
            <section class="tags-section mb-6">
              {% assign audio_file = '/mmp/wav/' | append: page.file | append: '.wav' %}

              {% if audio_file %}
                <section class="audio-player-section mb-6">
                  <audio controls>
                    <source src="{{ audio_file | relative_url }}" type="audio/wav">
                    Seu navegador não suporta o elemento <code>audio</code>.
                  </audio>
                </section>
              {% endif %}
            <details>
              <summary class="title is-5" style="cursor: pointer; padding-left: 0;">
                  <code>🏷️ Tags</code>
              </summary>
              {% for categoria in page.tags %}
                {% if categoria[1].size > 0 %}
                  <div class="mb-4">
                    <strong><code>{{ categoria[0] }}:</strong></code>
                    <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 %}
            </section>
          </details>
            {% endunless %}
          {% endif %}
          {% if page.tracks and page.tracks.size > 0 %}
            <section class="instruments-section">
                
                {% comment %} 
                    USANDO <details> PARA CRIAR UM ACORDION NATIVO:
                    O atributo "open" (se presente) mantém a lista expandida.
                    O <summary> é o título clicável que o usuário vê.
                {% endcomment %}
                <details>
                    <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;">
                                                    {% assign instrument_slug = instrument.instrument_name | replace: ' ', '+' %}
                                                    <a href="{{ '/instruments/?instrument=' | append: instrument_slug | relative_url }}" class="tag is-info is-light">
                                                        <code>{{ instrument.instrument_name }}</code>
                                                    </a>

                                                    {% comment %}
                                                        VERIFICAÇÃO DE SAMPLE: 
                                                        Se `audiofileprocessor` existir E `src` existir E `src` não for vazio, exibe o player.
                                                    {% 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 %}
                                                        {% comment %} CONDIÇÃO DE MENSAGEM: O sample não foi enviado! {% endcomment %}
                                                        <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" height="800px" widht="800px">
            <div class="box p-4 has-background-info-light" height="800px" widht="800px">
                <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:
                    - O filtro `relative_url` foi removido para evitar a duplicação do caminho.
                    - O prefixo de teste `/~jotachina/mmpSearch/` foi adicionado manualmente.
                {% 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" height="800px" widht="800px">
                    {% 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>