{% extends 'base.html' %}
{% block title %}Services{% endblock %}

{% block content %}

{# ── Season banner ─────────────────────────────────────────────────────── #}
<div class="season-banner season-{{ season.colour }}">
  <div>
    <span class="season-name">{{ season.name }}</span>
    <span class="season-horizon">Planning to {{ horizon.strftime('%-d %B %Y') }}</span>
  </div>
  <a class="btn btn-outline btn-sm"
     href="{{ url_for('pdf_route.download_season_pdf') }}">
    ↓ Season PDF
  </a>
</div>

{# ── Upcoming services ─────────────────────────────────────────────────── #}
<section>
  <h2>Upcoming Services</h2>

  {% if services %}
  <div class="table-wrap">
    <table>
      <thead>
        <tr>
          <th>Date</th>
          <th>Time</th>
          <th>Service</th>
          <th>Hymns</th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        {% for svc in services %}
        <tr>
          <td>
            <span class="date-display">{{ svc.day.strftime('%a %-d %b') }}</span>
            <span class="date-year text-muted">{{ svc.day.strftime('%Y') }}</span>
          </td>
	  <td>
            {% if svc.time %}
            <span class="text-muted">{{ svc.time.strftime('%H:%M') }}</span>
            {% else %}
            <span class="text-muted">—</span>
            {% endif %}
          </td>
          <td>{{ svc.type }}</td>
          <td>
            <span class="hymn-fill{% if svc.hymns_filled == svc.total_slots %} fill-complete{% elif svc.hymns_filled > 0 %} fill-partial{% endif %}">
              {{ svc.hymns_filled }}/{{ svc.total_slots }}
            </span>
          </td>
          <td class="row-actions">
            <a class="btn btn-outline btn-sm"
               href="{{ url_for('hymns.service_detail', date_str=svc.day.isoformat(), service_type=svc.type) }}">
              Edit
            </a>
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
  {% else %}
  <p class="text-muted">No services scheduled up to {{ horizon.strftime('%-d %B %Y') }}.
     Add one below.</p>
  {% endif %}
</section>


{# ── Season dispatch ───────────────────────────────────────────────────── #}
<section>
  <h2>Season Dispatch</h2>
  <p class="text-muted">
    Send the hymn plan for <strong>{{ next_season.name }}</strong>
    ({{ next_season.start.strftime('%-d %B') }}–{{ next_season.end.strftime('%-d %B %Y') }})
    to the configured recipients as a single PDF.
    Services already marked as emailed will not be included.
  </p>
  <form method="post"
        action="{{ url_for('services.finalise_season') }}"
        onsubmit="return confirm('Send the hymn plan for {{ next_season.name }} by email? This cannot be undone.')">
    <button type="submit" class="btn btn-primary">
      Send {{ next_season.name }} hymn plan
    </button>
  </form>
</section>


{# ── Add service ───────────────────────────────────────────────────────── #}
<section>
  <h2>Add Service</h2>
  <form class="add-service-form" method="post" action="{{ url_for('services.add_service') }}">
    <div class="form-row">
      <div class="form-group">
        <label for="day">Date</label>
        <input type="date" id="day" name="day"
               value="{{ today.isoformat() }}" required>
      </div>
      <div class="form-group">
        <label for="service_type">Service type</label>
        <select id="service_type" name="service_type" required>
          {% for st in service_types %}
          <option value="{{ st }}">{{ st }}</option>
          {% endfor %}
        </select>
      </div>
      <div class="form-group">
        <label for="time">Time</label>
        <input type="time" id="time" name="time">
      </div>
      <div class="form-group form-group--action">
        <button type="submit" class="btn btn-primary">Add</button>
      </div>
    </div>
  </form>
</section>

{% endblock %}