{# Template : Content with Sidebar #}

{% extends ('layouts/' ~ page_meta.layout) %}

{% block content %}


    {#
    {% include 'navigation/breadcrumbs.twig' %}
    #}
    
    {% include 'includes/page_blocks/title_banner.twig' with {
        banner: p.pagedata['Title Banner with graphic'][0],
        dark_background: false
    }%}

    <div class="pageWrap">
        

        <div class="contentPageWrap contentSidebarPage">

            <div class="innerPageContent">

                {% include 'navigation/content_sidebar.twig' with {
                    hide_contact_cta: false,
                    hide_section_menu: false,
                    class: 'hideMobile'
                }%}

                <div class="contentWrap">

                    {% include 'navigation/content_sidebar.twig' with {
                        hide_contact_cta: true,
                        hide_section_menu: false,
                        class: 'showMobile'
                    }%}

                    <div class="pageContent wysiwyg">

                        {% if p.pagedata['Title'][0]['Title']['value'] is not empty %}
                            <div class="contentTitleWrap">

                                {% if p.pagedata['Title'][0]['Title']['value'] is empty %}
                                    <h1>{{ p.pagedata['Content title'][0]['value'] }}</h1>
                                {% else %}
                                    <h2>{{ p.pagedata['Content title'][0]['value'] }}</h2>
                                {% endif %}

                            </div> <!-- .contentTitleWrap -->
                        {% endif %}

                        {% if p.pagedata['Image'][0]['value'] is not empty %}

                            <div class="contentImage firstImage">

                                <picture class="imageWrap articleImage generalContentImage">

                                    <source
                                            srcset="/{{ image_folders['cms_images']['content_image_mobile']['path'] }}/{{ p.pagedata['Image'][0]['value'] }}"
                                            media="(max-width: 640px)">

                                    <img src="/{{ image_folders['cms_images']['content_image']['path'] }}/{{ p.pagedata['Image'][0]['value'] }}"
                                         alt="{{ p.pagedata['Image'][0]['alt'] }}"
                                    >

                                </picture>

                            </div> <!-- .contentImage -->


                        {% endif %}

                        {% if p.pagedata['Content'][0]['value'] is not empty %}

                            <div class="mainBodyContent">

                                {{ p.pagedata['Content'][0]['value']|raw }}

                            </div> <!-- .mainBodyContent -->

                        {% endif %}

                        {% if p.pagedata['Extra Content'][0]['Extra Content']['value'] is not empty %}

                            <div class="extraContent">

                                {% for object in p.pagedata['Extra Content'] %}

                                    {% if object['Extra Image']['value'] is not empty %}

                                        <div class="contentImage">

                                            <picture class="imageWrap articleImage generalContentImage">

                                                <source
                                                        srcset="/{{ image_folders['cms_images']['content_image_mobile']['path'] }}/{{ object['Extra Image']['value'] }}"
                                                        media="(max-width: 640px)">

                                                <img
                                                        src="/{{ image_folders['cms_images']['content_image']['path'] }}/{{ object['Extra Image']['value'] }}"
                                                        alt="{{ object['Extra Image']['alt'] }}"
                                                        loading="lazy"
                                                >

                                            </picture>

                                        </div><!-- .contentImage -->

                                    {% endif %}

                                    {% if object['Extra Content']['value'] is not empty %}
                                        <div class="mainBodyContent">

                                            {{ object['Extra Content']['value']|raw }}

                                        </div> <!-- .mainBodyContent -->
                                    {% endif %}

                                {% endfor %}

                            </div><!-- .extraContent -->

                        {% endif %}


                    </div> <!-- .pageContent -->

                    {% if p.pagedata['Drop Down List'][0]['Drop Title']['value'] is not empty %}

                        <div class="dropdownListWrap">

                            {% if p.pagedata['Drop Down List Title'][0]['value'] is not empty %}
                                <h3>{{ p.pagedata['Drop Down List Title'][0]['value']|raw }}</h3>
                            {% endif %}

                            {% include 'includes/pages/faqs/faq.twig' with {
                                faqs: p.pagedata['Drop Down List'],
                                open_first: false
                            }%}


                        </div> <!-- .dropdownListWrap -->

                    {% endif %}



                </div> <!-- .contentWrap -->

            </div> <!-- .innerPageContent -->

        </div> <!-- .contentPageWrap -->

    </div> <!-- .pageWrap -->


{% endblock %}
