{#- Результат совместимости. result — web/views/match.py:build(). -#}
{% from "_partials/icon.html" import icon %}
{% set r = result %}
{% set who_unknown = t("match.unknown_" ~ r.unknown_who) if r.unknown_who else "" %}

<header class="match-head container">
  <h1 class="match-head__title" id="match-title">{{ t("match.h1") }}</h1>
  <a class="text-link" href="#edit" data-open-edit>{{ t("match.edit") }}</a>
</header>

{#- ---------- Итог и данные партнёров ---------- -#}
<div class="match-overview container">
  <section class="score" aria-labelledby="score-title">
    <h2 class="score__title" id="score-title">{{ t("match.score_title") }}</h2>
    <p class="score__value{% if r.score.range %} score__value--range{% endif %}"><span class="score__number">{{ r.score.text }}</span> <span class="score__max">{{ t("match.of_max", max=r.score.max) }}</span></p>
    {#- Шкала без фоновой дорожки: золото до меньшего итога, пунктир до большего (зависит от времени) -#}
    <div class="scale" aria-hidden="true">
      <span class="scale__fill" style="--to: {{ '%.3f'|format(r.score.low) }}%"></span>
      {%- if r.score.range %}
      <span class="scale__range" style="--from: {{ '%.3f'|format(r.score.low) }}%; --to: {{ '%.3f'|format(r.score.high) }}%"></span>
      {%- endif %}
    </div>
    <p class="scale__ends" aria-hidden="true"><span>0</span><span>{{ r.score.max }}</span></p>
    {%- if r.varies %}
    <p class="score__note">{{ icon("clock-countdown") }}<span>{{ t("match.varies_note." ~ r.varies) }}</span></p>
    {%- elif r.same_all_day %}
    <p class="score__note">{{ icon("info") }}<span>{{ t("match.same_all_day", who=who_unknown) }}</span></p>
    {%- endif %}
  </section>

  <section class="partners" aria-labelledby="partners-title">
    <h2 class="partners__title" id="partners-title">{{ t("match.partners_title") }}</h2>
    <div class="partners__list">
      {%- for p in r.partners %}
      <div class="partner">
        <h3 class="partner__title">{{ p.title }}</h3>
        <p class="partner__birth">{{ p.birth }}</p>
        <p class="partner__place">{{ p.place }}</p>
        <dl class="partner__facts">
          <div class="partner__fact">
            <dt>{{ t("match.moon") }}</dt>
            <dd>
              {%- if p.moon %}{{ p.moon }}
              {%- else %}
              <ul class="windows" role="list">
                {%- for v in p.variants %}
                <li><span class="windows__time">{{ v.window }}</span> <span>{{ v.moon }}</span></li>
                {%- endfor %}
              </ul>
              {%- endif %}
            </dd>
          </div>
          <div class="partner__fact">
            <dt>{{ t("match.manglik") }}</dt>
            <dd>
              <dl class="manglik">
                {%- for row in p.manglik %}
                <div class="manglik__row">
                  <dt>{{ row.label }}</dt>
                  <dd>
                    {%- if row.windows %}
                    <ul class="windows" role="list">
                      {%- for v in row.windows %}
                      <li><span class="windows__time">{{ v.window }}</span> <span class="manglik__answer">{{ v.value }}</span></li>
                      {%- endfor %}
                    </ul>
                    {%- elif row.value %}
                    <span class="manglik__answer">{{ row.value }}{% if row.detail %},{% endif %}</span>{% if row.detail %} <span class="manglik__detail">{{ row.detail }}</span>{% endif %}
                    {%- else %}
                    <span class="manglik__detail">{{ row.detail }}</span>
                    {%- endif %}
                  </dd>
                </div>
                {%- endfor %}
              </dl>
            </dd>
          </div>
        </dl>
      </div>
      {%- endfor %}
    </div>
    <p class="partners__def">{{ t("match.manglik_def")|inline }}</p>
  </section>
</div>

<div class="match-body" data-variants>
{#- ---------- Варианты при неизвестном времени ---------- -#}
{%- if r.matrix %}
<section class="match-variants container" aria-labelledby="variants-title">
  <h2 class="section-title" id="variants-title">{{ t("match.variants_title." ~ r.varies) }}</h2>
  <p class="match-variants__text">{{ t("match.variants_text", who=who_unknown) }} <span data-variants-pick>{{ t("match.variants_pick") }}</span></p>
  <div class="variants-scroll">
    <table class="variants">
      <caption class="visually-hidden">{{ t("match.matrix_caption") }}</caption>
      <thead>
        <tr>
          <td class="variants__corner" aria-hidden="true"><span class="variants__axis variants__axis--she">{{ t("match.she") }}</span><span class="variants__axis variants__axis--he">{{ t("match.he") }}</span></td>
          {%- for c in r.matrix.cols %}
          <th scope="col"><span class="visually-hidden">{{ c.who }}: </span><span class="variants__window">{{ c.window }}</span> <span class="variants__moon">{{ c.moon }}</span></th>
          {%- endfor %}
        </tr>
      </thead>
      <tbody>
        {%- for row in r.matrix.rows %}
        <tr>
          <th scope="row"><span class="visually-hidden">{{ row.who }}: </span><span class="variants__window">{{ row.window }}</span> <span class="variants__moon">{{ row.moon }}</span></th>
          {%- for combo in r.matrix.cells[loop.index0] %}
          <td>
            <label class="variants__cell">
              <input class="variants__input" type="radio" name="variant" value="{{ combo.id }}" aria-controls="{{ combo.id }}" data-variant-choice
                     {%- if combo.id == r.combos[0].id %} checked{% endif %}>
              <span class="variants__total" aria-hidden="true">{{ combo.total }}</span>
              <span class="visually-hidden">{{ t("match.cell_label", combo=combo.label, total=combo.total) }}</span>
            </label>
          </td>
          {%- endfor %}
        </tr>
        {%- endfor %}
      </tbody>
    </table>
  </div>
</section>
{%- endif %}

{#- ---------- Восемь кут ---------- -#}
<section class="match-kutas container" aria-labelledby="kutas-title">
  <h2 class="section-title" id="kutas-title">{{ t("match.kutas_title") }}</h2>
  {%- for c in r.combos %}
  <div class="kutas" id="{{ c.id }}" data-variant-panel>
    {%- if r.matrix %}
    <p class="kutas__variant">{{ t("match.cell_label", combo=c.label, total=c.total) }}</p>
    {%- endif %}
    <ol class="kutas__list" role="list">
      {%- for k in c.kutas %}
      <li class="kuta" data-kuta="{{ k.key }}">
        <div class="kuta__head">
          <h3 class="kuta__name">{{ k.name }}</h3>
          <p class="kuta__points"><span class="kuta__score">{{ k.score }}</span> <span class="kuta__max">{{ t("match.of_max", max=k.max) }}</span></p>
        </div>
        <p class="kuta__def">{{ k.definition }}</p>
        <dl class="kuta__pair">
          <div><dt>{{ t("match.he") }}</dt><dd>{{ k.he }}</dd></div>
          <div><dt>{{ t("match.she") }}</dt><dd>{{ k.she }}</dd></div>
        </dl>
        {%- if k.count %}
        <p class="kuta__count">{{ k.count }}</p>
        {%- endif %}
      </li>
      {%- endfor %}
    </ol>
  </div>
  {%- endfor %}
</section>
</div>

{#- ---------- Как посчитано ---------- -#}
<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="match-edit container" id="edit" aria-label="{{ t('match.edit') }}">
  <details class="edit" data-edit>
    <summary class="button button--secondary edit__toggle">{{ t("match.edit") }}{{ icon("caret-down", "edit__caret") }}</summary>
    <div class="edit__panel panel">
      {% include "_partials/match_form.html" %}
    </div>
  </details>
</section>