{% extends "base.html" %}
{% block title %}Audio Transcriber — {{ settings.APP_NAME }}{% endblock %}
{% block content %}
<div class="page">
  {% if status == "started" %}<div class="form-error" style="background:#e8f7ec;color:#1aae39;border-color:#b8e6c7">MIDI transcription started — results appear below when done.</div>
  {% elif status == "started-mus" %}<div class="form-error" style="background:#fff4e5;color:#dd5b00;border-color:#f4d8b0">Sheet-music (MuScriptor) transcription started. This is slow on CPU and needs the HF token set.</div>{% endif %}

  <h1 class="greeting">Audio Transcriber</h1>
  <p class="muted" style="max-width:640px">
    Turn an audio file into MIDI (via Spotify Basic Pitch). Upload or pick a file from
    your bucket, then the transcription worker produces a MIDI you can download.
  </p>

  <div class="admin-panel">
    <section class="stack">
      <h2 class="section-title">Your audio</h2>
      {% if audio_files %}
      <ul class="file-list">
        {% for k in audio_files %}
        <li>
          <span class="file-name" title="{{ k }}">{{ k }}</span>
          <span style="display:flex;gap:8px;align-items:center">
            <form method="post" action="/transcriber/transcribe" style="display:flex">
              <input type="hidden" name="key" value="{{ k }}">
              <button class="button button-utility" type="submit">MIDI</button>
            </form>
            <form method="post" action="/transcriber/sheetmusic" style="display:flex">
              <input type="hidden" name="key" value="{{ k }}">
              <button class="button button-utility" type="submit" title="MIDI + MusicXML + PDF" style="border-color:#dd5b00;color:#dd5b00">Sheet music</button>
            </form>
          </span>
        </li>
        {% endfor %}
      </ul>
      {% else %}
      <p class="faint">No audio files yet. Upload one below.</p>
      {% endif %}
    </section>

    <section class="linkout-card stack">
      <h2 class="section-title">Upload audio</h2>
      <form method="post" action="/transcriber/upload" enctype="multipart/form-data">
        <div class="form-field">
          <input class="text-input" type="file" name="file" accept="audio/*,.wav,.mp3,.flac,.m4a" required>
        </div>
        <button class="button button-primary width-full" type="submit">Upload & transcribe</button>
      </form>
      <p class="faint margin-top" style="font: var(--type-caption)">
        Saved to <strong>{{ bucket }}</strong> under <code>audio/…</code>. <strong>MIDI</strong> = Basic Pitch (fast); <strong>Sheet music</strong> = MuScriptor (MIDI+MusicXML+PDF, slow, needs HF token).
      </p>
    </section>
  </div>

  <section class="stack" style="margin-top: var(--space-xxl)">
    <h2 class="section-title">Transcriptions</h2>
    {% if transcriptions %}
    <div class="workspace">
      <ul class="file-list">
        {% for t in transcriptions %}
        <li>
          <span class="file-name" title="{{ t }}">{{ t }}</span>
          <a class="button button-utility" href="/transcriber/download?key={{ t }}" >Download</a>
        </li>
        {% endfor %}
      </ul>
    </div>
    {% else %}
    <p class="faint">Nothing transcribed yet.</p>
    {% endif %}
  </section>
</div>
{% endblock %}