{% assign featureCount = 0 %}
{% for item in page.features_column %}   
    {%- if item.featuresTemplate -%}        
        {% assign featureCount = featureCount | plus: 1 %}
        {% assign template_name = item.featuresTemplate | append: '.html'%}
        {% include {{ template_name }}  %}
    {% elsif item.featureColumnCount == 1 %}
        {% assign featureCount = featureCount | plus: 1 %}
        {% assign feature_image_background = "" %} 
        {% if item.featureBackgroundImage %} 
            {% capture feature_bg_image %}{% picture featureBackgroundImage_col1 pages/{{ item.featureBackgroundImage }} %}{% endcapture %} 	
            {% assign temp_feature_bg_image_array = feature_bg_image | split: '"' %}	
            {% assign feature_image_background = temp_feature_bg_image_array[1] %}
        {% endif %}
<section class="container-fluid my-2 p-0 bg-cover bg-center position-relative {{ item.featureClasses }}" style="background-image: url({{ feature_image_background }});">
    <div class="{{ item.featureMaskType }} py-5 w-100">
        <div class="container my-sm-5 py-5 text-center">
            {% if item.featureHeader %}
                <h1 class="{{ item.featureHeaderClasses }} fw-normal display-4">{{ item.featureHeader }}</h1>
            {% endif %}
            {% if item.featureSubheader %}
                <h2 class="{{ item.featureSubheaderClasses }} p-2 fw-light">{{ item.featureSubheader }}</h2>
            {% endif %}
            <div class="{{ item.featureButtonClasses }}">
                {% for buttons in item.featureButtons %} 
                    <a class="{{ buttons.buttonClass }} m-2 p-2 d-inline-block" href="{{ buttons.buttonLink }}"><span class="border-bottom brdrClr-themeColor py-1">{{ buttons.buttontext }}</span>&gt;</a>
                {% endfor %}
            </div>                    
            {% if item.featureImage %}
                {% picture featureInnerImage pages/{{ item.featureImage }} class="{{ item.featureImageClass }}" alt="{{ item.featureImage | remove: '.png' | remove: '.webp' | remove: '.jpg'| replace: '-',' ' | replace: '_',' ' }}" %}   
            {% endif %}
            {% if item.featureImageChipsColumnCount > 0 %}
                {%- assign chipClasses = "col-6 col-md-4" -%}
                {%- if item.featureImageChipsColumnCount == 4 -%}
                    {%- assign chipClasses = "col-6 col-sm-4 col-md-3" -%}
                {%- elsif item.featureImageChipsColumnCount == 3 -%}
                    {%- assign chipClasses = "col-6 col-sm-4" -%}
                {%- endif -%}
                <div class="row gy-5 mt-sm-4 mt-2 justify-content-center align-items-center">
                    {% for chips in item.featureImageChips %}
                        <div class="{{ chipClasses }}">
                            {% picture featureChipsIcon pages/{{ chips.chipImageURL }} class="img-fluid" alt="{{ chips.chipImageURL | remove: '.png' | remove: '.webp' | remove: '.jpg'| replace: '-',' ' | replace: '_',' ' }}" %}
                        </div>	
                    {% endfor %}
                </div>
            {% endif %}
            {% if item.featureExpandable %}
                <button class="accordion-button toggleDivAccordion collapsed position-absolute bottom-0 end-0 w-minContent rounded m-4" data-bs-toggle="collapse" href="#featureCollapse{{ featureCount }}" role="button" aria-expanded="false" aria-controls="featureCollapse{{ featureCount }}"></button>
            {% endif %}
        </div>
    </div>
</section>

{% if item.featureExpandable %} 
<div class="collapsing text-secondary bg-light" id="featureCollapse{{ featureCount }}">
    <div class="container">
        {% for featureExpandable in item.featureExpandable %}
            <div class="row">
                <div class="col-12 col-sm-10 col-md-8 offset-sm-1 offset-md-2 my-5">
                    {% if featureExpandable.expandableHeaderText %}                                 
                        <div class="d-flex align-items-center justify-content-start">
                            {% if featureExpandable.expandableHeaderIcon %} 
                                {% picture expandableHeaderIcon pages/{{ featureExpandable.expandableHeaderIcon }} class="maxH-50px img-fluid" alt="{{ featureExpandable.expandableHeaderIcon | remove: '.png' | remove: '.webp' | remove: '.jpg'| replace: '-',' ' | replace: '_',' ' }}" %}	
                            {% endif %}
                            <h4 class="m-0">&nbsp;{{ featureExpandable.expandableHeaderText }}</h4>
                        </div>
                        <hr />
                    {% endif %}
                    {% if featureExpandable.expandableBody %} 
                        <div class="fw-normal px-1 px-sm-5 py-1">
                            {{ featureExpandable.expandableBody }}
                        </div>
                    {% endif %}
                </div>
            </div>
        {% endfor %}   
    </div>
</div>
        {% endif %}

    {% elsif item.featureColumnCount == 2 %}
        {% assign columnCount = 0 %}
        {% assign featureCount = featureCount | plus: 1 %}
        {% assign feature_image_background = "" %} 
        {% if item.featureBackgroundImage %} 
            {% capture feature_bg_image %}{% picture featureBackgroundImage_col1 pages/{{ item.featureBackgroundImage }} %}{% endcapture %} 	
            {% assign temp_feature_bg_image_array = feature_bg_image | split: '"' %}	
            {% assign feature_image_background = temp_feature_bg_image_array[1] %}
        {% endif %}
