{% block sw_cms_el_config_bc_featured_categories %}

<sw-tabs class="sw-cms-el-config-bc_featured_categories__tabs" default-item="general">
    <template slot-scope="{ active }" #default="{ active }"  >
        {% block sw_cms_el_config_bc_featured_categories_tab_general %}
            <sw-tabs-item :title="$tc('sw-cms.config.bc-featured-categories.general')"
                name="general"
                :active-tab="active">
                {{ $tc('sw-cms.config.bc-featured-categories.general') }}
            </sw-tabs-item>
        {% endblock %}

        {% block sw_cms_el_config_bc_featured_categories_tab_tab1 %}
            <sw-tabs-item :title="$tc('sw-cms.config.bc-featured-categories.Tab1')"
                name="tab1"
                :active-tab="active">
                {{ $tc('sw-cms.config.bc-featured-categories.Tab1') }}
            </sw-tabs-item>
        {% endblock %}
        
        {% block sw_cms_el_config_bc_featured_categories_tab_tab2 %}
            <sw-tabs-item :title="$tc('sw-cms.config.bc-featured-categories.Tab2')"
                    name="tab2"
                    :active-tab="active">
                {{ $tc('sw-cms.config.bc-featured-categories.Tab2') }}
            </sw-tabs-item>
        {% endblock %}

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

        {% block sw_cms_el_config_bc_featured_categories_tab_tab4 %}
            <sw-tabs-item :title="$tc('sw-cms.config.bc-featured-categories.Tab4')"
                name="tab4"
                :active-tab="active">
                {{ $tc('sw-cms.config.bc-featured-categories.Tab4') }}
            </sw-tabs-item>
        {% endblock %}
    </template>

    <template slot="content"  #content="{ active }">
        {% block sw_cms_el_bc_featured_categories_config_general %}
            <sw-container v-if="active === 'general'" class="sw-cms-el-config-bc_featured_categories__tab-general">
                <h2>
                    {{ $tc('sw-cms.config.bc-featured-categories.general') }}
                </h2>
                <sw-card :hero="false" :isLoading="false" :large="false">

                    <sw-text-field
                        v-model:value="element.config.title.value"
                        :label="$tc('sw-cms.config.bc-featured-categories.title')"
                        :placeholder="$tc('sw-cms.config.bc-featured-categories.text-placeholder')"
                    />
                    
                    <sw-textarea-field 
                        v-model="element.config.description.value"
                        type="textarea" 
                        :label="$tc('sw-cms.config.bc-featured-categories.DescriptionLabel')" 
                        :placeholder="$tc('sw-cms.config.bc-featured-categories.text-placeholder')">
                    </sw-textarea-field>

                </sw-card>
            </sw-container>
        {% endblock %}

        {# general settings tab ends #}

        {% 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-featured-categories.Tab1') }}
                </h2>
                <sw-card :hero="false" :isLoading="false" :large="false">
                    <sw-media-field
                        :value="element.config.mainImage1.value"
                    @update:value="(v) => element.config.mainImage1.value = v"
                        :label="$tc('sw-cms.config.bc-featured-categories.Image')"
                        required
                    >
                    </sw-media-field>

                    <sw-text-field
                        v-model:value="element.config.title1.value"
                        :label="$tc('sw-cms.config.bc-featured-categories.title')"
                        :placeholder="$tc('sw-cms.config.bc-featured-categories.text-placeholder')"
                        required
                    />

                    <sw-switch-field 
                        v-model:value="element.config.descriptionActive1.value" 
                        :label="$tc('sw-cms.config.bc-featured-categories.switch_description_label')"
                        >
                    </sw-switch-field>
                    
                    <sw-textarea-field 
                        v-model="element.config.description1.value"
                        type="textarea" 
                        :label="$tc('sw-cms.config.bc-featured-categories.DescriptionLabel')" 
                        :placeholder="$tc('sw-cms.config.bc-featured-categories.text-placeholder')">
                    </sw-textarea-field>

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

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

                {# color fields #}
                <sw-card :hero="false" :isLoading="false" :large="false">

                    <sw-single-select
                        :label="$tc('sw-cms.config.bc-featured-categories.textPlacement')"
                        v-model:value="element.config.textPlacement1.value"
                        :options="[
                            { value: 'right', label: $tc('sw-cms.config.bc-featured-categories.textRight') },
                            { value: 'left',  label: $tc('sw-cms.config.bc-featured-categories.textLeft') }
                        ]"
                    />

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

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

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

                    <sw-colorpicker
                        :label="$tc('sw-cms.config.bc-featured-categories.btnBgColor')"
                        v-model:value="element.config.btnBgColorTab1.value"
                        value="#000"
                        colorOutput="auto"
                        :alpha="true"
                        :disabled="false"
                        :colorLabels="true"
                        zIndex="1001">
                    </sw-colorpicker>
                </sw-card>
                {# color fields end #}
            </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-featured-categories.Tab2') }}
                </h2>
                <sw-card :hero="false" :isLoading="false" :large="false">
                    <sw-media-field
                        :value="element.config.mainImage2.value"
                    @update:value="(v) => element.config.mainImage2.value = v"
                        :label="$tc('sw-cms.config.bc-featured-categories.Image')"
                        required
                    >
                    </sw-media-field>

                    <sw-text-field
                        v-model:value="element.config.title2.value"
                        :label="$tc('sw-cms.config.bc-featured-categories.title')"
                        :placeholder="$tc('sw-cms.config.bc-featured-categories.text-placeholder')"
                        required
                    />

                    <sw-switch-field 
                        v-model:value="element.config.descriptionActive2.value" 
                        :label="$tc('sw-cms.config.bc-featured-categories.switch_description_label')"
                        >
                    </sw-switch-field>
                    
                    <sw-textarea-field 
                        v-model="element.config.description2.value"
                        type="textarea" 
                        :label="$tc('sw-cms.config.bc-featured-categories.DescriptionLabel')" 
                        :placeholder="$tc('sw-cms.config.bc-featured-categories.text-placeholder')">
                    </sw-textarea-field>

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

                    <sw-url-field 
                        :label="$tc('sw-cms.config.bc-featured-categories.Link')"
                        v-model:value="element.config.link2.value"
                        :placeholder="$tc('sw-cms.config.bc-featured-categories.UrlPlaceholder')"
                        :error="null" 
                        :omitUrlHash="false" 
                        :omitUrlSearch="false"
                        >
                    
                    </sw-url-field>
                </sw-card>
                
                {# color fields #}
                <sw-card :hero="false" :isLoading="false" :large="false">
                    
                    <sw-colorpicker
                        :label="$tc('sw-cms.config.bc-featured-categories.titleColor')"
                        v-model:value="element.config.titleColorTab2.value"
                        value="#000"
                        colorOutput="auto"
                        :alpha="true"
                        :disabled="false"
                        :colorLabels="true"
                        zIndex="1001"
                        required>
                    </sw-colorpicker>

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

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

                </sw-card>
                {# color fields end #}
            </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-featured-categories.Tab3') }}
                </h2>
                <sw-card :hero="false" :isLoading="false" :large="false">
                    <sw-media-field
                        :value="element.config.mainImage3.value"
                    @update:value="(v) => element.config.mainImage3.value = v"
                        :label="$tc('sw-cms.config.bc-featured-categories.Image')"
                        required
                    >
                    </sw-media-field>

                    <sw-text-field
                        v-model:value="element.config.title3.value"
                        :label="$tc('sw-cms.config.bc-featured-categories.title')"
                        :placeholder="$tc('sw-cms.config.bc-featured-categories.text-placeholder')"
                        required
                    />

                    <sw-switch-field 
                        v-model:value="element.config.descriptionActive3.value" 
                        :label="$tc('sw-cms.config.bc-featured-categories.switch_description_label')"
                        >
                    </sw-switch-field>
                    
                    <sw-textarea-field 
                        v-model="element.config.description3.value"
                        type="textarea" 
                        :label="$tc('sw-cms.config.bc-featured-categories.DescriptionLabel')" 
                        :placeholder="$tc('sw-cms.config.bc-featured-categories.text-placeholder')">
                    </sw-textarea-field>

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

                    <sw-url-field 
                        :label="$tc('sw-cms.config.bc-featured-categories.Link')"
                        v-model:value="element.config.link3.value"
                        :placeholder="$tc('sw-cms.config.bc-featured-categories.UrlPlaceholder')"
                        :error="null" 
                        :omitUrlHash="false" 
                        :omitUrlSearch="false"
                        >
                    
                    </sw-url-field>
                </sw-card>
                
                {# color fields #}
                <sw-card :hero="false" :isLoading="false" :large="false">
                    
                    <sw-colorpicker
                        :label="$tc('sw-cms.config.bc-featured-categories.titleColor')"
                        v-model:value="element.config.titleColorTab3.value"
                        value="#000"
                        colorOutput="auto"
                        :alpha="true"
                        :disabled="false"
                        :colorLabels="true"
                        zIndex="1001"
                        required>
                    </sw-colorpicker>

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

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

                </sw-card>
                {# color fields end #}
            </sw-container>
        {% endblock %} 

            {# box tab 3 ends  #}

        {% block sw_cms_el_bc_featured_categories_config_tab4 %}
            <sw-container v-if="active === 'tab4'" class="sw-cms-el-config-bc_featured_categories__tab-tab4">
                <h2>
                    {{ $tc('sw-cms.config.bc-featured-categories.Tab4') }}
                </h2>
                <sw-card :hero="false" :isLoading="false" :large="false">
                    <sw-media-field
                        :value="element.config.mainImage4.value"
                    @update:value="(v) => element.config.mainImage4.value = v"
                        :label="$tc('sw-cms.config.bc-featured-categories.Image')"
                        required
                    >
                    </sw-media-field>

                    <sw-text-field
                        v-model:value="element.config.title4.value"
                        :label="$tc('sw-cms.config.bc-featured-categories.title')"
                        :placeholder="$tc('sw-cms.config.bc-featured-categories.text-placeholder')"
                        required
                    />

                    <sw-switch-field 
                        v-model:value="element.config.descriptionActive4.value" 
                        :label="$tc('sw-cms.config.bc-featured-categories.switch_description_label')"
                        >
                    </sw-switch-field>

                    <sw-textarea-field 
                        v-model="element.config.description4.value"
                        type="textarea" 
                        :label="$tc('sw-cms.config.bc-featured-categories.DescriptionLabel')" 
                        :placeholder="$tc('sw-cms.config.bc-featured-categories.text-placeholder')">
                    </sw-textarea-field>

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

                    <sw-url-field 
                        :label="$tc('sw-cms.config.bc-featured-categories.Link')"
                        v-model:value="element.config.link4.value"
                        :placeholder="$tc('sw-cms.config.bc-featured-categories.UrlPlaceholder')"
                        :error="null" 
                        :omitUrlHash="false" 
                        :omitUrlSearch="false"
                        >
                    
                    </sw-url-field>
                </sw-card>
                
                {# color fields #}
                <sw-card :hero="false" :isLoading="false" :large="false">

                    <sw-single-select
                        :label="$tc('sw-cms.config.bc-featured-categories.textPlacement')"
                        v-model:value="element.config.textPlacement2.value"
                        :options="[
                            { value: 'right', label: $tc('sw-cms.config.bc-featured-categories.textRight') },
                            { value: 'left',  label: $tc('sw-cms.config.bc-featured-categories.textLeft') }
                        ]"
                    />
                    
                    <sw-colorpicker
                        :label="$tc('sw-cms.config.bc-featured-categories.titleColor')"
                        v-model:value="element.config.titleColorTab4.value"
                        value="#000"
                        colorOutput="auto"
                        :alpha="true"
                        :disabled="false"
                        :colorLabels="true"
                        zIndex="1001"
                        required>
                    </sw-colorpicker>

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

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

                </sw-card>
                {# color fields end #}
            </sw-container>
        {% endblock %}

        {# box tab 4 ends  #}

    </template>
</sw-tabs>

{% endblock %}
