{% block sw_cms_el_config_bc_category_boxes_config %}
<sw-container class="sw-cms-el-config-bc-hover-text-image">
    <sw-card :hero="false" :isLoading="false" :large="false">
        <sw-entity-multi-select 
            :label="$tc('sw-cms.config.bc-category-boxes.label')"
            v-model:entityCollection="categoryCollection"
            @update:entity-collection="onCategoryChange"
            :criteria="categoryMediaFilter"
            required>
        </sw-entity-multi-select>
    </sw-card>

    <sw-card :hero="false" :isLoading="false" :large="false">
        <sw-single-select
            :label="$tc('sw-cms.config.bc-category-boxes.selectLayout')"
            v-model:value="element.config.cardLayout.value"
            :options="[
                { value: 'round', label: $tc('sw-cms.config.bc-category-boxes.round') },
                { value: 'box',   label: $tc('sw-cms.config.bc-category-boxes.box') }
            ]"
        />

        <sw-switch-field
          :label="$tc('sw-cms.config.bc-category-boxes.enableArrowControls')"
          v-model:value="element.config.enableArrowControls.value"
        ></sw-switch-field>

        <sw-colorpicker
            :label="$tc('sw-cms.config.bc-category-boxes.backgroundColor')"
            v-model:value="element.config.backgroundColor.value"
            value="#cead60"
            colorOutput="auto"
            :alpha="true"
            :disabled="false"
            :colorLabels="true"
            zIndex="1001"
            required>
        </sw-colorpicker>

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

        <sw-colorpicker
            :label="$tc('sw-cms.config.bc-category-boxes.foregroundColor')"
            v-model:value="element.config.foregroundColor.value"
            value="#fff"
            colorOutput="auto"
            :alpha="true"
            :disabled="false"
            :colorLabels="true"
            zIndex="1001"
            required>
        </sw-colorpicker>
    </sw-card>
</sw-container>
{% endblock %}
