<div class="container collapsible-content" {% render 'overwrite-theme-style', settings: section.settings %}>
    
    {%- if section.settings.heading != blank -%}
        {%- capture style -%}
            {%- if section.settings.heading_alignment != 'left' -%}
                text-align: {{ section.settings.heading_alignment }};
            {%- endif -%}
        {%- endcapture -%}

        <h2 {% render 'overwrite-theme-style', text_color: section.settings.heading_color, font_size: section.settings.heading_font_size, append_style: style %}>{{ section.settings.heading }}</h2>
    {%- endif -%}

    {%- capture style -%}
        {%- if section.settings.background_color == blank -%}
            padding: 0px;
        {%- else -%}
            {%- assign alpha = section.settings.background_color | color_extract: 'alpha' -%}

            {%- if alpha == 0 -%}
                padding: 0px;
            {%- endif -%}
        {%- endif -%}
    {%- endcapture -%}
    <div class="collapsible-content-container" {% render 'overwrite-theme-style', background_color: section.settings.background_color, append_style: style %}>

        {%- for block in section.blocks -%}
        <div class="collapsible-content-row no-click-highlight {% if section.settings.show_bottom_border %} collapsible-content-row-border{% endif %}" {% render 'overwrite-theme-style', border_color: section.settings.overwrite_theme_border_color, padding_top: section.settings.vertical_padding, padding_bottom: section.settings.vertical_padding %}>
            <div class="collapsible-content-row-header">
                <h3 class="h4" {% render 'overwrite-theme-style', text_color: block.settings.heading_color, font_size: block.settings.heading_font_size %}>{{ block.settings.heading }}</h3>
                {% render 'icon-arrow-right' %}
            </div>
            <div class="collapsible-content-row-content"  {% render 'overwrite-theme-style', text_color: block.settings.text_color, font_size: block.settings.text_font_size %}>
                {{ block.settings.text }}
            </div>
        </div>
        {%- endfor -%}

    </div>
</div>

{% schema %}
{
    "name": "t:sections.section-collapsible-content.name",
    "settings": [
        {
            "type": "text",
            "id": "heading",
            "label": "t:sections.section-collapsible-content.settings.heading"
        },
        {
            "type": "header",
            "content": "t:sections.general.settings"
        },
        {
            "type": "select",
            "id": "heading_alignment",
            "default": "left",
            "label": "t:sections.section-collapsible-content.settings.heading_alignment",
            "options": [
                {
                    "value": "left",
                    "label": "t:sections.section-collapsible-content.settings.heading_alignment_left"
                },
                {
                    "value": "center",
                    "label": "t:sections.section-collapsible-content.settings.heading_alignment_center"
                },
                {
                    "value": "right",
                    "label": "t:sections.section-collapsible-content.settings.heading_alignment_right"
                }
            ]
        },
        {
            "type": "checkbox",
            "id": "show_bottom_border",
            "default": false,
            "label": "t:sections.section-collapsible-content.settings.show_bottom_border"
        },
        {
            "type": "range",
            "id": "vertical_padding",
            "label": "t:sections.section-collapsible-content.settings.vertical_padding",
            "min": 0,
            "max": 100,
            "step": 1,
            "unit": "px",
            "default": 15
        },
        {
            "type": "header",
            "content": "t:sections.general.margin"
        },
        {
            "type": "range",
            "id": "overwrite_theme_margin_top",
            "label": "t:sections.section-collapsible-content.settings.overwrite_theme_margin_top",
            "min": -20,
            "max": 70,
            "step": 1,
            "unit": "px",
            "default": 0
        },
        {
            "type": "range",
            "id": "overwrite_theme_margin_bottom",
            "label": "t:sections.section-collapsible-content.settings.overwrite_theme_margin_bottom",
            "min": -20,
            "max": 70,
            "step": 1,
            "unit": "px",
            "default": 0
        },
        {
            "type": "header",
            "content": "t:sections.general.theme-settings.content",
            "info": "t:sections.general.theme-settings.info"
        },
        {
            "type": "color",
            "id": "background_color",
            "label": "t:sections.section-collapsible-content.settings.background_color",
            "info": "t:sections.section-collapsible-content.settings.background_color_info"
        },
        {
            "type": "color",
            "id": "overwrite_theme_border_color",
            "label": "t:sections.section-collapsible-content.settings.overwrite_theme_border_color",
            "info": "t:sections.section-collapsible-content.settings.overwrite_theme_border_color_info"
        },
        {
            "type": "color",
            "id": "heading_color",
            "label": "t:sections.section-collapsible-content.settings.heading_color",
            "info": "t:sections.section-collapsible-content.settings.heading_color_info"
        },
        {
            "type": "range",
            "id": "heading_font_size",
            "label": "t:sections.section-collapsible-content.settings.heading_font_size",
            "min": 0,
            "max": 50,
            "step": 1,
            "unit": "px",
            "default": 0,
            "info": "t:sections.section-collapsible-content.settings.heading_font_size_info"
        }
    ],
    "blocks": [
        {
            "type": "row",
            "name": "t:sections.section-collapsible-content.blocks.row.name",
            "settings": [
                {
                    "type": "text",
                    "id": "heading",
                    "label": "t:sections.section-collapsible-content.blocks.row.settings.heading"
                },
                {
                    "type": "richtext",
                    "id": "text",
                    "label": "t:sections.section-collapsible-content.blocks.row.settings.text"
                },
                {
                    "type": "header",
                    "content": "t:sections.general.theme-settings.content",
                    "info": "t:sections.general.theme-settings.info"
                },
                {
                    "type": "color",
                    "id": "heading_color",
                    "label": "t:sections.section-collapsible-content.blocks.row.settings.heading_color",
                    "info": "t:sections.section-collapsible-content.blocks.row.settings.heading_color_info"
                },
                {
                    "type": "range",
                    "id": "heading_font_size",
                    "label": "t:sections.section-collapsible-content.blocks.row.settings.heading_font_size",
                    "min": 0,
                    "max": 50,
                    "step": 1,
                    "unit": "px",
                    "default": 0,
                    "info": "t:sections.section-collapsible-content.blocks.row.settings.heading_font_size_info"
                },
                {
                    "type": "color",
                    "id": "text_color",
                    "label": "t:sections.section-collapsible-content.blocks.row.settings.text_color",
                    "info": "t:sections.section-collapsible-content.blocks.row.settings.text_color_info"
                },
                {
                    "type": "range",
                    "id": "text_font_size",
                    "label": "t:sections.section-collapsible-content.blocks.row.settings.text_font_size",
                    "min": 0,
                    "max": 50,
                    "step": 1,
                    "unit": "px",
                    "default": 0,
                    "info": "t:sections.section-collapsible-content.blocks.row.settings.text_font_size_info"
                }
            ]
        }
    ],
    "presets": [
        {
            "name": "t:sections.section-collapsible-content.name"
        }
    ]
}
{% endschema %}