{% extends "area_base.html" %}

{% block title %}{{ page.title if page else 'Worship Support' }} | TheOrganist24{% endblock %}

{% block area_content %}
<h1>{{ page.title if page else 'Worship Support' }}</h1>
{% if page and page.body %}
  <p>{{ page.body | nl2br }}</p>
{% endif %}

{% macro render_service(service, highlight=false) %}
<article class="service-card{% if highlight %} service-card--current{% endif %}">
  <header class="service-card__header">
    <span class="service-card__church">{{ service.church }}</span>
    <span class="service-card__type">{{ service.service_type }}</span>
    <span class="service-card__date">{{ service.day.strftime("%-d %B %Y") }}</span>
    {% if service.time %}
      <span class="service-card__time">{{ service.time.strftime("%-I:%M %p") }}</span>
    {% endif %}
  </header>

  {% if service.music %}
  <section class="service-card__section">
    <h3 class="service-card__section-title">Organ</h3>
    <dl class="service-card__list">
      {% for m in service.music %}
      <div class="service-card__row">
        <dt>{{ m.placement }}</dt>
        <dd>{{ m.title }}<span class="service-card__composer"> — {{ m.composer }}</span></dd>
      </div>
      {% endfor %}
    </dl>
  </section>
  {% endif %}

  {% if service.hymns %}
  <section class="service-card__section">
    <h3 class="service-card__section-title">Hymns</h3>
    <dl class="service-card__list">
      {% for h in service.hymns %}
      <div class="service-card__row">
        <dt>{{ h.placement }}</dt>
        <dd>
          <span class="service-card__hymn-number">{{ h.number }}</span>
          {{ h.first_line }}
          <span class="service-card__tune">({{ h.tune }})</span>
          {% if h.verses %}
            <span class="service-card__verses">vv.&nbsp;{{ h.verses | join(", ") }}</span>
          {% endif %}
        </dd>
      </div>
      {% endfor %}
    </dl>
  </section>
  {% endif %}

  {% if not service.music and not service.hymns %}
  <p class="service-card__empty">No music details recorded yet.</p>
  {% endif %}

</article>
{% endmacro %}

{% if this_sunday %}
<section class="worship-block worship-block--current">
  <h2 class="worship-block__heading">This Sunday</h2>
  {{ render_service(this_sunday, highlight=true) }}
</section>
{% endif %}

{% if upcoming %}
<section class="worship-block">
  <h2 class="worship-block__heading">Upcoming</h2>
  {% for service in upcoming %}
    {{ render_service(service) }}
  {% endfor %}
</section>
{% endif %}

{% if recent %}
<section class="worship-block worship-block--recent">
  <h2 class="worship-block__heading">Recent</h2>
  {% for service in recent %}
    {{ render_service(service) }}
  {% endfor %}
</section>
{% endif %}

{% endblock %}