{# src/fledermap/web/templates/_recording_panel.html #}
{% if not found %}
<p>Recording not found — it may have been removed, or no longer matches the active filters.</p>
{% else %}
<div class="panel-header">
  <h2>{{ recording_headline(taxon, best) }}</h2>
  <a class="details-link" href="/recordings/{{ recording.audio_hash }}?return_to=/?{{ filter_qs }}">Full page</a>
  <button
    type="button"
    class="favourite-toggle"
    hx-post="/recordings/{{ recording.audio_hash }}/favourite?{{ filter_qs }}"
    hx-target="#drawer-body"
    aria-label="{{ 'Remove from favourites' if recording.favourite else 'Add to favourites' }}"
    aria-pressed="{{ 'true' if recording.favourite else 'false' }}"
  >{{ "★" if recording.favourite else "☆" }}</button>
</div>

<div class="waveform-grid">
  <div class="axis-spacer"></div>
  <div class="oscillogram-wrap">
    {% if oscillogram_ready %}
    <img class="oscillogram" src="{{ url_for('media.oscillogram', audio_hash=recording.audio_hash) }}" alt="Waveform">
    {% else %}
    <p class="media-placeholder media-placeholder-small">Waveform not processed yet.</p>
    {% endif %}
  </div>

  <div class="axis-freq">
    {% if max_freq_khz %}
    <span>{{ "%.0f"|format(max_freq_khz) }} kHz</span>
    <span>{{ "%.0f"|format(max_freq_khz / 2) }} kHz</span>
    <span>0 kHz</span>
    {% endif %}
  </div>
  <div class="spectrogram-wrap">
    {% if spectrogram_ready %}
    <img class="spectrogram" src="{{ url_for('media.spectrogram', audio_hash=recording.audio_hash) }}" alt="Spectrogram" data-duration-s="{{ duration_s }}" data-max-freq-khz="{{ max_freq_khz }}">
    <div class="playback-cursor" hidden></div>
    {% else %}
    <p class="media-placeholder">Spectrogram not processed yet.</p>
    {% endif %}
  </div>

  <div class="axis-spacer"></div>
  <div class="axis-time">
    {% if duration_s %}
    <span>0.0s</span>
    <span>{{ "%.2f"|format(duration_s / 2) }}s</span>
    <span>{{ "%.2f"|format(duration_s) }}s</span>
    {% endif %}
  </div>
</div>

<div class="audio-row">
  {% if preview_ready %}
  <div
    class="audio-controls"
    data-preview-url="{{ url_for('media.preview', audio_hash=recording.audio_hash) }}"
    data-het-preview-url-template="{{ url_for('media.het_preview', audio_hash=recording.audio_hash) }}?freq_hz=FREQ_HZ"
    data-peak-frequency-url="{{ url_for('media.peak_frequency', audio_hash=recording.audio_hash) }}"
    data-time-expansion-factor="{{ time_expansion_factor }}"
  >
    <button class="tool-button" data-mode="expanded" aria-pressed="true" title="Time Expansion (×10)">TE</button>
    <button class="tool-button" data-mode="het" aria-pressed="false">HET</button>
    <span class="het-freq-control" hidden>
      <input type="number" class="het-freq-input" step="1" inputmode="decimal"> kHz
      <button type="button" class="het-freq-reset" title="Reset to auto-tuned frequency">⟲</button>
    </span>
    <button type="button" class="playback-rewind" aria-label="Rewind to start">⏮</button>
    <button type="button" class="playback-toggle" aria-label="Play">▶</button>
    <audio hidden></audio>
  </div>
  {% else %}
  <p class="media-placeholder">Audio preview not processed yet.</p>
  {% endif %}
</div>

<div class="panel-columns">
  <div class="col identifications">
    <h3>Identifications</h3>
    <ul>
      {% for ident, status in identifications_with_status %}
      <li class="identification-{{ status }}">
        {{ ident.source.value }}:
        {% if ident.taxon %}<a href="/species/{{ ident.taxon.id }}">{{ identification_label(ident, ident.taxon) }}</a>{% else %}{{ identification_label(ident, ident.taxon) }}{% endif %}
      </li>
      {% endfor %}
    </ul>
  </div>
  <div class="col recording-meta">
    <h3>Recording</h3>
    <p>{{ recording.recorded_at.isoformat() }}</p>
    <p>{{ recording.make }} {{ recording.model }}</p>
  </div>
  <div class="col context">
    <h3>Context</h3>
    {% if recording_session %}
    <p>Session: <a href="/sessions/{{ recording_session.id }}">{{ recording_session.started_at.strftime('%Y-%m-%d %H:%M') }}–{{ recording_session.ended_at.strftime('%H:%M') }} ({{ recording_session.detector_key | detector_label }})</a></p>
    {% endif %}
    {% if site %}
    <p>Site: <a href="/sites/{{ site.id }}?return_to=/?{{ filter_qs }}">{{ site_label }}</a></p>
    {% elif recording.geom is not none %}
    <p>No site (outlier)</p>
    {% else %}
    <p>No location data</p>
    {% endif %}
    {% if previous %}
    <button type="button" hx-get="/recordings/{{ previous.audio_hash }}/panel?{{ filter_qs }}" hx-target="#drawer-body">← Previous</button>
    {% endif %}
    {% if next %}
    <button type="button" hx-get="/recordings/{{ next.audio_hash }}/panel?{{ filter_qs }}" hx-target="#drawer-body">Next →</button>
    {% endif %}
  </div>
</div>
{% endif %}