<section class="container-fluid my-2 mx-0 p-0 bg-cover bg-center position-relative" style="background-image: url({{ feature_image_background }});">
    <div class="{{ item.featureMaskType }} row p-0 mx-0 w-100 h-100">
        {% for column in item.columnsData %} 
            {% assign columnCount = columnCount | plus: 1 %}
            {% assign columnModulo = columnCount | modulo: 2 %}
            {% assign column_image_background = "" %} 
            {% if columnModulo == 0 %}
                {% assign columnSideClass = 'ps-lg-1' %}
            {% else %}
                {% assign columnSideClass = 'pe-lg-1' %}
            {% endif %}
            {% if column.columnBackgroundImage %} 
                {% capture column_bg_image %}{% picture featureBackgroundImage_col2 pages/{{ column.columnBackgroundImage }} %}{% endcapture %} 	
                {% assign temp_column_bg_image_array = column_bg_image | split: '"' %}	
                {% assign column_image_background = temp_column_bg_image_array[1] %}
            {% endif %}
            {% assign columnClass = column.columnClasses | append: ' ' | append: columnSideClass }} %}
            <div class="col-12 col-lg-6 ps-0 pe-0 {{ columnClass }} position-relative">
                <div class="w-100 h-100 bg-cover bg-center" style="background-image: url({{ column_image_background }});">
                    <div class="{{ column.columnMaskTypeClasses }} py-5 w-100 h-100">
                        <div class="{% if column.columnLastContainerClass %} {{ column.columnLastContainerClass }} {% else %} my-sm-5 py-5 px-sm-5 px-1 text-center {% endif %}">
                            {% if column.columnHeader %}
                                <h1 class="{{ column.columnHeaderClasses }} fw-normal display-4">{{ column.columnHeader }}</h1>
                            {% endif %}
                            {% if column.columnSubheader %}
                                <h3 class="{{ column.columnSubheaderClasses }} p-2 fw-light">{{ column.columnSubheader }}</h3>
                            {% endif %}
                            {% if column.columnButtons %}
                                <div class="{{ column.columnButtonClasses }}">
                                    {% for buttons in column.columnButtons %} 
                                        <a class="{{ buttons.buttonClass }} m-2 p-2 d-inline-block" href="{{ buttons.buttonLink }}"><span class="border-bottom brdrClr-themeColor p-1">{{ buttons.buttontext }}</span>&gt;</a>
                                    {% endfor %}
                                </div>
                            {% endif %}
                            {% if column.columnExpandable %}
                                <button class="accordion-button toggleDivAccordion collapsed position-absolute bottom-0 end-0 w-minContent rounded m-4" data-bs-toggle="collapse" id="featureCollapse{{ featureCount }}ColumnButton{{ columnCount }}" href="#featureCollapse{{ featureCount }}Column{{ columnCount }}" role="button" aria-expanded="false" aria-controls="featureCollapse{{ featureCount }}Column{{ columnCount }}"></button>
                            {% endif %}
                            {% if column.columnImage %}
                                {% picture columnInnerImage pages/{{ column.columnImage }} class="{{ column.columnImageClass }}" alt="{{ column.columnImage | remove: '.png' | remove: '.webp' | remove: '.jpg'| replace: '-',' ' | replace: '_',' ' }}" %}
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>
        {% endfor %}
    </div>
</section>

<div id="grpFeatureCollapse{{ featureCount }}" class="p-0 m-0">
    {% assign columnCount = 0 %}
    {% for column in item.columnsData %} 
        {% assign columnCount = columnCount | plus: 1 %}
        <div class="collapsing text-secondary bg-light" data-bs-parent="grpFeatureCollapse{{ featureCount }}" data-button-id="featureCollapse{{ featureCount }}ColumnButton{{ columnCount }}" id="featureCollapse{{ featureCount }}Column{{ columnCount }}">
            <div class="container">
                {% for columnExpandable in column.columnExpandable %}
                    <div class="row">
                        <div class="col-12 col-sm-10 col-md-8 offset-sm-1 offset-md-2 my-5">
                            {% if columnExpandable.expandableHeaderText %}                                 
                                <div class="d-flex align-items-center justify-content-start">
                                    {% if columnExpandable.expandableHeaderIcon %} 
                                        {% picture expandableHeaderIcon pages/{{ columnExpandable.expandableHeaderIcon }} class="maxH-50px img-fluid" alt="{{ columnExpandable.expandableHeaderIcon | remove: '.png' | remove: '.webp' | remove: '.jpg'| replace: '-',' ' | replace: '_',' ' }}" %}
                                    {% endif %}
                                    <h4 class="m-0">&nbsp;{{ columnExpandable.expandableHeaderText }}</h4>
                                </div>
                                <hr />
                            {% endif %}
                            {% if columnExpandable.expandableBody %} 
                                <div class="fw-normal px-1 px-sm-5 py-1">
                                    {{ columnExpandable.expandableBody }}
                                </div>
                            {% endif %}
                        </div>
                    </div>
                {% endfor %}   
            </div>
        </div>    
    {% endfor %}  
</div>


{% endif %} 

{% endfor %}