{#
/**
 * @file
 * CivicTheme Callout component.
 *
 * Props:
 * - theme: [string] Theme variation (light or dark).
 * - vertical_spacing: [string] Vertical spacing position (top, bottom, both).
 * - attributes: [string] Additional HTML attributes.
 * - modifier_class: [string] Additional CSS classes.
 * - links: [array] Callout links:
 *   Each item contains:
 *   - text: [string] Link text.
 *   - url: [string] Link URL.
 *   - is_new_window: [boolean] Whether to open link in a new window.
 *   - is_external: [boolean] Whether the link is external.
 *
 * Slots:
 * - title: Title text.
 * - content: Content text.
 * - content_top: Callout top content.
 * - content_bottom: Callout bottom content.
 *
 * Blocks:
 * - content_top_block
 * - content_block
 * - links_block
 * - content_bottom_block
 */
#}

{% set vertical_spacing_class = vertical_spacing in ['top', 'bottom', 'both'] ? 'ct-vertical-spacing-inset--%s'|format(vertical_spacing) : '' %}
{% set theme_class = 'ct-theme-%s'|format(theme|default('light')) %}
{% set modifier_class = '%s %s %s'|format(theme_class, vertical_spacing_class, modifier_class|default('')) %}

<div class="ct-callout {{ modifier_class -}}" {% if attributes is not empty %}{{- attributes|raw -}}{% endif %}>
  <div class="container">
    <div class="row">
      <div class="col-xxs-12">
        <div class="ct-callout__wrapper">
          {% block content_top_block %}
            {% if content_top is not empty %}
              <div class="ct-callout__content-top">
                {{- content_top|raw -}}
              </div>
            {% endif %}
          {% endblock %}

          {% block content_block %}
            {% if title is not empty or content is not empty %}
              <div class="ct-callout__inner">
                {% if title %}
                  {% include 'civictheme:heading' with {
                    content: title,
                    level: 4,
                    theme: theme,
                    modifier_class: 'ct-callout__title',
                  } only %}
                {% endif %}

                {% if content is not empty %}
                  {% include 'civictheme:paragraph' with {
                    theme: theme,
                    content: content,
                    allow_html: true,
                    no_margin: true,
                    modifier_class: 'ct-callout__content',
                  } only %}
                {% endif %}
              </div>
            {% endif %}
          {% endblock %}

          {% block links_block %}
            {% set link_items = [] %}
            {% for link in links %}
              {%- set link %}
                {% include 'civictheme:button' with {
                  theme: theme,
                  kind: 'link',
                  type: loop.index > 1 ? 'secondary' : 'primary',
                  text: link.text,
                  url: link.url,
                  is_external: link.is_external,
                  is_new_window: link.is_new_window,
                } only %}
              {% endset -%}
              {% set link_items = link_items|merge([link]) %}
            {% endfor %}

            {% include 'civictheme:item-list' with {
              items: link_items,
              size: 'small',
              modifier_class: 'ct-callout__links',
            } only %}
          {% endblock %}

          {% block content_bottom_block %}
            {% if content_bottom is not empty %}
              <div class="ct-callout__content-bottom">
                {{- content_bottom|raw -}}
              </div>
            {% endif %}
          {% endblock %}
        </div>
      </div>
    </div>
  </div>
</div>
