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

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

      <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 %}

              <h2 class="title is-5"><code>🏷️ Tags</code></h2>
              {% 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>
            {% endunless %}
          {% endif %}
          {% if page.tracks and page.tracks.size > 0 %}
          <section class="instruments-section">
            <h2 class="title is-5"><code>🎚️ Instrumentos</h2></code>
            <div class="content">
              <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>

                            {% if instrument.audiofileprocessor and instrument.audiofileprocessor.src %}
                              {% assign audio_filename_with_path = 'src/samples/' | append: instrument.audiofileprocessor.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>
                            {% endif %}
                          </li>
                          {% endif %}
                        {% endfor %}
                      </ul>
                    {% endif %}
                  </li>
                  {% endif %}
                {% endfor %}
              </ul>
            </div>
          </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:
                    1. Usa o arquivo fonte (`page.file`) como parâmetro `project`.
                    2. Assume que a plataforma de criação está em `/creations/`.
                    3. Abre em uma nova aba (`target="_blank"`).
                {% endcomment %}
                {% assign creation_url = '/creations/?project=' | append: page.file | relative_url %}

                <a 
                    href="{{ creation_url }}" 
                    target="_blank" 
                    class="button is-info is-fullwidth is-medium mb-4"
                >
                    <span class="icon"><i class="fa-solid fa-up-right-from-square"></i></span>
                    <span>Abrir no MMPCreator</span>
                </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">
                    <h4 class="title is-7 has-text-grey-dark">Prévia (Embed)</h4>
                    {% comment %}
                        A prévia embutida é opcional e pode ser um pouco pesada. 
                        Ajuste o caminho da URL e o estilo (altura) conforme necessário.
                    {% endcomment %}
                    <iframe 
                        src="{{ creation_url }}"
                        title="Prévia do Projeto"
                        style="width: 100%; height: 300px; border: 1px solid #ccc; border-radius: 4px;"
                    >
                    </iframe>
                </div>
            </div>
        </div> </div> 
      </div>
  </main>
</div>