{#
/**
 * @file
 * CivicTheme Promo Card component.
 *
 * Props:
 * - theme: [string] Theme variation (light or dark).
 * - image: [object] Card image.
 *   Each property contains:
 *   - url: [string] Image URL.
 *   - alt: [string] Image alt text.
 * - is_title_click: [boolean] Whether to make only the title clickable instead of the whole card.
 * - attributes: [string] Additional HTML attributes.
 * - modifier_class: [string] Additional CSS classes.
 * - date_iso: [string] Start date and time in ISO format.
 * - date: [string] Start date and time.
 * - date_end_iso: [string] End time in ISO format.
 * - date_end: [string] Formatted end time.
 * - link: [object] Card link object.
 *   Each property contains:
 *   - url: [string] Link URL.
 *   - is_new_window: [boolean] Whether to open the link in a new window.
 *   - is_external: [boolean] Whether the link is external.
 * - tags: [array] Card tags:
 *   Each item contains:
 *   - text: [string] Tag text.
 *   - url: [string] Tag URL.
 *   - is_new_window: [boolean] Whether to open the tag in a new window.
 *
 * Slots:
 * - subtitle: Subtitle text.
 * - title: Card title text.
 * - summary: Card summary.
 * - content_top: Top content area.
 * - image_over: Image overlay content.
 * - content_middle: Middle content area.
 * - content_bottom: Bottom content area.
 *
 * Blocks:
 * - image_block
 * - image_over_block
 * - content_block
 * - content_top_block
 * - subtitle_block
 * - date_block
 * - title_block
 * - content_middle_block
 * - summary_block
 * - content_tags_block
 * - content_bottom_block
 */
#}

{% set with_image = image.url is not empty %}
{% set with_image_class = with_image ? 'ct-promo-card--with-image' : '' %}
{% set with_link = link is not empty and link.url is defined and link.url is not empty %}
{% set is_card_clickable = with_link and is_title_click is empty %}
{% set card_clickable_class = is_card_clickable ? 'ct-promo-card--card-clickable' : '' %}
{% set image_over_class = image_over ? 'ct-promo-card--image-over' : '' %}
{% set theme_class = 'ct-theme-%s'|format(theme|default('light')) %}
{% set modifier_class = '%s %s %s %s %s'|format(theme_class, with_image_class, image_over_class, card_clickable_class, modifier_class|default('')) %}

{% if title is not empty %}
  <div class="ct-promo-card {{ modifier_class -}}" {% if attributes is not empty %}{{- attributes|raw -}}{% endif %}>
    {% block image_block %}
      {% if image.url is not empty or image_over is not empty %}
        <div class="ct-promo-card__image">
          {% include 'civictheme:image' with {
            theme: theme,
            url: image.url,
            alt: image.alt,
          } only %}

          {% block image_over_block %}
            {% if image_over is not empty %}
              <div class="ct-promo-card__image__over">
                {{ image_over }}
              </div>
            {% endif %}
          {% endblock %}
        </div>
      {% endif %}
    {% endblock %}

    {% block content_block %}
      <div class="ct-promo-card__content">
        {% block content_top_block %}
          {% if content_top is not empty %}
            <div class="ct-promo-card__content-top">
              {{- content_top|raw -}}
            </div>
          {% endif %}
        {% endblock %}

        {% block subtitle_block %}
          {% if subtitle is not empty %}
            <div class="ct-promo-card__subtitle">
              {% include 'civictheme:tag' with {
                theme: theme,
                type: 'tertiary',
                content: subtitle,
              } only %}
            </div>
          {% endif %}
        {% endblock %}

        {% 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-promo-card__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 %}

        {% block title_block %}
          {% if title is not empty %}
            {% set title_content %}
              {% if with_link %}
                <a
                  class="ct-promo-card__title-link"
                  href="{{ link.url }}"
                  {% if link.is_new_window %}target="_blank"{% endif %}
                >{{ title }}</a>
              {% else %}
                {{ title }}
              {% endif %}
            {% endset %}
            <div class='ct-promo-card__title'>{{ title_content }}</div>
          {% endif %}
        {% endblock %}

        {% block content_middle_block %}
          {% if content_middle is not empty %}
            <div class="ct-promo-card__content-middle">
              {{- content_middle|raw -}}
            </div>
          {% endif %}
        {% endblock %}

        {% block summary_block %}
          {% if summary is not empty %}
            {% include 'civictheme:paragraph' with {
              theme: theme,
              content: summary,
              allow_html: true,
              no_margin: true,
              modifier_class: 'ct-promo-card__summary',
            } only %}
          {% endif %}
        {% endblock %}

        {% block content_tags_block %}
          {% if tags or with_link %}
            <div class="ct-promo-card__tags">
              {% if tags %}
                {% include 'civictheme:tag-list' with {
                  theme: theme,
                  tags: tags,
                } only %}
              {% endif %}

              {% if is_card_clickable %}
                <div class="ct-promo-card__link-graphic">
                  {% include 'civictheme:icon' with {
                    symbol: 'right-arrow-2',
                    size: 'regular',
                  } only %}
                </div>
              {% endif %}
            </div>
          {% endif %}
        {% endblock %}

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