{#- Панчанг на день: result — web/views/panchang.py:build(), city — выбранный город.
    Моменты приходят готовыми («12:57», «15:22, 20 сентября»); шаблон только ставит их в фразу. -#}
{% from "_partials/icon.html" import icon %}
{% set r = result %}
{% set link = "/" ~ lang ~ "/panchang/?city=" ~ city.id ~ "&date=" %}

{% macro when(m) -%}<time datetime="{{ m.iso }}">{{ m.text }}</time>{%- endmacro %}

{#- Фраза перевода, где моменты заменены на ⟨1⟩ и ⟨2⟩: порядок слов задаёт язык, а не шаблон -#}
{% macro fill(text, a, b=None) -%}
{%- set head, rest = text.split("⟨1⟩") -%}
{{ head }}{{ when(a) }}
{%- if b -%}
  {%- set mid, tail = rest.split("⟨2⟩") -%}
  {{ mid }}{{ when(b) }}{{ tail }}
{%- else -%}
  {{ rest }}
{%- endif -%}
{%- endmacro %}

<header class="pan-head container">
  <div class="pan-head__text">
    <h1 class="pan-head__title" id="panchang-title">{{ t("panchang.h1") }}</h1>
    <p class="pan-head__day">{{ r.day.title }}</p>
    <p class="pan-head__place">
      <span>{{ r.place.label }}</span>
      <span class="pan-head__coords">{{ r.place.coords }}</span>
      <span class="pan-head__coords">{{ r.place.tz }}</span>
    </p>
  </div>
  <div class="pan-head__actions">
    <nav class="day-nav" aria-label="{{ t('panchang.day_nav') }}">
      {%- if r.nav.prev %}
      <a class="day-nav__link" href="{{ link }}{{ r.nav.prev.iso }}" rel="prev">
        {{- icon("caret-left") }}<span class="visually-hidden">{{ t("panchang.prev") }}: </span>{{ r.nav.prev.label }}</a>
      {%- endif %}
      {%- if r.nav.next %}
      <a class="day-nav__link" href="{{ link }}{{ r.nav.next.iso }}" rel="next">
        <span class="visually-hidden">{{ t("panchang.next") }}: </span>{{ r.nav.next.label }}{{ icon("caret-right") }}</a>
      {%- endif %}
    </nav>
    <a class="text-link" href="#edit" data-open-edit>{{ t("panchang.change") }}</a>
  </div>
</header>

{%- if r.basis == "midnight" %}
<div class="container">
  <p class="pan-note">{{ icon("info", "pan-note__icon") }}<span>{{ t("panchang.no_sunrise") }}</span></p>
</div>
{%- endif %}

{#- ---------- Пять элементов, Солнце и Луна ---------- -#}
<div class="pan-overview container">
  <section class="pan-elements" aria-labelledby="elements-title">
    <div class="pan-elements__head">
      <h2 class="section-title" id="elements-title">{{ t("panchang.elements.title") }}</h2>
      <p class="pan-elements__span">{{ r.elements.span }}</p>
    </div>
    <ol class="limbs" role="list">
      {%- for limb in r.elements.limbs %}
      <li class="limb" data-limb="{{ limb.key }}">
        <div class="limb__term">
          <h3 class="limb__name">{{ limb.name }}</h3>
          <p class="limb__def">{{ limb.definition }}</p>
        </div>
        <ol class="limb__spans" role="list">
          {%- for item in limb.spans %}
          <li class="limb__span{% if loop.first %} limb__span--first{% endif %}">
            <span class="limb__value">
              {%- if not loop.first %}<span class="limb__then">{{ t("panchang.elements.then") }}</span> {% endif -%}
              {{ item.value|inline }}{% if item.note %} <span class="limb__note">{{ item.note }}</span>{% endif -%}
            </span>
            <span class="limb__end">{{ fill(t("panchang.elements.until", time="⟨1⟩"), item.end) }}</span>
          </li>
          {%- endfor %}
        </ol>
      </li>
      {%- endfor %}
    </ol>
  </section>

  <aside class="pan-aside panel-solid">
    <section aria-labelledby="sky-title">
      <h2 class="pan-aside__title" id="sky-title">{{ t("panchang.sky.title") }}</h2>
      <div class="pan-sky">
        {%- for group in ("sun", "moon") %}
        <div class="pan-sky__group">
          <h3 class="pan-sky__name">
            {{- icon("sun-horizon" if group == "sun" else "moon") }}<span>{{ t("panchang.sky." ~ group) }}</span></h3>
          <dl class="pan-sky__rows">
            {%- for row in r.sky[group] %}
            <div class="pan-sky__row">
              <dt>{{ row.label }}</dt>
              <dd>{% if row.moment %}{{ when(row.moment) }}{% else %}<span class="pan-sky__missing">{{ row.missing }}</span>{% endif %}</dd>
            </div>
            {%- endfor %}
          </dl>
        </div>
        {%- endfor %}
      </div>
    </section>

    <section class="pan-aside__block" aria-labelledby="paksha-title">
      <h2 class="pan-aside__title" id="paksha-title">{{ t("panchang.paksha.title") }}</h2>
      <p class="pan-aside__value">{{ r.paksha.name|inline }}</p>
      {%- if r.paksha.change %}
      <p class="pan-aside__note">{{ r.paksha.change|inline }}</p>
      {%- endif %}
      <p class="pan-aside__def">{{ r.paksha.definition }}</p>
    </section>

    <section class="pan-aside__block" aria-labelledby="moon-sign-title">
      <h2 class="pan-aside__title" id="moon-sign-title">{{ t("panchang.moon_sign.title") }}</h2>
      <p class="pan-aside__value">{{ r.moon_sign.name }}</p>
      <p class="pan-aside__note">{{ r.moon_sign.at }}</p>
      <p class="pan-aside__def">{{ r.moon_sign.definition }}</p>
    </section>

    {%- if r.lunar_days %}
    <section class="pan-aside__block" aria-labelledby="lunar-title">
      <h2 class="pan-aside__title" id="lunar-title">{{ t("panchang.lunar.title") }}</h2>
      <ol class="pan-lunar" role="list">
        {%- for d in r.lunar_days %}
        <li class="pan-lunar__item">
          <span class="pan-lunar__number">{{ d.number }}</span>
          <span class="pan-lunar__range">{{ fill(t("panchang.lunar.range", start="⟨1⟩", end="⟨2⟩"), d.start, d.end) }}</span>
        </li>
        {%- endfor %}
      </ol>
      <p class="pan-aside__def">{{ t("panchang.lunar.def") }}</p>
    </section>
    {%- endif %}
  </aside>
</div>

{#- ---------- Периоды дня ---------- -#}
<section class="pan-periods container" aria-labelledby="periods-title">
  <div class="pan-periods__head">
    <h2 class="section-title" id="periods-title">{{ t("panchang.periods.title") }}</h2>
    <p class="pan-periods__lead">{{ t("panchang.periods." ~ ("lead" if r.periods else "none")) }}</p>
  </div>
  {%- if r.periods %}
  {#- Полоса светового дня: восемь равных частей, три из них заняты; Абхиджит идёт поверх середины -#}
  <div class="daybar" aria-hidden="true">
    <p class="daybar__ends">
      <span>{{ t("panchang.periods.sunrise_at", time=r.periods.sunrise.text) }}</span>
      <span class="daybar__middle">{{ r.periods.middle.short }}</span>
      <span>{{ t("panchang.periods.sunset_at", time=r.periods.sunset.text) }}</span>
    </p>
    <div class="daybar__track">
      {%- for _ in range(8) %}<span class="daybar__eighth"></span>{% endfor %}
      {%- for p in r.periods.entries %}
      {%- if p.part %}<span class="daybar__kalam" style="grid-column: {{ p.part }}"></span>
      {%- else %}<span class="daybar__abhijit" style="--left: {{ '%.3f'|format(p.left) }}%; --width: {{ '%.3f'|format(p.width) }}%"></span>
      {%- endif %}{% endfor %}
    </div>
    <p class="daybar__labels">
      {%- for p in r.periods.entries %}{% if p.part %}<span class="daybar__label{% if p.part == 1 %} daybar__label--first{% elif p.part == 8 %} daybar__label--last{% endif %}" style="grid-column: {{ p.part }}">{{ p.short }}</span>{% endif %}{% endfor %}
    </p>
  </div>
  <ol class="pan-periods__list" role="list">
    {%- for p in r.periods.entries %}
    <li class="pan-period" data-period="{{ p.key }}">
      <p class="pan-period__range">{{ fill(t("panchang.range", start="⟨1⟩", end="⟨2⟩"), p.start, p.end) }}</p>
      <h3 class="pan-period__name">{{ p.name|inline }}</h3>
    </li>
    {%- endfor %}
  </ol>
  {%- endif %}
</section>

{#- ---------- Как посчитано ---------- -#}
<section class="conventions container" aria-labelledby="conventions-title">
  <h2 class="conventions__title" id="conventions-title">{{ t("conventions.title") }}</h2>
  <ul class="conventions__list" role="list">
    {%- for item in r.conventions %}
    <li>{{ item|inline }}</li>
    {%- endfor %}
  </ul>
</section>

{#- ---------- Другой город или дата ---------- -#}
<section class="pan-edit container" id="edit" aria-label="{{ t('panchang.change') }}">
  <details class="edit" data-edit>
    <summary class="button button--secondary edit__toggle">{{ t("panchang.change") }}{{ icon("caret-down", "edit__caret") }}</summary>
    <div class="edit__panel panel">
      {% include "_partials/panchang/form.html" %}
    </div>
  </details>
</section>