{% assign projeto = include.project %}

{% assign filter_instruments = "" %}
{% assign filter_samples = "" %}

{% for track in projeto.tracks %}
  {% if track.instruments %}
    {% for inst in track.instruments %}
       {% assign filter_instruments = filter_instruments | append: inst.instrument_name | append: "," %}
    {% endfor %}
  {% elsif track.instrument_name %}
       {% assign filter_instruments = filter_instruments | append: track.instrument_name | append: "," %}
  {% endif %}

  {% if track.sample %}
    {% for smp in track.sample %}
       {% assign filter_samples = filter_samples | append: smp.sample_name | append: "," %}
    {% endfor %}
  {% elsif track.sample_name %}
       {% assign filter_samples = filter_samples | append: track.sample_name | append: "," %}
  {% endif %}
{% endfor %}

<div class="column is-12-mobile is-6-tablet is-4-desktop is-4-widescreen project-item"
     data-bpm="{{ projeto.bpm }}"
     data-plugins="{{ projeto.tags.plugin | join: ',' }}"
     data-instruments="{{ filter_instruments }}"
     data-samples="{{ filter_samples }}"
     data-basslines="{{ projeto.tags.bassline | join: ',' }}"
     data-automations="{{ projeto.tags.automation | join: ',' }}">

  <div class="card project-card" style="height: 100%; background-color: #f0f8ff; border: 1px solid #cfe8fc; border-radius: 12px; display: flex; flex-direction: column;">
    
    {% assign file_url = projeto.file | slugify %}
    {% assign page_url = '../projetos/' | append: file_url | append: '.html' %}

    <a href="{{ page_url }}" style="text-decoration: none; flex: 1; display: flex; flex-direction: column;">
        <div class="card-content has-text-centered p-4" style="flex: 1; display: flex; flex-direction: column;">

          <div style="width: 50px; height: 50px; background-color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 0.5rem auto; box-shadow: 0 2px 5px rgba(0,0,0,0.05);">
            <span class="icon" style="color: #3273dc;"><i class="fa-solid fa-music fa-lg"></i></span>
          </div>

          <p class="title is-6 mb-2" style="color: #205081; word-break: break-word; font-weight: 700; line-height: 1.2;">
            {{ projeto.file }}
          </p>

          {% if projeto.bpm %}
            <div class="mb-3">
                <span class="tag is-dark is-rounded is-light" style="font-size: 0.7rem; font-weight: bold; border: 1px solid #ccc;">
                    🎵 {{ projeto.bpm }} BPM
                </span>
            </div>
          {% else %}
            <div class="mb-3" style="height: 24px;"></div>
          {% endif %}

          <div style="flex: 1;"></div>
          
          <div class="tags is-centered is-gapless mb-0 mt-2" style="gap: 4px; justify-content: center;">
             {% if projeto.tags.plugin.size > 0 %}
                <span class="tag is-white" style="font-size: 0.65rem; border: 1px solid #deeaf6; color: #5b7da3;">{{ projeto.tags.plugin.size }} plugins</span>
             {% endif %}
             {% if filter_instruments.size > 0 %}
                <span class="tag is-white" style="font-size: 0.65rem; border: 1px solid #deeaf6; color: #5b7da3;">Insts</span>
             {% endif %}
          </div>

        </div>
    </a>

    <footer class="card-footer" style="border-top: 1px solid #cfe8fc; background-color: #fff; border-radius: 0 0 12px 12px; overflow: hidden;">
      <a href="#" class="card-footer-item js-open-modal" data-target-url="{{ page_url }}" data-modal-title="Detalhes: {{ projeto.file }}" data-full-btn-text="Ir para Página" data-full-btn-link="{{ page_url }}" style="color: #5b7da3; font-size: 0.8rem; font-weight: 600; border-right: 1px solid #eee; transition: background 0.2s;">Ver</a>
      {% assign creation_url = '/mmpSearch/creation.html?project=' | append: projeto.file %}
      {% assign embed_url = creation_url | append: '&embed=true' %}
      <a href="#" class="card-footer-item js-open-modal" data-target-url="{{ embed_url }}" data-modal-title="Editor: {{ projeto.file }}" data-full-btn-text="Abrir Editor" data-full-btn-link="{{ creation_url }}" style="color: #3273dc; font-size: 0.8rem; font-weight: 600;">Editar</a>
    </footer>

  </div>
</div>