{% block sw_cms_el_config_bc_image_slider %}

<sw-tabs class="sw-cms-el-config-bc_featured_categories__tabs" default-item="tab1">

    <template slot-scope="{ active }" #default="{ active }" >
        {% block sw_cms_el_config_bc_featured_categories_tab_tab1 %}
            <sw-tabs-item :title="$tc('sw-cms.config.bc-image-slider.Tab1')"
                name="tab1"
                :active-tab="active">
                {{ $tc('sw-cms.config.bc-image-slider.slide1') }}
            </sw-tabs-item>
        {% endblock %}
        
        {% block sw_cms_el_config_bc_featured_categories_tab_tab2 %}
            <sw-tabs-item :title="$tc('sw-cms.config.bc-image-slider.Tab2')"
                    name="tab2"
                    :active-tab="active">
                {{ $tc('sw-cms.config.bc-image-slider.slide2') }}
            </sw-tabs-item>
        {% endblock %}

        {% block sw_cms_el_config_bc_featured_categories_tab_tab3 %}
            <sw-tabs-item :title="$tc('sw-cms.config.bc-image-slider.Tab3')"
                    name="tab3"
                    :active-tab="active">
                {{ $tc('sw-cms.config.bc-image-slider.slide3') }}
            </sw-tabs-item>
        {% endblock %} 

    </template>


    <template slot="content" #content="{ active }">
        {% block sw_cms_el_bc_featured_categories_config_tab1 %}
            <sw-container v-if="active === 'tab1'" class="sw-cms-el-config-bc_featured_categories__tab-tab1">
                <h2>
                    {{ $tc('sw-cms.config.bc-image-slider.slide1') }}
                </h2>
                <sw-card :hero="false" :isLoading="false" :large="false">
                    <sw-media-field
                        :value="element.config.slideImage1.value"
                    @update:value="(v) => element.config.slideImage1.value = v"
                        :label="$tc('sw-cms.config.bc-image-slider.Image')"
                    >
                    </sw-media-field>

                    <sw-media-field
                        :value="element.config.slideImageResponsive1.value"
                    @update:value="(v) => element.config.slideImageResponsive1.value = v"
                        :label="$tc('sw-cms.config.bc-image-slider.ResponsiveImage')"
                    >
                    </sw-media-field>

                    <sw-text-field
                        v-model:value="element.config.mainTitle1.value"
                        :label="$tc('sw-cms.config.bc-image-slider.mainTitle')"
                        :placeholder="$tc('sw-cms.config.bc-image-slider.text-placeholder')"
                    />

                    <sw-text-field
                        v-model:value="element.config.subTitle1.value"
                        :label="$tc('sw-cms.config.bc-image-slider.subTitle')"
                        :placeholder="$tc('sw-cms.config.bc-image-slider.text-placeholder')"
                    />

                    <sw-text-field
                        v-model:value="element.config.buttonText1.value"
                        :label="$tc('sw-cms.config.bc-image-slider.ButtonText')"
                        :placeholder="$tc('sw-cms.config.bc-image-slider.text-placeholder')"
                    />

                    <sw-url-field 
                        :label="$tc('sw-cms.config.bc-image-slider.Link')"
                        v-model:value="element.config.link1.value"
                        :placeholder="$tc('sw-cms.config.bc-image-slider.UrlPlaceholder')"
                        :error="null" 
                        :omitUrlHash="false" 
                        :omitUrlSearch="false"
                        >
                    
                    </sw-url-field>
                </sw-card>

                <sw-card :hero="false" :isLoading="false" :large="false"> 
 
                    <sw-single-select
                        :label="$tc('sw-cms.config.bc-image-slider.selectLayout')"
                        v-model:value="element.config.alignContent1.value"
                        :options="[
                            { value: 'right',  label: $tc('sw-cms.config.bc-image-slider.textRight') },
                            { value: 'left',   label: $tc('sw-cms.config.bc-image-slider.textLeft') },
                            { value: 'center', label: $tc('sw-cms.config.bc-image-slider.textCenter') }
                        ]"
                    />

                    <sw-colorpicker
                        :label="$tc('sw-cms.config.bc-image-slider.titleColor')"
                        v-model:value="element.config.titleColorSlide1.value"
                        value="#000"
                        colorOutput="auto"
                        :alpha="true"
                        :disabled="false"
                        :colorLabels="true"
                        zIndex="1001"
                        required>
                    </sw-colorpicker>

                    <sw-colorpicker
                        :label="$tc('sw-cms.config.bc-image-slider.subTitleColor')"
                        v-model:value="element.config.subTitleColorSlide1.value"
                        value="#000"
                        colorOutput="auto"
                        :alpha="true"
                        :disabled="false"
                        :colorLabels="true"
                        zIndex="1001"
                        required>
                    </sw-colorpicker>

                    <sw-colorpicker
                        :label="$tc('sw-cms.config.bc-image-slider.buttonBgColor')"
                        v-model:value="element.config.buttonBgColorSlide1.value"
                        value="#000"
                        colorOutput="auto"
                        :alpha="true"
                        :disabled="false"
                        :colorLabels="true"
                        zIndex="1001"
                        required>
                    </sw-colorpicker>

                    <sw-colorpicker
                        :label="$tc('sw-cms.config.bc-image-slider.buttonTxtColor')"
                        v-model:value="element.config.buttonTxtColorSlide1.value"
                        value="#fff"
                        colorOutput="auto"
                        :alpha="true"
                        :disabled="false"
                        :colorLabels="true"
                        zIndex="1001"
                        required>
                    </sw-colorpicker>

                </sw-card>

            </sw-container>
        {% endblock %}

            {# box tab 1 ends #}

        {% block sw_cms_el_bc_featured_categories_config_tab2 %}
            <sw-container v-if="active === 'tab2'" class="sw-cms-el-config-bc_featured_categories__tab-tab2">
                <h2>
                    {{ $tc('sw-cms.config.bc-image-slider.slide2') }}
                </h2>
                <sw-card :hero="false" :isLoading="false" :large="false">
                    <sw-media-field
                        :value="element.config.slideImage2.value"
                    @update:value="(v) => element.config.slideImage2.value = v"
                        :label="$tc('sw-cms.config.bc-image-slider.Image')"
                    >
                    </sw-media-field>

                    <sw-media-field
                        :value="element.config.slideImageResponsive2.value"
                    @update:value="(v) => element.config.slideImageResponsive2.value = v"
                        :label="$tc('sw-cms.config.bc-image-slider.ResponsiveImage')"
                    >
                    </sw-media-field>

                    <sw-text-field
                        v-model:value="element.config.mainTitle2.value"
                        :label="$tc('sw-cms.config.bc-image-slider.mainTitle')"
                        :placeholder="$tc('sw-cms.config.bc-image-slider.text-placeholder')"
                    />

                    <sw-text-field
                        v-model:value="element.config.subTitle2.value"
                        :label="$tc('sw-cms.config.bc-image-slider.subTitle')"
                        :placeholder="$tc('sw-cms.config.bc-image-slider.text-placeholder')"
                    />

                    <sw-text-field
                        v-model:value="element.config.buttonText2.value"
                        :label="$tc('sw-cms.config.bc-image-slider.ButtonText')"
                        :placeholder="$tc('sw-cms.config.bc-image-slider.text-placeholder')"
                    />

                    <sw-url-field 
                        :label="$tc('sw-cms.config.bc-image-slider.Link')"
                        v-model:value="element.config.link2.value"
                        :placeholder="$tc('sw-cms.config.bc-image-slider.UrlPlaceholder')"
                        :error="null" 
                        :omitUrlHash="false" 
                        :omitUrlSearch="false"
                        >
                    
                    </sw-url-field>
                </sw-card>

                <sw-card :hero="false" :isLoading="false" :large="false">

                    
                    <sw-single-select
                        :label="$tc('sw-cms.config.bc-image-slider.selectLayout')"
                        v-model:value="element.config.alignContent2.value"
                        :options="[
                            { value: 'right',  label: $tc('sw-cms.config.bc-image-slider.textRight') },
                            { value: 'left',   label: $tc('sw-cms.config.bc-image-slider.textLeft') },
                            { value: 'center', label: $tc('sw-cms.config.bc-image-slider.textCenter') }
                        ]"
                    />

                    <sw-colorpicker
                        :label="$tc('sw-cms.config.bc-image-slider.titleColor')"
                        v-model:value="element.config.titleColorSlide2.value"
                        value="#000"
                        colorOutput="auto"
                        :alpha="true"
                        :disabled="false"
                        :colorLabels="true"
                        zIndex="1001"
                        required>
                    </sw-colorpicker>

                    <sw-colorpicker
                        :label="$tc('sw-cms.config.bc-image-slider.subTitleColor')"
                        v-model:value="element.config.subTitleColorSlide2.value"
                        value="#000"
                        colorOutput="auto"
                        :alpha="true"
                        :disabled="false"
                        :colorLabels="true"
                        zIndex="1001"
                        required>
                    </sw-colorpicker>

                    <sw-colorpicker
                        :label="$tc('sw-cms.config.bc-image-slider.buttonBgColor')"
                        v-model:value="element.config.buttonBgColorSlide2.value"
                        value="#000"
                        colorOutput="auto"
                        :alpha="true"
                        :disabled="false"
                        :colorLabels="true"
                        zIndex="1001"
                        required>
                    </sw-colorpicker>

                    <sw-colorpicker
                        :label="$tc('sw-cms.config.bc-image-slider.buttonTxtColor')"
                        v-model:value="element.config.buttonTxtColorSlide2.value"
                        value="#fff"
                        colorOutput="auto"
                        :alpha="true"
                        :disabled="false"
                        :colorLabels="true"
                        zIndex="1001"
                        required>
                    </sw-colorpicker>

                </sw-card>

            
            </sw-container>
        {% endblock %}

            {# box tab 2 ends #}

        {% block sw_cms_el_bc_featured_categories_config_tab3 %}
            <sw-container v-if="active === 'tab3'" class="sw-cms-el-config-bc_featured_categories__tab-tab3">
                <h2>
                    {{ $tc('sw-cms.config.bc-image-slider.slide3') }}
                </h2>
                <sw-card :hero="false" :isLoading="false" :large="false">
                    <sw-media-field
                        :value="element.config.slideImage3.value"
                    @update:value="(v) => element.config.slideImage3.value = v"
                        :label="$tc('sw-cms.config.bc-image-slider.Image')"
                    >
                    </sw-media-field>

                    <sw-media-field
                        :value="element.config.slideImageResponsive3.value"
                    @update:value="(v) => element.config.slideImageResponsive3.value = v"
                        :label="$tc('sw-cms.config.bc-image-slider.ResponsiveImage')"
                    >
                    </sw-media-field>

                    <sw-text-field
                        v-model:value="element.config.mainTitle3.value"
                        :label="$tc('sw-cms.config.bc-image-slider.mainTitle')"
                        :placeholder="$tc('sw-cms.config.bc-image-slider.text-placeholder')"
                    />

                    <sw-text-field
                        v-model:value="element.config.subTitle3.value"
                        :label="$tc('sw-cms.config.bc-image-slider.subTitle')"
                        :placeholder="$tc('sw-cms.config.bc-image-slider.text-placeholder')"
                    />

                    <sw-text-field
                        v-model:value="element.config.buttonText3.value"
                        :label="$tc('sw-cms.config.bc-image-slider.ButtonText')"
                        :placeholder="$tc('sw-cms.config.bc-image-slider.text-placeholder')"
                    />

                    <sw-url-field 
                        :label="$tc('sw-cms.config.bc-image-slider.Link')"
                        v-model:value="element.config.link3.value"
                        :placeholder="$tc('sw-cms.config.bc-image-slider.UrlPlaceholder')"
                        :error="null" 
                        :omitUrlHash="false" 
                        :omitUrlSearch="false"
                        >
                    
                    </sw-url-field>
                </sw-card>

                <sw-card :hero="false" :isLoading="false" :large="false">

                  

                    <sw-single-select
                        :label="$tc('sw-cms.config.bc-image-slider.selectLayout')"
                        v-model:value="element.config.alignContent3.value"
                        :options="[
                            { value: 'right',  label: $tc('sw-cms.config.bc-image-slider.textRight') },
                            { value: 'left',   label: $tc('sw-cms.config.bc-image-slider.textLeft') },
                            { value: 'center', label: $tc('sw-cms.config.bc-image-slider.textCenter') }
                        ]"
                    />

                    <sw-colorpicker
                        :label="$tc('sw-cms.config.bc-image-slider.titleColor')"
                        v-model:value="element.config.titleColorSlide3.value"
                        value="#000"
                        colorOutput="auto"
                        :alpha="true"
                        :disabled="false"
                        :colorLabels="true"
                        zIndex="1001"
                        required>
                    </sw-colorpicker>

                    <sw-colorpicker
                        :label="$tc('sw-cms.config.bc-image-slider.subTitleColor')"
                        v-model:value="element.config.subTitleColorSlide3.value"
                        value="#000"
                        colorOutput="auto"
                        :alpha="true"
                        :disabled="false"
                        :colorLabels="true"
                        zIndex="1001"
                        required>
                    </sw-colorpicker>

                    <sw-colorpicker
                        :label="$tc('sw-cms.config.bc-image-slider.buttonBgColor')"
                        v-model:value="element.config.buttonBgColorSlide3.value"
                        value="#000"
                        colorOutput="auto"
                        :alpha="true"
                        :disabled="false"
                        :colorLabels="true"
                        zIndex="1001"
                        required>
                    </sw-colorpicker>

                    <sw-colorpicker
                        :label="$tc('sw-cms.config.bc-image-slider.buttonTxtColor')"
                        v-model:value="element.config.buttonTxtColorSlide3.value"
                        value="#fff"
                        colorOutput="auto"
                        :alpha="true"
                        :disabled="false"
                        :colorLabels="true"
                        zIndex="1001"
                        required>
                    </sw-colorpicker>

                </sw-card>

            
            </sw-container>
        {% endblock %} 

            {# box tab 3 ends  #}

    </template>
</sw-tabs>

{% endblock %}
