{% set breadcrumbClasses = 'w-auto p-3 lg:p-0 font-body text-brand-gray-i whitespace-nowrap active:ring-brand-terracotta-i active:ring-2 active:ring-offset-2 focus:ring-brand-terracotta-i focus:ring-2 focus:ring-offset-2' %}

<section class="resources-header-panel w-full relative">
    <div class="container-wrapper max-w-none mx-auto">
        <div class="padding-wrapper p-0">
            <div class="content-wrapper w-full flex flex-col justify-start items-start">
                {% if panel.headerImage | length %}
                    <div class="image-wrapper w-full h-36 xs:h-40 sm:h-44 lg:h-52 xl:h-56 2xl:h-64 3xl:h-[20rem] flex flex-col justify-start items-start">
                        {% for image in panel.headerImage.all() %}
                            {% include themeDir ~ '/_includes/_modules/_optimized-image.twig' with
                                {
                                    'lazyLoad': 'false',
                                    'imgStyles': '!w-full !h-full !object-cover !object-center'
                                }
                            %}
                        {% endfor %}
                    </div>
                {% endif %}
                <div class="breadcrumbs-wrapper bg-mintyy-gray-i w-full flex flex-row justify-center items-center">
                    <div class="padding-wrapper w-full p-4 sm:p-6 lg:p-4">
                        <div class="content-wrapper w-full flex flex-row justify-center items-center">
                            <div class="links-wrapper w-full px-2 lg:w-auto bg-white-pure lg:bg-transparent rounded-md lg:rounded-none flex flex-row justify-start lg:justify-center items-center lg:gap-4">
                                <span class="{{ breadcrumbClasses }} 1.5xs:hidden">
                                    ...
                                </span>
                                <a href="/" class="{{ breadcrumbClasses }} hidden 1.5xs:block">
                                    Home
                                </a>
                                {{ svg(svgPath ~ '/core/caret-right.svg') | attr({ class: 'w-[0.375rem] min-w-[0.375rem] text-black-primary' }) }}
                                <a href="/resource-centre" class="{{ breadcrumbClasses }} xs:hidden">
                                    Resources
                                </a>
                                <a href="/resource-centre" class="{{ breadcrumbClasses }} hidden xs:block">
                                    Resource Centre
                                </a>
                                {% if entry.parent | length %}
                                    {% if entry.parent.parent | length %}
                                        {{ svg(svgPath ~ '/core/caret-right.svg') | attr({ class: 'w-[0.375rem] min-w-[0.375rem] text-black-primary' }) }}
                                        <a href="{{ entry.parent.parent.url }}" class="{{ breadcrumbClasses }} hidden sm:block">
                                            {{ entry.parent.parent.title }}
                                        </a>
                                        <span class="{{ breadcrumbClasses }} sm:hidden">
                                            ...
                                        </span>
                                    {% endif %}
                                    {{ svg(svgPath ~ '/core/caret-right.svg') | attr({ class: '1.5xs:hidden w-[0.375rem] min-w-[0.375rem] text-black-primary' }) }}
                                    <span class="{{ breadcrumbClasses }} 1.5xs:hidden">
                                        ...
                                    </span>
                                    {{ svg(svgPath ~ '/core/caret-right.svg') | attr({ class: 'hidden 1.5xs:block w-[0.375rem] min-w-[0.375rem] text-black-primary' }) }}
                                    <a href="{{ entry.parent.url }}" class="{{ breadcrumbClasses }} hidden 1.5xs:block">
                                        {{ entry.parent.title }}
                                    </a>
                                {% endif %}
                                {{ svg(svgPath ~ '/core/caret-right.svg') | attr({ class: 'w-[0.375rem] min-w-[0.375rem] text-black-primary' }) }}
                                <a href="{{ entry.url }}" class="{{ breadcrumbClasses }} truncate">
                                    {{ entry.title }}
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="header-wrapper w-full flex flex-col justify-start items-start bg-brand-terracotta-aa">
                    <div class="padding-wrapper w-full px-6 sm:px-8 lg:px-10 py-8 sm:py-10 lg:py-12 xl:py-16">
                        <div class="content-wrapper w-full flex flex-col justify-center items-center">
                            <h1 class="w-full text-center font-header text-white-pure font-bold text-4xl lg:text-5xl">
                                {{ panel.header }}
                            </h1>
                            {% if panel.paragraph | length %}
                                <div class="wysiwyg font-body text-center prose lg:prose-lg prose-invert text-white mt-6 sm:mt-8 lg:mt-10">
                                    {{ panel.paragraph }}
                                </div>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>