{% set isLink       = (href is defined and href is not empty and (isClickable is not defined or isClickable is same as (true))) %}
{% set haslink      = (href is defined and href is not empty and linkLabel is defined and linkLabel is not empty ) %}
{% set hasImage     = image.src is defined and image.src is not empty %}
{% set hasIcon      = iconName is defined and iconName is not empty %}
{% set hasVisual    = hasImage or hasIcon %}

<{{ isLink ? 'a' : 'div' }}
    {% if isLink %}
        href='{{ href|default('') }}'
    {% endif %}
    class='bf-banner d-flex align-items-center {% if hasVisual %}bf-banner--has-visual{% endif %} {{class|default('')}}'
>

    {% if hasVisual %}
        <div class='bf-banner__visual'>
            {% if hasImage %}
                <img
                    src='{{ image.src|default('') }}'
                    data-src='{{ image.dataSrc|default('') }}'
                    alt='{{ image.alt|default('') }}'
                />
            {% elseif hasIcon %}
                {% include '@bf-components/icon/twig/index.twig' with {
                    name    : iconName,
                    size    : 'large'
                } only %}
            {% endif %}
        </div>
    {% endif %}

    <div class='bf-banner__content'>
        <p class='small font-weight-bold mb-1'>
            {{ title|default('') }}
        </p>
        {% if paragraph is defined and paragraph is not empty %}
            <p class='small m-0'>
                {{ paragraph }}
                <br/>
                {% if haslink and isClickable is defined and isClickable is same as(false) %}
                    <a class='bf-link' href='{{ href }}'>{{ linkLabel }}</a>
                {% endif %}
            </p>
        {% endif %}
    </div>

    {% if badge is defined and badge is not empty %}

        {% if badge is iterable %}
            {% set badgeLabel = badge.label %}
        {% else %}
            {% set badge = { label: badge } %}
        {% endif %}

        {% set badge = badge|merge( { 'angle': badge.angle|default('left') } ) %}
        {% include '@bf-components/badge/twig/index.twig' with badge only %}
    {% endif %}

</{{ isLink ? 'a' : 'div' }}>