{% extends "base.html" %}

{% block title %}{{ work.opus }}: {{ work.title }} | {{ content.title if content else area.title }} | TheOrganist24{% endblock %}

{% block content %}

<nav class="section-nav">
  <a href="{{ url_scheme }}://music.{{ base_domain }}/compositions">← Compositions</a>
</nav>

<section class="page-header">
  <p class="opus-label">{{ work.opus }}</p>
  <h1>{{ work.title }}</h1>
  {% if work.dedication %}
    <p class="work-meta">Dedicated to {{ work.dedication }}</p>
  {% endif %}
  {% if work.summary %}
    <p class="work-meta">{{ work.summary }}</p>
  {% endif %}
</section>

{% if work.publication_status == 'pending' %}
<div class="publication-notice">
  <p>{{ work.publication_note }}</p>
</div>
{% endif %}

{# ── Movements ─────────────────────────────────────────── #}
{% if sections or movements %}
<section class="movements">
  <h2>Movements</h2>

  {% if sections %}
    {% for section in sections %}
    <div class="work-section">
      <h3>{{ section.title }}</h3>
      <ol class="movement-list">
        {% for movement in section.movements %}
        <li class="movement-item">
          <span class="movement-numeral">{{ movement.numeral }}</span>
          <span class="movement-title">{{ movement.title }}</span>
          {% if movement.movement_type %}
            <span class="movement-meta">{{ movement.movement_type }}{% if movement.forces %} — {{ movement.forces }}{% endif %}</span>
          {% elif movement.forces %}
            <span class="movement-meta">{{ movement.forces }}</span>
          {% endif %}
          {% if movement.programme_note %}
            <p class="movement-note">{{ movement.programme_note }}</p>
          {% endif %}
        </li>
        {% endfor %}
      </ol>
    </div>
    {% endfor %}

  {% else %}
    <ol class="movement-list">
      {% for movement in movements %}
      <li class="movement-item">
        <span class="movement-numeral">{{ movement.numeral }}</span>
        <span class="movement-title">{{ movement.title }}</span>
        {% if movement.movement_type %}
          <span class="movement-meta">{{ movement.movement_type }}{% if movement.forces %} — {{ movement.forces }}{% endif %}</span>
        {% elif movement.forces %}
          <span class="movement-meta">{{ movement.forces }}</span>
        {% endif %}
        {% if movement.programme_note %}
          <p class="movement-note">{{ movement.programme_note }}</p>
        {% endif %}
      </li>
      {% endfor %}
    </ol>
  {% endif %}
</section>
{% endif %}

{# ── Assets — suppressed when pending publication ─────── #}
{% if work.publication_status != 'pending' and assets %}
<section class="work-assets">
  <h2>Scores and materials</h2>

  {% set scores = assets | selectattr('asset_type', 'equalto', 'score') | list %}
  {% set illustrations = assets | selectattr('asset_type', 'equalto', 'illustration') | list %}
  {% set audio_assets = assets | selectattr('asset_type', 'equalto', 'audio') | list %}
  {% set video_assets = assets | selectattr('asset_type', 'equalto', 'video') | list %}
  {% set oos_assets = assets | selectattr('asset_type', 'equalto', 'order_of_service') | list %}

  {% macro asset_label(asset) %}
    {%- if asset.movement_title %}{{ asset.numeral }}. {{ asset.movement_title }} — {% endif -%}
    {{ asset.label }}{% if asset.score_type %} ({{ asset.score_type }}){% endif %}
  {% endmacro %}

  {% if scores %}
  <div class="asset-group">
    <h3>Scores</h3>
    <nav class="section-nav">
      {% for asset in scores %}
      <a href="/assets/{{ asset.path }}" target="_blank" rel="noopener noreferrer">{{ asset_label(asset) }}</a>
      {% endfor %}
    </nav>
    {% for asset in scores %}
      {% if asset.credit %}<p class="asset-credit">{{ asset.credit }}</p>{% endif %}
    {% endfor %}
  </div>
  {% endif %}

  {% if illustrations %}
  <div class="asset-group">
    <h3>Illustrations</h3>
    <nav class="section-nav">
      {% for asset in illustrations %}
      <a href="/assets/{{ asset.path }}" target="_blank" rel="noopener noreferrer">
        {%- if asset.movement_title %}{{ asset.numeral }}. {{ asset.movement_title }}{% else %}{{ asset.label or 'View' }}{% endif -%}
      </a>
      {% endfor %}
    </nav>
    {% for asset in illustrations %}
      {% if asset.credit %}<p class="asset-credit">{{ asset.credit }}</p>{% endif %}
    {% endfor %}
  </div>
  {% endif %}

  {% if oos_assets %}
  <div class="asset-group">
    <h3>Order of service</h3>
    <nav class="section-nav">
      {% for asset in oos_assets %}
      <a href="/assets/{{ asset.path }}" target="_blank" rel="noopener noreferrer">{{ asset.label or 'Download' }}</a>
      {% endfor %}
    </nav>
  </div>
  {% endif %}

  {% if audio_assets or video_assets %}
  <div class="asset-group">
    <h3>Recordings</h3>
    <nav class="section-nav">
      {% for asset in audio_assets %}
      <a href="/assets/{{ asset.path }}" target="_blank" rel="noopener noreferrer">
        {%- if asset.movement_title %}{{ asset.numeral }}. {{ asset.movement_title }} — {% endif -%}
        {{ asset.label or 'Audio' }}
      </a>
      {% endfor %}
      {% for asset in video_assets %}
      <a href="/assets/{{ asset.path }}" target="_blank" rel="noopener noreferrer">
        {%- if asset.movement_title %}{{ asset.numeral }}. {{ asset.movement_title }} — {% endif -%}
        {{ asset.label or 'Video' }}
      </a>
      {% endfor %}
    </nav>
  </div>
  {% endif %}

</section>
{% endif %}

{# ── Recordings ────────────────────────────────────────── #}
{% if recordings %}
<section class="recording-events">
  <h2>Recordings</h2>
  {% for rec in recordings %}
  <div class="recording">
    <p class="recording-meta">
      {{ rec.recorded_on.strftime('%d %B %Y') }}
      {% if rec.venue %} — {{ rec.venue }}{% endif %}
      {% if rec.npor %}
        — <a href="https://npor.org.uk/survey/{{ rec.npor }}" target="_blank" rel="noopener noreferrer" class="external-link">{{ rec.npor }}</a>
      {% elif rec.instrument %}
        — {{ rec.instrument }}
      {% endif %}
      {% if rec.movement_title %} — {{ rec.numeral }}. {{ rec.movement_title }}{% endif %}
    </p>
    {% if rec.notes %}
      <p class="recording-notes">{{ rec.notes }}</p>
    {% endif %}
    {% if rec.youtube_url %}
    <nav class="section-nav">
      <a href="{{ rec.youtube_url }}" target="_blank" rel="noopener noreferrer">Watch on YouTube</a>
    </nav>
    {% endif %}
    {% if rec.performers %}
    <details class="performers">
      <summary>Performers</summary>
      <ul class="performers-list">
        {% for p in rec.performers %}
        <li>{{ p.name }} — {{ p.role }}</li>
        {% endfor %}
      </ul>
    </details>
    {% endif %}
  </div>
  {% endfor %}
</section>
{% endif %}

{% endblock %}