{#- Результат натальной карты. result — web/views/natal.py:build(), share — поля формы для ссылки. -#}
{% from "_partials/icon.html" import icon %}
{% from "_partials/natal/badge.html" import badge %}
{% set r = result %}

<header class="natal-head container">
  <div class="natal-head__text">
    <h1 class="natal-head__title" id="natal-title">{{ t("natal.h1") }}</h1>
    <p class="natal-head__birth">
      {%- if r.name %}<span class="natal-head__name">{{ r.name }}</span>{% endif -%}
      <span>{{ r.birth.date }}, {% if r.birth.time %}{{ r.birth.time }}{% if r.birth.accuracy %} {{ r.birth.accuracy }}{% endif %}{% else %}{{ t("natal.time_unknown") }}{% endif %}, {{ r.birth.offset }}</span>
    </p>
    <p class="natal-head__place">
      {%- if r.place.label %}<span>{{ r.place.label }}</span>{% endif -%}
      <span class="natal-head__coords">{{ r.place.coords }}</span>
    </p>
  </div>
  <div class="natal-head__actions">
    <button class="button button--secondary" type="button"
            data-share="{{ share|tojson|forceescape }}" data-share-path="/{{ lang }}/natal"
            data-share-title="{{ t('natal.h1') }}"
            data-msg-copied="{{ t('natal.share_copied') }}" data-msg-manual="{{ t('natal.share_manual') }}">
      {{- icon("share-network", "button__lead") }}<span>{{ t("natal.share") }}</span>
    </button>
    <a class="text-link" href="#edit" data-open-edit>{{ t("natal.edit") }}</a>
  </div>
  <div class="natal-share" data-share-box hidden>
    <p class="natal-share__status" role="status" data-share-status></p>
    <input class="input natal-share__url" type="url" readonly data-share-url hidden aria-label="{{ t('natal.share') }}">
    <p class="natal-share__note">{{ t("natal.share_note") }}</p>
  </div>
</header>

<div class="natal-summary container">
  <p class="natal-summary__text">{{ icon("info", "natal-summary__icon") }}<span><span class="visually-hidden">{{ t("reliability.label") }}: </span>{{ r.reliability.summary|inline }}</span></p>
</div>

{#- ---------- Карта и три столпа ---------- -#}
<section class="natal-overview container" aria-labelledby="pillars-title">
  <figure class="chart panel-solid"{% if r.chart.north %} data-chart{% endif %}>
    {%- if r.chart.north %}
    <fieldset class="chart__style">
      <legend class="visually-hidden">{{ t("chart.style") }}</legend>
      <div class="segmented segmented--two">
        {%- for style in ("north", "south") %}
        <label class="segmented__item">
          <input class="segmented__input" type="radio" name="chart-style" value="{{ style }}" data-chart-style
                 {%- if loop.first %} checked{% endif %}>
          <span class="chip">{{ t("chart." ~ style) }}</span>
        </label>
        {%- endfor %}
      </div>
    </fieldset>
    <div class="chart__view chart__view--north">
      {{ r.chart.north }}
      <p class="chart__note">{{ t("chart.north_note") }}</p>
    </div>
    {%- endif %}
    <div class="chart__view chart__view--south">
      {{ r.chart.south }}
      <p class="chart__note">{{ t("chart.south_note" if r.chart.north else "chart.unknown_note") }}</p>
    </div>
  </figure>

  <div class="pillars">
    <h2 class="pillars__title" id="pillars-title">{{ t("pillars.title") }}</h2>
    {%- for p in r.pillars %}
    <section class="pillar{% if p.missing %} pillar--missing{% endif %}" aria-labelledby="pillar-{{ p.key }}">
      <div class="pillar__head">
        <h3 class="pillar__name" id="pillar-{{ p.key }}">{{ p.title }}</h3>
        {{ badge(p.badge) }}
      </div>
      <p class="pillar__value">{{ p.value }}{% if p.degree %} <span class="pillar__degree">{{ p.degree }}</span>{% endif %}</p>
      {%- if p.facts %}
      <dl class="pillar__facts">
        {%- for f in p.facts %}
        <div class="pillar__fact">
          <dt>{{ f.label }}</dt>
          <dd>{{ f.value }}{% if f.badge %} {{ badge(f.badge) }}{% endif %}</dd>
        </div>
        {%- endfor %}
      </dl>
      {%- endif %}
      <p class="pillar__def">{{ p.definition|inline }}</p>
    </section>
    {%- endfor %}
  </div>
</section>

{#- ---------- Планеты ---------- -#}
<section class="natal-planets container" aria-labelledby="planets-title">
  <h2 class="section-title" id="planets-title">{{ t("planets.title") }}</h2>
  {%- if r.planets_note %}
  <p class="natal-note">{{ icon("info") }}<span>{{ r.planets_note }}</span></p>
  {%- endif %}
  <table class="planets" role="table" aria-labelledby="planets-title">
    <thead role="rowgroup">
      <tr role="row">
        <th scope="col" role="columnheader">{{ t("planets.col_planet") }}</th>
        <th scope="col" role="columnheader">{{ t("planets.col_sign") }}</th>
        <th scope="col" role="columnheader" class="num">{{ t("planets.col_degree") }}</th>
        {%- if r.known_time %}
        <th scope="col" role="columnheader" class="num">{{ t("planets.col_house") }}</th>
        {%- endif %}
        <th scope="col" role="columnheader">{{ t("planets.col_nakshatra") }}</th>
        <th scope="col" role="columnheader">{{ t("planets.col_dignity") }}</th>
        <th scope="col" role="columnheader"><abbr title="{{ t('planets.col_retro_full') }}">{{ t("planets.col_retro") }}</abbr></th>
        <th scope="col" role="columnheader">{{ t("planets.col_combust") }}</th>
      </tr>
    </thead>
    <tbody role="rowgroup">
      {%- for p in r.planets %}
      <tr class="planets__row{% if p.key == 'lagna' %} planets__row--lagna{% endif %}" role="row">
        <th scope="row" role="rowheader" class="planets__name"><span class="planets__abbr" aria-hidden="true">{{ p.abbr }}</span> {{ p.name }}</th>
        <td role="cell" class="planets__sign">{{ p.sign }}</td>
        <td role="cell" class="planets__degree num">{{ p.degree }}</td>
        {%- if r.known_time %}
        <td role="cell" class="planets__house num"><span class="planets__m">{{ t("planets.col_house") }} </span>{{ p.house }}</td>
        {%- endif %}
        <td role="cell" class="planets__nakshatra">{{ p.nakshatra }}, {{ p.pada }}</td>
        <td role="cell" class="planets__dignity">{{ p.dignity or "" }}</td>
        <td role="cell" class="planets__retro">{% if p.retro %}<abbr title="{{ t('planets.retro') }}">R</abbr>{% endif %}</td>
        <td role="cell" class="planets__combust">{% if p.combust %}<span class="planets__m">{{ t("planets.col_combust") }}: </span>{{ t("planets.combust_yes") }}, <span class="planets__distance">{{ p.combust }}</span>{% endif %}</td>
      </tr>
      {%- endfor %}
    </tbody>
  </table>
</section>

{#- ---------- Периоды ---------- -#}
{% set periods = r.periods %}
<section class="natal-periods container" aria-labelledby="periods-title">
  <div class="natal-periods__head">
    <h2 class="section-title" id="periods-title">{{ t("periods.title") }}</h2>
    {{ badge(periods.badge) }}
  </div>

  {%- if periods.now %}
  <div class="period-now">
    <p class="period-now__label">{{ t("periods.now") }}</p>
    <p class="period-now__title">{{ periods.now.title }}</p>
    <dl class="period-now__rows">
      {%- for row in periods.now.rows %}
      <div class="period-now__row">
        <dt>{{ row.label }}</dt>
        <dd><span class="period-now__name">{{ row.name }}</span> <span class="period-now__until">{{ row.until }}</span></dd>
      </div>
      {%- endfor %}
    </dl>
  </div>
  {%- endif %}

  {#- Лента: те же махадаши, что в списке ниже, по длительности; для чтения экраном — список -#}
  <div class="ribbon" aria-hidden="true">
    <div class="ribbon__track">
      {%- for s in periods.ribbon.segments %}
      <div class="ribbon__segment ribbon__segment--{{ s.state }}" style="--share: {{ '%.3f'|format(s.share) }}%" title="{{ s.name }}"><span>{{ s.abbr }}</span></div>
      {%- endfor %}
    </div>
    {%- if periods.ribbon.now is not none %}
    <div class="ribbon__now" style="--at: {{ '%.3f'|format(periods.ribbon.now) }}%"><span>{{ t("periods.current") }}</span></div>
    {%- endif %}
  </div>

  <div class="periods">
    <div class="periods__header" aria-hidden="true">
      <span>{{ t("periods.col_lord") }}</span><span>{{ t("periods.col_start") }}</span><span>{{ t("periods.col_end") }}</span><span>{{ t("periods.col_length") }}</span>
    </div>
    <ol class="periods__list" role="list">
      {%- for p in periods.list %}
      <li class="period period--{{ p.state }}">
        <details class="period__details"{% if p.state == "current" %} open{% endif %}>
          <summary class="period__row">
            <span class="period__name">{{ p.name }}{% if p.state == "current" %} <span class="pill">{{ t("periods.current") }}</span>{% endif %}</span>
            <span class="period__dates"><span class="num">{{ p.start }}</span> <span class="num">{{ p.end }}</span></span>
            <span class="period__length">{{ p.length }}</span>
            {{ icon("caret-down", "period__caret") }}
          </summary>
          <ol class="antar" role="list" aria-label="{{ t('periods.antardashas', lord=p.name) }}">
            {%- for a in p.antar %}
            <li class="antar__row antar__row--{{ a.state }}">
              <span class="antar__name">{{ a.name }}{% if a.state == "current" %} <span class="pill">{{ t("periods.current") }}</span>{% endif %}</span>
              <span class="num">{{ a.start }}</span>
              <span class="num">{{ a.end }}</span>
            </li>
            {%- endfor %}
          </ol>
        </details>
      </li>
      {%- endfor %}
    </ol>
  </div>
</section>

{#- ---------- Садэ-сати ---------- -#}
{% set s = r.sade_sati %}
<section class="natal-sade container" aria-labelledby="sade-title">
  <div class="sade__intro">
    <h2 class="section-title" id="sade-title">{{ t("sade_sati.title") }}</h2>
    <p class="sade__def">{{ t("sade_sati.def")|inline }}</p>
  </div>
  <div class="sade panel-solid{% if s.active %} sade--active{% endif %}">
    <div class="sade__status">
      <p class="sade__state">{{ s.status }} <span class="sade__asof">{{ s.as_of }}</span></p>
      {{ badge(s.badge) }}
    </div>
    {%- if s.phase %}
    <p class="sade__phase">{{ s.phase }}</p>
    {%- endif %}
    <ol class="sade__zone" role="list" aria-label="{{ t('sade_sati.zone') }}">
      {%- for z in s.zone %}
      <li class="sade__sign{% if z.current %} sade__sign--current{% endif %}"{% if z.current %} aria-current="true"{% endif %}>
        <span class="sade__sign-name">{{ z.sign }}</span>
        <span class="sade__sign-label">{{ z.label }}</span>
      </li>
      {%- endfor %}
    </ol>
    <dl class="sade__dates">
      {%- if s.cycle %}
      <div><dt>{{ t("sade_sati.cycle") }}</dt><dd>{{ s.cycle }}</dd></div>
      {%- endif %}
      <div><dt>{{ t("sade_sati.next") }}</dt><dd>{{ s.next }}</dd></div>
    </dl>
  </div>
</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 }}</li>
    {%- endfor %}
  </ul>
  <p class="natal-forecast">{{ t("natal.forecast")|inline }} <a href="/{{ lang }}/#waitlist">{{ t("natal.forecast_link") }}</a></p>
</section>

{#- ---------- Изменить данные ---------- -#}
<section class="natal-edit container" id="edit" aria-label="{{ t('natal.edit') }}">
  <details class="edit" data-edit>
    <summary class="button button--secondary edit__toggle">{{ t("natal.edit") }}{{ icon("caret-down", "edit__caret") }}</summary>
    <div class="edit__panel panel">
      {% include "_partials/natal_form.html" %}
    </div>
  </details>
</section>