{% set disabled_live_chat = true %}
{% set page_class = 'browseWrapper' %}
{% extends 'layouts/default.twig' %}

{% block content %}

    
    {% include 'navigation/breadcrumbs.twig' with {
        hide_logos: false,
        class: '',
        browse_breadcrumbs: true,
        breadcrumbs: breadcrumbs_array
    } %}
    
    {% include 'includes/page_blocks/title_banner.twig' with {
        title: browse_title|raw,
        subtitle: false,
        content: false,
        dark_background: false,
        class: 'browseTitle'
    }%}
    


    <div id="loadingOverlay"></div>


    <div id="browse" role="main" class="mainBrowsePage">

        {% if settings.PRODUCT_FILTER %}
            {{ include('shop/browse/filter_sidebar_advanced.twig') }}
        {% else %}
            {{ include('shop/browse/filter_sidebar_basic.twig') }}
        {% endif %}

        <div class="filterContent">

            {% if inaccessible_item %}
                <div id="productFilterTitle" class="error">

                    {% if inaccessible_item.deleted %}
                        We no longer stock {{ inaccessible_item.name }}. Have a look around for supplements.
                    {% else %}
                        We currently do not offer {{ inaccessible_item.name }}. Have a look below instead or try coming back later.
                    {% endif %}

                </div> <!-- #productFilterTitle -->
            {% endif %}

            {#
            <div class="browseTitleWrap">
                {{ title_html|raw }}
            </div> <!-- .browseTitleWrap -->
            #}

            <div class="productSortMeta">

                
                {% if settings.PRODUCT_FILTER %}
                    <div class="triggerAdvancedProductFilter js_triggerAdvancedProductFilter buttonIcon">
                        Filter products
                        <i class="svgIcon">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M0 73.7C0 50.67 18.67 32 41.7 32H470.3C493.3 32 512 50.67 512 73.7C512 83.3 508.7 92.6 502.6 100L336 304.5V447.7C336 465.5 321.5 480 303.7 480C296.4 480 289.3 477.5 283.6 472.1L191.1 399.6C181.6 392 176 380.5 176 368.3V304.5L9.373 100C3.311 92.6 0 83.3 0 73.7V73.7zM54.96 80L218.6 280.8C222.1 285.1 224 290.5 224 296V364.4L288 415.2V296C288 290.5 289.9 285.1 293.4 280.8L457 80H54.96z" fill="currentColor"/></svg>
                        </i>
                    </div>
                {% else %}
                    <div class="triggerBasicProductFilter js_triggerBasicProductFilter buttonIcon" data-target="#productFilter">
                        Filter products
                        <i class="svgIcon">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M0 73.7C0 50.67 18.67 32 41.7 32H470.3C493.3 32 512 50.67 512 73.7C512 83.3 508.7 92.6 502.6 100L336 304.5V447.7C336 465.5 321.5 480 303.7 480C296.4 480 289.3 477.5 283.6 472.1L191.1 399.6C181.6 392 176 380.5 176 368.3V304.5L9.373 100C3.311 92.6 0 83.3 0 73.7V73.7zM54.96 80L218.6 280.8C222.1 285.1 224 290.5 224 296V364.4L288 415.2V296C288 290.5 289.9 285.1 293.4 280.8L457 80H54.96z" fill="currentColor"/></svg>
                        </i>
                    </div>
                {% endif %}

                {#  
                <div id="productCount">
                    <span class="number">{{ product_count }}</span> product{% if product_count > 1 %}s{% endif %}
                </div>
                #}

                <div id="productFilterSort">
                    {{ sort_html|raw }}
                </div>

            </div> <!-- .productSortMeta -->

            <div id="productFilterItems">
                {{ items_html|raw }}
            </div>

            <div id="productFilterPageNumbers">
                {{ pagenumber_html|raw }}
            </div> <!-- #productFilterPageNumbers -->

            {% if seo_admin.page_content is not empty and true == false %} {# disabled #}
                <section class="seoTextWrap hideme">

                    {% if seo_admin.title is not empty %}
                        <div class="seoTitle">
                            <h1>{{ seo_admin.title }}</h1>
                        </div> <!-- .seoTitle -->
                    {% endif %}

                </section> <!-- .seoTextWrap -->

                <div class="productDetailsWrap categoryDataTabs">
                    <div class="innerText pageContent">

                        <div class="tabs js_tabs" id="tabsTwo">
                            <div class="tabContent">
                                <div class="tabTitle">
                                    <h4 class="title">Overview</h4>
                                </div>
                                {{ seo_admin.page_content|raw }}
                            </div> <!-- .tabsContent -->

                            {% if seo_admin.category_causes != '' %}
                                <div class="tabContent">
                                    <div class="tabTitle">
                                        <h4 class="title">Causes</h4>
                                    </div>

                                    <div class="innerContent">
                                        {{ seo_admin.category_causes|raw }}
                                    </div>
                                </div> <!-- .tabsContent -->
                            {% endif %}

                            {% if seo_admin.category_treatments != '' %}
                                <div class="tabContent">
                                    <div class="tabTitle">
                                        <h4 class="title">Treatments</h4>
                                    </div>

                                    <div class="innerContent">
                                        {{ seo_admin.category_treatments|raw }}
                                    </div>
                                </div> <!-- .tabsContent -->
                            {% endif %}

                            {% if seo_admin.category_symptoms != '' %}
                                <div class="tabContent">
                                    <div class="tabTitle">
                                        <h4 class="title">Symptoms</h4>
                                    </div>

                                    <div class="innerContent">
                                        {{ seo_admin.category_symptoms|raw }}
                                    </div>
                                </div> <!-- .tabsContent -->
                            {% endif %}

                            {% if seo_admin.category_cautions != '' %}
                                <div class="tabContent">
                                    <div class="tabTitle">
                                        <h4 class="title">Cautions</h4>
                                    </div>

                                    <div class="innerContent">
                                        {{ seo_admin.category_cautions|raw }}
                                    </div>
                                </div> <!-- .tabsContent -->
                            {% endif %}

                            {% if seo_admin.category_side_effects != '' %}
                                <div class="tabContent">
                                    <div class="tabTitle">
                                        <h4 class="title">Side Effects</h4>
                                    </div>

                                    <div class="innerContent">
                                        {{ seo_admin.category_side_effects|raw }}
                                    </div>
                                </div> <!-- .tabsContent -->
                            {% endif %}

                            {% if seo_admin.category_information_leaflet != '' %}
                                <div class="tabContent">
                                    <div class="tabTitle">
                                        <h4 class="title">Information Leaflet</h4>
                                    </div>

                                    <div class="innerContent">
                                        {{ seo_admin.category_information_leaflet|raw }}
                                    </div>
                                </div> <!-- .tabsContent -->
                            {% endif %}

                            {% if seo_admin.category_faq != '' %}
                                <div class="tabContent">
                                    <div class="tabTitle">
                                        <h4 class="title">FAQ</h4>
                                    </div>

                                    <div class="innerContent">
                                        {{ seo_admin.category_faq|raw }}
                                    </div>

                                </div> <!-- .tabsContent -->
                            {% endif %}
                        </div>
                    </div>
                </div> <!-- .productDetailsWrap -->
            {% endif %}

        </div> <!-- .filterContent -->

    </div> <!-- #browse -->


    {% include 'shop/basket/delivery_banner.twig' with {
        no_wrapper: false,
        show_expected_delivery: true
    } %}
    
    {% include 'includes/page_blocks/image_banner.twig' with {
        image_position: "left",
        image_top_mobile: true,
        show_trustpilot: true,
        banner: homepage.pagedata['About Banner'][0],
        alt_background: true
    }%}



{% endblock %}
