{% if banner is empty %}
    {% set banner = p.pagedata['Title Banner'][0] %}
    {% set isStandard = true %}
{% endif %}


{% set has_slider = false %}

{% if banner['Banner Image 2']['value'] is not empty or banner['Banner Image 3']['value'] is not empty %}
    {% set has_slider = true %}
{% endif %}

{% if title is empty %}
    {% set title = banner['Title']['value']  %}
{% endif %}

{% if subtitle is empty %}
    {% set subtitle = banner['Subtitle']['value']  %}
{% endif %}

{% if content is empty %}
    {% set content = banner['Content']['value']  %}
{% endif %}


{% if hide_subtitle is not empty %}
    {% set subtitle = '' %}
{% endif %}

{% set left_aligned = true %}

<div
        class="
            titleBanner
            altButtonColors
            {% if alt_bg_colors is not empty %} altBgColors {% endif %}
            {% if banner['Banner Image']['value'] is not empty %} withImage {% endif %}
            {% if isStandard is not empty %} standard {% endif %}
            {% if left_aligned is not empty %} leftAlign {% endif %}
            {{ class }}
        ">

    <div class="wrapper">

        <div class="innerTitleBanner">

            <div class="bannerContentWrap">

                <div class="innerContentWrapper">

                    {% include 'includes/elements/title_wrap.twig' with {
                        title: title,
                        subtitle: subtitle,
                        content: content,
                        class: '',
                        dark_background: false,
                        raw_content: raw_content,
                        alt_button_colors: true,
                        button_link_1: button_link_1,
                        button_text_1: button_text_1,
                        scrollTo: scrollTo,
                        icon_points: icon_points,
                        card_data: card_data
                    }%}

                </div> <!-- .innerContentWrapper -->


            </div> <!-- .bannerContent -->

        </div> <!-- .innerTitleBanner -->


    </div> <!-- .wrapper -->

    

    {% if category_image is not empty %}

        
        <div class="imageBackground imageBannerCategory">

            <picture class="imageWrap">

              
                {% if banner['Banner Image']['value'] is not empty and banner['Banner Image']['path'] is not empty %}
                    <img
                            src="{{ banner['Banner Image']['path'] }}{{ banner['Banner Image']['value'] }}"
                            alt="{{ banner['Banner Image']['alt'] }}"
                            width="1674"
                            height="368"
                    />
                {% else %}
                    <img
                            src="/sites/default/images/placeholders/default-hero.png"
                            alt="{{ title}}"
                            width="1674"
                            height="368"
                    />
                {% endif %}


            </picture> <!-- .imageWrap -->

        </div> <!-- .imageBackground -->

    {% else %}
        
        <div class="imageBackground">

            <picture class="imageWrap">
              
                {% if banner['Banner Image']['value'] is not empty %}
                    <img
                            src="/{{ image_folders['cms_images']['title_banner']['path'] }}/{{ banner['Banner Image']['value'] }}"
                            alt="{{ banner['Banner Image']['alt'] }}"
                            width="1674"
                            height="368"
                    />
                {% else %}
                    <img
                            src="/sites/default/images/placeholders/default-hero.png"
                            alt="{{ title}}"
                            width="1674"
                            height="368"
                    />
                {% endif %}
  

            </picture> <!-- .imageWrap -->

        </div> <!-- .imageBackground -->

    {% endif %}


</div> <!-- .titleBanner -->
