{% spaceless %}

{#
  Parameters:
  - "variant" (string) (default: 'default') Variant of banner (can be 'primary', 'secondary', 'white', 'image', 'image-shade', 'image-gradient')
  - "title" (string) (default: '') Title of banner
  - "image" (string) (default: '') Image for banner (required for image banner variant)
  - "credit" (string) (default: '') Credit for the image
  - "description" (string) (default: '') Description of banner
  - "centered" (bool) (default: true) Define if banner should be centered
  - "full_width": (bool) (default: false) Full width banner (inside the grid)
  - "link" (associative array) (default: predefined structure) predefined structure for the Link component
  - "extra_classes" (optional) (string) (default: '')
  - "extra_attributes" (optional) (array) (default: [])
    - "name" (string) Attribute name, eg. 'data-test'
    - "value" (optional) (string) Attribute value, eg: 'data-test-1'
#}

{# Internal properties #}

{% set _css_class = 'ecl-hero-banner' %}
{% set _extra_attributes = '' %}
{% set _variant = variant|default('primary') %}
{% set _centered = centered ?? true %}
{% set _full_width = full_width|default(false) %}
{% set _title = title|default('') %}
{% set _description = description|default('') %}
{% set _image = image|default('') %}
{% set _credit = credit|default('') %}
{% set _link = link|default({}) %}

{# Internal logic - Process properties #}

{% set _css_class = _css_class ~ ' ecl-hero-banner--' ~ _variant %}

{% if _centered %}
  {% set _css_class = _css_class ~ ' ecl-hero-banner--centered' %}
{% endif %}

{% if _full_width %}
  {% set _css_class = _css_class ~ ' ecl-hero-banner--full-width' %}
{% endif %}

{% if extra_classes is defined and extra_classes is not empty %}
  {% set _css_class = _css_class ~ ' ' ~ extra_classes %}
{% endif %}

{% if extra_attributes is defined and extra_attributes is not empty and extra_attributes is iterable %}
  {% for attr in extra_attributes %}
    {% if attr.value is defined %}
      {% set _extra_attributes = _extra_attributes ~ ' ' ~ attr.name|e('html_attr') ~ '="' ~ attr.value|e('html_attr') ~ '"' %}
    {% else %}
      {% set _extra_attributes = _extra_attributes ~ ' ' ~ attr.name|e('html_attr') %}
    {% endif %}
  {% endfor %}
{% endif %}

{# Print the result #}

<section class="{{ _css_class }}"{{ _extra_attributes|raw }}>
{% if _image is not empty and _variant in ['image', 'image-shade', 'image-gradient'] %}
  <div class="ecl-hero-banner__image" style="background-image:url({{ _image }})"></div>
{% endif %}
{% if _credit is not empty and _variant in ['image', 'image-shade', 'image-gradient'] %}
  <div class="ecl-hero-banner__credit">{{ _credit }}</div>
{% endif %}
  <div class="ecl-container">
    <div class="ecl-hero-banner__container">
    {% if _title is not empty or _description is not empty or _link is not empty %}
      <div class="ecl-hero-banner__content">
        <div class="ecl-hero-banner__title">{{ _title }}</div>
        {% if _description is not empty %}
          <p class="ecl-hero-banner__description">
            <span class="ecl-hero-banner__description-text">{{ _description }}</span>
          </p>
        {% endif %}
        {% if _link is not empty %}
          {% set _link_extra_classes = 'ecl-hero-banner__link-cta' %}
          {% if _link.extra_classes is defined and _link.extra_classes is not empty %}
            {% set _link_extra_classes = _link_extra_classes ~ ' ' ~ _link.extra_classes %}
          {% endif %}
          <div class="ecl-hero-banner__cta">
          {% include '@ecl/link/link.html.twig' with _link|merge({
            link: _link.link|merge({
              type: 'cta',
            }),
            extra_classes: _link_extra_classes,
          }) only %}
          </div>
        {% endif %}
      </div>
    {% endif %}
    </div>
  </div>
</section>

{% endspaceless %}