{# LIBRARIES #}
{{ attach_library('ui_patterns/link_block.link_block_lib') }}

{# VARIABLES #}
{% set item_layout = item_layout|default('vert') %}
{% set order = order|default('fwd') %}
{% set link_scope = link_scope|default('block') %}
{% set link_classes = link_classes|default('') %}
{% set title_display = title_display|default('flex') %}
{% set subtitle_display = subtitle_display|default('flex') %}

{% set header_tag = header_tag|default(false) %}
{% set title_url = false %}
{% if block_link and link_scope == 'title' %}
  {% set title_url = block_link %}
{% endif %}

{% set block_tag = "div" %}
{% set block_attributes = block_attributes|default(create_attribute()) %}
{% if block_link and (link_scope == 'block' or link_scope == 'area') %}
  {% set block_tag = "a" %}
  {% set block_attributes = block_attributes.setAttribute("href", block_link) %}
{% endif %}

{% set block_class = [
  block_class,
  'lb-item',
  'lb-' ~ item_layout,
  'lb-' ~ order,
  image_fluid ? '' : 'lb-fluid',
  image_background ? 'lb-imgbg' : '',
  responsive ? 'lb-responsive' : '',
  video ? 'vid',
  'link-scope-' ~ link_scope,
] %}

{# TEMPLATE #}
<{{ block_tag }} {{ block_attributes.addClass(block_class) }}>

{# If image, wrap all other elements in a block for flexing aginst. #}
{% if image or video or (image_src and image_alt)%}
  <div class="lbc">
{% endif %}

  {# Title. This can be a link. #}
  {% if title %}

    {% if title_url %}
      <{{ header_tag }} class="lb-header">
    {% endif %}

      {% include "@atoms/tm-links/icon-bookended/icon-bookended.twig" with {
        "attr": title_attributes|default(create_attribute()),
        "tag_name": header_tag,
        "url": title_url,
        "text": title,
        "icon_left": icon_left,
        "icon_right": icon_right,
        "display": title_display,
        "class": link_classes ~ ' blt',
      } only %}

    {% if title_url %}
      </{{ header_tag }}>
    {% endif %}

  {% endif %}

  {# If subtitle and tags, place on same row #}
  {% if subtitle and tags %}
    <div class="lbmeta">
  {% endif %}

  {# Subtitle #}
  {% if subtitle %}
    {% if subtitle_tag %}
      {% include "@atoms/tm-links/icon-bookended/icon-bookended.twig" with {
        "tag_name": subtitle_tag,
        "text": subtitle,
        "icon_left": subtitle_icon_left,
        "icon_right": subtitle_icon_right,
        "display": subtitle_display,
        "class": 'subtitle',
      } only %}
    {% else %}
      <span class="subtitle">
        {{ subtitle }}
      </span>
    {% endif %}
  {% endif %}

  {# Tags #}
  {% include "@molecules/tm-bits/tm-bits-tags.twig" with {
    'tags': tags,
    'not_links': link_scope == 'block' ? true : false,
  } only %}

  {# If subtitle and tags, place on same row #}
  {% if subtitle and tags %}
    </div>
  {% endif %}

  {# Body text #}
  {% if body %}
    <div class="lbb {{ body_class }}">
      {{ body }}
    </div>
  {% endif %}

  {# Read more text. This can be a link. #}
  {% if readmore %}
    {% if link_scope != 'block' %}
      {% set read_more_attributes = create_attribute()
        .setAttribute('aria-label', 'Read more about ' ~ title|render)
      %}
      {% include "@atoms/tm-links/icon-bookended/icon-bookended.twig" with {
        "url": block_link,
        "text": readmore,
        "class": 'readmore ' ~ read_more_class|default(''),
        "attributes": read_more_attributes,
        "icon_right": readmore_icon_right|default(false),
      } only %}
    {% else %}
      <span class="readmore">
        {{ readmore }}
      </span>
    {% endif %}
  {% endif %}

  {# Image, if any. #}
  {% if image or video or (image_src and image_alt)%}
    {# If we had an image, close the body wrapper #}
    </div>

    <div class="lbiw">
      {% if image_src and image_alt %}
        {% include "@atoms/html5/image/image.twig" with {
          "url": image_src,
          "alt": image_alt,
          "type": 'fg',
          "img_class": image_fluid ? 'w-100' : '',
          'img_attributes': img_attributes|default(create_attribute()),
        } only %}
      {% endif %}

      {% if image %}
        {{ image }}
      {% endif %}

      {% if video %}
        {{ video }}
      {% endif %}

    </div>

  {% endif %}

</{{ block_tag }}>
