{% extends 'base.html' %}
{% block title %}{{ service_type }} — {{ day.strftime('%-d %B %Y') }}{% endblock %}

{% block content %}

{# ── Breadcrumb ────────────────────────────────────────────────────────── #}
<nav class="breadcrumb">
  <a href="{{ url_for('services.index') }}">Services</a>
  <span class="breadcrumb-sep">›</span>
  <span>{{ day.strftime('%-d %B %Y') }} — {{ service_type }}</span>
</nav>

{# ── Page header ───────────────────────────────────────────────────────── #}
<div class="service-header">
  <div>
    <h2 class="service-title">{{ service_type }}</h2>
    <p class="service-date text-muted">
      {{ day.strftime('%A %-d %B %Y') }}
      {% if service_time %} at {{ service_time.strftime('%H:%M') }}{% endif %}
    </p>
  </div>
  <div class="service-actions">
    <a class="btn btn-outline btn-sm"
       href="{{ url_for('pdf_route.download_pdf', date_str=day.isoformat(), service_type=service_type) }}">
      ↓ PDF
    </a>
    <form method="post"
          action="{{ url_for('services.delete_service', date_str=day.isoformat(), service_type=service_type) }}"
          style="display:inline"
          onsubmit="return confirm('Delete {{ service_type }} on {{ day.strftime('%-d %B %Y') }} and all its hymns?')">
      <button class="btn btn-danger btn-sm" type="submit">Delete service</button>
    </form>
  </div>
</div>

{# ── Lectionary readings ───────────────────────────────────────────────── #}
{% if readings %}
<section class="readings-panel">
  <h3>Readings</h3>
  <dl class="readings-list">
    {% if readings.old_testament %}
    <dt>Old Testament</dt>
    <dd><a href="https://bible.oremus.org/?passage={{ readings.old_testament | urlencode }}&version=NRSV" target="_blank">{{ readings.old_testament }}</a></dd>
    {% endif %}
    {% if readings.psalm %}
    <dt>Psalm</dt>
    <dd><a href="https://bible.oremus.org/?passage={{ readings.psalm | urlencode }}&version=NRSV" target="_blank">{{ readings.psalm }}</a></dd>
    {% endif %}
    {% if readings.epistle %}
    <dt>Epistle</dt>
    <dd><a href="https://bible.oremus.org/?passage={{ readings.epistle | urlencode }}&version=NRSV" target="_blank">{{ readings.epistle }}</a></dd>
    {% endif %}
    {% if readings.gospel %}
    <dt>Gospel</dt>
    <dd><a href="https://bible.oremus.org/?passage={{ readings.gospel | urlencode }}&version=NRSV" target="_blank">{{ readings.gospel }}</a></dd>
    {% endif %}
    {% for extra in readings.extra %}
    <dt></dt><dd>{{ extra }}</dd>
    {% endfor %}
  </dl>
</section>
{% endif %}

{# ── Placement slots ───────────────────────────────────────────────────── #}
<section>
  <h2>Hymns</h2>
  <div class="placements">
    {% for slot in placements %}
    {% set hymn = choices.get(slot) %}
    <div class="placement-row {% if hymn %}placement-filled{% else %}placement-empty{% endif %}">
      <span class="placement-label">{{ slot }}</span>

      {% if hymn %}
      {# Filled slot #}
      <div class="placement-hymn">
        <span class="hymn-number">{{ hymn.number }}</span>
        <span class="hymn-words">{{ hymn.words }}</span>
        <span class="hymn-tune text-muted">{{ hymn.tune }}{% if hymn.tune_number != 'First' %} ({{ hymn.tune_number }}){% endif %}</span>
        {% if hymn.recency_class %}
        <span class="recency-badge {{ hymn.recency_class }}" title="{{ hymn.recency_label }}">
          {{ hymn.recency_label }}
        </span>
        {% endif %}
      </div>
      <div class="placement-controls">
        <button class="btn btn-muted btn-sm search-trigger"
                data-placement="{{ slot }}">Change</button>
        <form method="post"
              action="{{ url_for('hymns.remove_hymn', date_str=day.isoformat(), service_type=service_type) }}"
              style="display:inline">
          <input type="hidden" name="placement" value="{{ slot }}">
          <button class="btn btn-danger btn-sm" type="submit"
                  onclick="return confirm('Remove {{ slot }} hymn?')">×</button>
        </form>
      </div>

      {% else %}
      {# Empty slot #}
      <span class="placement-empty-label text-muted">—</span>
      <button class="btn btn-outline btn-sm search-trigger"
              data-placement="{{ slot }}">Choose</button>
      {% endif %}
    </div>
    {% endfor %}
  </div>
</section>

{# ── Hymn search ───────────────────────────────────────────────────────── #}
<section class="search-section" id="search-section">
  <h2>Search Hymns</h2>
  <form class="filter-bar" method="get"
        action="{{ url_for('hymns.service_detail', date_str=day.isoformat(), service_type=service_type) }}">
    <div class="filter-group">
      <label for="q">Number or first line</label>
      <input type="text" id="q" name="q" value="{{ query }}"
             placeholder="262 or "Alleluia, sing…"" autofocus>
    </div>
    <div class="filter-group filter-group--narrow">
      <label for="placement">Assign to</label>
      <select id="placement" name="placement">
        <option value="">— choose slot —</option>
        {% for slot in placements %}
        <option value="{{ slot }}" {% if slot == target_placement %}selected{% endif %}>{{ slot }}</option>
        {% endfor %}
      </select>
    </div>
    <div class="filter-actions">
      <button type="submit" class="btn btn-primary">Search</button>
      {% if query %}
      <a class="btn btn-muted"
         href="{{ url_for('hymns.service_detail', date_str=day.isoformat(), service_type=service_type) }}">
        Clear
      </a>
      {% endif %}
    </div>
  </form>

  {% if query and results %}
  <div class="table-wrap">
    <table class="results-table">
      <thead>
        <tr>
          <th class="col-num">No.</th>
          <th>First line</th>
          <th>Tune</th>
          <th>Last used</th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        {% for r in results %}
        <tr class="{{ r.recency_class }}">
          <td class="col-num">{{ r.number }}</td>
          <td>{{ r.words }}</td>
          <td class="text-muted">{{ r.tune }}{% if r.tune_number != 'First' %} ({{ r.tune_number }}){% endif %}</td>
          <td>
            {% if r.recency_class %}
            <span class="recency-badge {{ r.recency_class }}">{{ r.recency_label }}</span>
            {% else %}
            <span class="text-muted">{{ r.recency_label }}</span>
            {% endif %}
          </td>
          <td>
            {% if target_placement %}
            <form method="post"
                  action="{{ url_for('hymns.assign_hymn', date_str=day.isoformat(), service_type=service_type) }}">
              <input type="hidden" name="placement"   value="{{ target_placement }}">
              <input type="hidden" name="number"      value="{{ r.number }}">
              <input type="hidden" name="tune_number" value="{{ r.tune_number }}">
              <button class="btn btn-primary btn-sm" type="submit">
                Assign to {{ target_placement }}
              </button>
            </form>
            {% else %}
            <span class="text-muted">Select a slot above first</span>
            {% endif %}
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>

  {% elif query and not results %}
  <p class="text-muted">No hymns found for <em>{{ query }}</em>.
    <a href="{{ url_for('hymn_add.add') }}">Add a new hymn?</a></p>
  {% endif %}
</section>

{# ── Quick-assign from placement buttons ───────────────────────────────── #}
<script>
  document.querySelectorAll('.search-trigger').forEach(btn => {
    btn.addEventListener('click', () => {
      const placement = btn.dataset.placement;
      document.getElementById('placement').value = placement;
      document.getElementById('search-section').scrollIntoView({ behavior: 'smooth' });
      document.getElementById('q').focus();
    });
  });
</script>

{% endblock %}