{# LIBRARIES #}
{{ attach_library('ui_patterns/bs_slide.slide_lib') }}

{# VARIABLES #}
{% set active = active|default(false) %}
{% set overlay_col = overlay_col|default('col-md-12') %}
{% set sid = sid|default('sid-' ~ random()) %}
{% set slide_attributes = slide_attributes|default(create_attribute())
  .setAttribute("id", "crsls-#{ sid }")
%}
{% set slide_classes = [
  slide_classes|default(""),
  active ? 'active',
  'carousel-item',
  'link-scope-' ~ link_scope,
] %}

{# TEMPLATE #}
<div {{ slide_attributes.addClass(slide_classes) }}>
  <div class="slide-inner">

    {# This allows us to set a whole slide if we need to #}
    {% block carousel_slide %}
      {% if slide %}
        {{ slide|raw }}
      {% endif %}
    {% endblock %}

    {# Main or background image #}
    {% block carousel_image %}
      {% if image %}
        {{ image|raw }}
      {% endif %}
      {% if image_src and image_alt %}
        {% include "@atoms/html5/image/image.twig" with {
          "url": image_src,
          "alt": image_alt,
          "img_class": 'crsl-img',
        } only %}
      {% endif %}
    {% endblock %}

    {# If we want to pass fleids, then pass them to a link block #}
    {% if title or subtitle or body or overlay or overlay_src %}
      <div class="container crsl-blk">

        <div class="row">

          {# @todo make better logic here for this ! #}
          {% set slide_card_width = overlay_col %}
          {% if overlay_col == 'col-md-12' %}
            {% set slide_card_width = 'col-md-6' %}
          {% endif %}
          {% if overlay or overlay_src %}
            {% set slide_card_width = overlay_col %}
          {% endif %}

          <div class="slide-text {{ slide_card_width }}">

            {# Overlay image #}
            {% if overlay_src or overlay %}
              {% if link_url %}<a href="{{ link_url }}">{% endif %}
              {% if overlay %}
                {# This image should have class 'ovr-img' #}
                {{ overlay|raw }}
              {% endif %}
              {% if overlay_src and overlay_alt %}
                {% include "@atoms/html5/image/image.twig" with {
                  "url": overlay_src,
                  "alt": overlay_alt,
                  "img_class": 'ovr-img',
                } only %}
              {% endif %}
              {% if link_url %}</a>{% endif %}
            {% endif %}

            {# Link block #}
            {% set title_icon_right = "" %}
            {% set subtitle_icon_right = "" %}

            {% if link_url %}
              {% if title %}
                {% set title_icon_right = global_icon_right|default('fas fa-chevron-right') %}
              {% else %}
                {% set subtitle_icon_right = global_icon_right|default('fas fa-chevron-right') %}
              {% endif %}
            {% endif %}

            {% set link_scope_class = '' %}
            {% if link_scope is same as('title') %}
              {% set link_scope_class = 'cbelianr' %}
            {% endif %}
            {% if link_scope is same as('block') %}
              {% set link_scope_class = 'cbelianr' %}
            {% endif %}

            {% if title or subtitle or body %}
              {% include "@molecules/tm-lb/link-block/link-block.twig" with {
                "title": title,
                "icon_right": title_icon_right,
                "subtitle": subtitle,
                "subtitle_icon_right": subtitle_icon_right,
                "body": body,
                "block_link": link_url,
                "header_tag": 'h3',
                "subtitle_tag": 'h4',
                "title_display": 'inline',
                "subtitle_display": 'inline',
                "link_scope": link_scope,
                "readmore": readmore,
                "read_more_class": readmore_class,
                "block_class": 'bl-vg ' ~ link_scope_class
              } only %}
            {% endif %}

          </div>
        </div>
      </div>
    {% endif %}

  </div>
</div>
