{% include "section_style", bgColor: "rgba(0,0,0,.5)", defaultImg: "custom.jpg", vertAlign: section.settings.vertical %}
<!-- Extra Settings Variables -->
{% assign s-HorAlign = section.settings.horizontal %}

<div class="background-image background-image--{{ s-ID }} {{ s-SplashWrapper }}">
    <div class="section section--my-blocks section--{{ s-VertAlign }} section--{{ s-HorAlign }} section--{{ s-Spacing }} section--{{ s-AutoTextColor }} section--{{ s-ID }} {{ s-Splash }}" kjb-settings-id="{{ kjb-Background }}">
        <div class="container">
            <div class="row">

                <style type="text/css"> .my-section-content-p-{{ section.id }}{ font-size:16px} </style>
                <h1>My Section ID: {{ s-ID }}</h1>
                <p class="my-section-content-p-{{ section.id }}" kjb-settings-id="{{ 'kc_header_text' | settings_id: section: section}}">{{ section.settings.kc_header_text}}</p>

                {% for block in section.blocks %}
                    {% case block.type %}

                        {% when 'myblock' %}
                            <!-- BLOCK HEADER INSERTS -->

                            <!-- BLOCK CUSTOM STYLES -->
                            <style type="text/css"> .my-block-content-p-{{ block.id }}{ font-size:16px} </style>

                            <!-- BLOCK CONTENT -->
                            <h1>Block ID: {{ block.id }}</h1>
                            <p class="my-block-content-p-{{ block.id }}" kjb-settings-id="{{ 'kc_text' | settings_id: section: section, block: block }}">{{ block.settings.kc_text}}</p>

                            <!-- BLOCK CUSTOM SCRIPTS -->
                            <script type="text/javascript"></script>

                            <!-- BLOCK FOOTER INSERTS -->

                        {% when 'myotherblock' %}
                            <!-- BLOCK HEADER INSERTS -->

                            <!-- BLOCK CUSTOM STYLES -->
                            <style type="text/css"> .my-block-content-p-{{ block.id }}{ font-size:16px} </style>

                            <!-- BLOCK CONTENT -->
                            <h1>Block ID: {{ block.id }}</h1>
                            <p class="my-block-content-p-{{ block.id }}" kjb-settings-id="{{ 'kc_text' | settings_id: section: section, block: block }}">{{ block.settings.kc_text}}</p>

                            <!-- BLOCK CUSTOM SCRIPTS -->
                            <script type="text/javascript"></script>

                            <!-- BLOCK FOOTER INSERTS -->

                    {% endcase %}
                {% endfor %}

            </div>
        </div>
    </div>
</div>

{% schema %}
    {
        "name": "Starter Section",
        "blocks": [
            {
                "type": "myblock",
                "name": "My Block",
                "elements": [
                    {
                        "type": "text",
                        "label": "Content Text",
                        "id": "kc_text",
                        "default": "Why not update this line of text to say something meaningful!"
                    }
                ]
            },
            {
                "type": "myotherblock",
                "name": "My Other Block",
                "elements": [
                    {
                        "type": "text",
                        "label": "Content Text",
                        "id": "kc_text",
                        "default": "This is another block you can add and update!"
                    }
                ]
            }
        ],
        "elements": [
            {
                "type": "header",
                "content": "Section Appearance",
                "style": "subheading"
            },
            {
                "type": "checkbox",
                "id": "show_img",
                "label": "Use Background Image",
                "default": "true"
            },
            {
                "type": "image_picker",
                "id": "bg_image",
                "label": "Background Image",
                "info": "Suggested dimensions: 2880 × 1200"
            },
            {
                "type": "color",
                "label": "Background Color",
                "id": "background_color",
                "allow_blank": true,
                "info": "Will be used as overlay if settings for background image selected. Use Opacity slider."
            },
            {
                "type": "color",
                "label": "Text Color",
                "id": "text_color",
                "allow_blank": true,
                "info": "Text color will change automatically based on the brightness of your background color. Use this setting if you would like to override with a custom color."
            },
            {
                "type": "radio",
                "id": "horizontal",
                "label": "Horizontal Alignment",
                "default": "center",
                "options": [
                    {
                        "label": "Left",
                        "value": "left"
                    },
                    {
                        "label": "Center",
                        "value": "center"
                    },
                    {
                        "label": "Right",
                        "value": "right"
                    }
                ]
            },
            {
                "type": "radio",
                "id": "vertical",
                "label": "Vertical Alignment",
                "default": "middle",
                "options": [
                    {
                        "label": "Top",
                        "value": "top"
                    },
                    {
                        "label": "Middle",
                        "value": "middle"
                    },
                    {
                        "label": "Bottom",
                        "value": "bottom"
                    }
                ]
            },
            {
                "type": "select",
                "id": "spacing",
                "label": "Spacing",
                "default": "medium",
                "options": [
                    {
                        "label": "Extra Small",
                        "value": "xs-small"
                    },
                    {
                        "label": "Small",
                        "value": "small"
                    },
                    {
                        "label": "Medium",
                        "value": "medium"
                    },
                    {
                        "label": "Large",
                        "value": "large"
                    },
                    {
                        "label": "Full Height",
                        "value": "full"
                    }
                ]
            },
            {
                "type": "header",
                "content": "Section Content",
                "style": "subheading"
            },
            {
                "type": "text",
                "id" : "kc_header_text",
                "label" : "Header Content",
                "default" : "Just some section header text you can edit!"
            }
        ],
        "presets": [
            {
                "name": "Starter Section",
                "category": "Content",
                "blocks": [
                    {
                        "type": "myblock"
                    },
                    {
                        "type": "myotherblock"
                    }
                ]
            }
        ]
    }
{% endschema %}