{#
/**
 * @file
 * CivicTheme Campaign component.
 *
 * Props:
 * - theme: [string] Theme variation (light or dark).
 * - image_position: [string] Image position relative to content (left or right).
 * - vertical_spacing: [string] Campaign vertical spacing (top, bottom, or both).
 * - attributes: [string] Additional HTML attributes.
 * - modifier_class: [string] Additional CSS classes.
 * - image: [object] Campaign image.
 *   Each property contains:
 *   - url: [string] Image URL.
 *   - alt: [string] Image alt text.
 * - tags: [array] Campaign tags:
 *   Each item contains:
 *   - text: [string] Tag text.
 *   - url: [string] Tag URL.
 *   - is_new_window: [boolean] Whether to open tag in a new window.
 * - links: [array] Campaign 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:
 * - content_top: Top content.
 * - title: Campaign title.
 * - date: Campaign date.
 * - content: Campaign main content.
 * - content_bottom: Bottom campaign content.
 *
 * Blocks:
 * - content_top_block
 * - tags_block
 * - content_block
 * - links_block
 * - content_bottom_block
 * - image_block
 */
#}

{% set image_position = image_position in ['left', 'right'] ? image_position : 'right' %}
{% set image_position_class = 'ct-campaign--image-%s'|format(image_position) %}
{% 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 %s'|format(theme_class, vertical_spacing_class, image_position_class, modifier_class|default('')) %}

<div class="ct-campaign {{ modifier_class -}}" {% if attributes is not empty %}{{- attributes|raw -}}{% endif %}>
  <div class="container">
    <div class="row row--vertically-spaced">
      <div class="col-xxs-12 {% if image_position == 'right' %}col-m-5 col-m-offset-1{% else %}col-m-5 col-m-offset-1{% endif %} ct-flex-align-self-center">
        <div class="ct-campaign__inner">
          {% block content_top_block %}
            {% if content_top is not empty %}
              <div class="ct-campaign__content-top">
                {{ content_top|raw }}
              </div>
            {% endif %}
          {% endblock %}

          {% block tags_block %}
            {% if tags %}
              {% include 'civictheme:tag-list' with {
                theme: theme,
                tags: tags,
                modifier_class: 'ct-campaign__tags',
              } only %}
            {% endif %}
          {% endblock %}

          {% block content_block %}
            {% if title is not empty %}
              {% include 'civictheme:heading' with {
                theme: theme,
                content: title,
                level: 2,
                modifier_class: 'ct-campaign__title',
              } only %}
            {% endif %}

            {% if date is not empty %}
              {% include 'civictheme:tag' with {
                theme: theme,
                content: date,
                type: 'tertiary',
                modifier_class: 'ct-campaign__date',
              } only %}
            {% endif %}

            {% if content is not empty %}
              {% include 'civictheme:paragraph' with {
                theme: theme,
                content: content,
                allow_html: true,
                modifier_class: 'ct-campaign__content',
              } only %}
            {% endif %}

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

                {% include 'civictheme:item-list' with {
                  items: link_items,
                  size: 'regular',
                  modifier_class: 'ct-campaign__links ct-item-list--horizontal-middle',
                } only %}
              {% endif %}
            {% endblock %}
          {% endblock %}

          {% block content_bottom_block %}
            {% if content_bottom is not empty %}
              <div class="ct-campaign__content-bottom">
                {{ content_bottom|raw }}
              </div>
            {% endif %}
          {% endblock %}
        </div>
      </div>
      <div class="col-xxs-12 first {% if image_position == 'right' %}col-m-5 col-m-offset-1 last-m{% else %}col-m-5 first-m{% endif %} ct-flex-align-self-start">
        {% block image_block %}
          {% if image is not empty %}
            <div class="ct-campaign__image">
              {% include 'civictheme:image' with {
                theme: theme,
                url: image.url,
                alt: image.alt,
              } only %}
            </div>
          {% endif %}
        {% endblock %}
      </div>
    </div>
  </div>
</div>
