{#
/**
 * @file
 * CivicTheme Slider Slide component.
 *
 * Props:
 * - theme: [string] Theme variation (light or dark).
 * - image_position: [string] Image position (left or right).
 * - attributes: [string] Additional HTML attributes.
 * - modifier_class: [string] Additional CSS classes.
 * - image: [object] Slide image object.
 *   Each property contains:
 *   - url: [string] Image URL.
 *   - alt: [string] Image alt text.
 * - tags: [array] Tags array:
 *   Each item contains:
 *   - text: [string] Tag text.
 *   - url: [string] Tag URL.
 *   - is_new_window: [boolean] Whether to open tag in a new window.
 * - date_iso: [string] Start date and time in ISO format.
 * - date_end_iso: [string] Optional end date and time in ISO format.
 * - links: [array] Link objects array:
 *   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.
 * - date: [string] Start date and time.
 * - date_end: [string] Optional end date and time.
 *
 * Slots:
 * - content_top: Top content area.
 * - title: Slide title.
 * - content: Content text.
 * - content_bottom: Bottom slide content.
 *
 * Blocks:
 * - image_block
 * - content_top_block
 * - tags_block
 * - content_block
 * - date_block
 * - links_block
 * - content_bottom_block
 */
#}

{% set theme_class = 'ct-theme-%s'|format(theme|default('light')) %}
{% set modifier_class = '%s %s'|format(theme_class, modifier_class|default('')) %}

<div class="ct-slide {{ modifier_class -}}" role="group" aria-roledescription="slide" data-slider-slide {% if attributes is not empty %}{{ attributes|raw -}}{% endif %}>
  <div class="row ct-slide__row">
    {% block image_block %}
      {% if image is not empty %}
        <div class="col-xxs-12 col-m-5 first {% if image_position == 'right' %}col-m-offset-1 last-m{% else %}first-m{% endif %}">
          <div class="ct-slide__image">
            {% include 'civictheme:image' with {
              theme: theme,
              url: image.url,
              alt: image.alt,
            } only %}
          </div>
        </div>
      {% endif %}
    {% endblock %}

    <div class="col-xxs-12 col-m-5 col-m-offset-1 ct-flex-align-self-center">
      <div class="ct-slide__inner">
        {% block content_top_block %}
          {% if content_top is not empty %}
            <div class="ct-slide__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-slide__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-slide__title',
            } only %}
          {% endif %}

          {% block date_block %}
            {% if date is not empty %}
              {% set date_content %}
                {% include 'civictheme:datetime' with {
                  start: date,
                  start_iso: date_iso|default(null),
                  end: date_end|default(null),
                  end_iso: date_end_iso|default(null),
                } only %}
              {% endset %}

              <div class="ct-slide__date">
                {% include 'civictheme:tag' with {
                  theme: theme,
                  type: date_end ? 'secondary' : 'tertiary',
                  content: date_content,
                  icon: date_end ? 'calendar-2' : null,
                  icon_placement: 'before',
                } only %}
              </div>
            {% endif %}
          {% endblock %}

          {% if content is not empty %}
            {% include 'civictheme:paragraph' with {
              theme: theme,
              content: content,
              allow_html: true,
              modifier_class: 'ct-slide__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' : 'secondary',
                    text: link.text,
                    url: link.url,
                    is_external: link.is_external,
                    is_new_window: link.is_new_window,
                    modifier_class: 'ct-slide__links__link',
                  } only %}
                {% endset %}
                {% set link_items = link_items|merge([link_item]) %}
              {% endfor %}

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

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