{% load i18n %}
{# ============================================================ #}
{# <c-page.info> — the page's own explanation                  #}
{#                                                              #}
{# An info icon beside the page title, opening a dialog that    #}
{# says what the page is for. Rendered by <c-page.title> from   #}
{# the view's `page_info` / `page_info_actions`, so a view sets #}
{# those rather than placing this component by hand.            #}
{#                                                              #}
{# Nothing renders without `text`: a page with no explanation   #}
{# gets no icon, rather than an icon opening an empty dialog.   #}
{#                                                              #}
{# Props:                                                       #}
{#   text    – the explanation. A plain string is escaped; a    #}
{#             safe string is written out as markup.            #}
{#   title   – dialog heading (the page title)                  #}
{#   actions – dicts spread onto <c-button>, at the dialog foot #}
{# ============================================================ #}
<c-vars text title actions />
{% if text %}
  {% comment %}
    `only` on both children is load-bearing, not tidiness. This component's
    props share their names with props the children declare: c-button has its
    own `text`, and c-modal forwards a variable named `actions` into the card's
    header slot. Without an isolated context each child picks the value out of
    the surrounding scope — the whole explanation renders inside a 32px circular
    button, and the action list is written into the dialog as its repr.
  {% endcomment %}
  <c-button icon="info"
            ghost
            size="sm"
            class="btn-circle"
            type="button"
            aria-label="{% trans "About this page" %}"
            onclick="pageInfoModal.showModal()"
            only />
  <c-modal id="pageInfoModal" title="{{ title }}" icon="info" closable fade only>
    <div class="max-w-prose">{{ text }}</div>
    {% if actions %}
      <c-slot name="footer_end">
        {% for action in actions %}<c-button :attrs="action" />{% endfor %}
      </c-slot>
    {% endif %}
  </c-modal>
{% endif %}