{% extends "base.html" %}
{% block title %}Pitch Folders — Pitchkit{% endblock %}
{% block content %}

<div class="page-header">
  <h1>Pitch Folders</h1>
  <p class="page-subtitle">Your organized song collections, ready to upload to Disco or share with labels.</p>
</div>

{% if folders %}
<div class="folders-grid">
  {% for folder in folders %}
  <div class="folder-card">
    <div class="folder-icon">
      <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#f5a623" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
        <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/>
      </svg>
    </div>
    <div class="folder-info">
      <div class="folder-name">{{ folder.name }}</div>
      <div class="folder-count">{{ folder.count }} song{% if folder.count != 1 %}s{% endif %}</div>
      {% if folder.files %}
      <div class="folder-files">
        {% for f in folder.files[:4] %}
        <div class="folder-file">{{ f }}</div>
        {% endfor %}
        {% if folder.files|length > 4 %}
        <div class="folder-file muted">+{{ folder.files|length - 4 }} more</div>
        {% endif %}
      </div>
      {% endif %}
    </div>
    <button class="btn btn-outline btn-sm folder-open-btn"
            onclick="openFolder('{{ folder.path }}')">
      Open in Finder
    </button>
  </div>
  {% endfor %}
</div>

{% else %}
<div class="empty-state">
  <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#555570" stroke-width="1.5">
    <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/>
  </svg>
  <p>No pitch folders yet.</p>
  <p class="empty-sub">Use <a href="/match">Match Brief</a> to find songs and save them as a pitch folder.</p>
</div>
{% endif %}

{% endblock %}

{% block scripts %}
<script>
async function openFolder(path) {
  await fetch('/api/open-folder', {
    method: 'POST',
    headers: {'Content-Type':'application/json'},
    body: JSON.stringify({path})
  });
}
</script>
{% endblock %}