{% block sw_cms_el_config_bc_brand_slider %}
    <div class="sw_cms_config_bc_brand_slider">

        <sw-text-field 
            v-model:value="element.config.title.value" 
            :label="$tc('sw-cms.config.bc-brand-slider.titleLabel')"
            :placeholder="$tc('sw-cms.config.bc-brand-slider.titlePlaceholder')"
        />

        <sw-textarea-field 
            v-model="element.config.description.value" 
            type="textarea" 
            :label="$tc('sw-cms.config.bc-brand-slider.descriptionLabel')"
            :placeholder="$tc('sw-cms.config.bc-brand-slider.descriptionPlaceholder')">
        </sw-textarea-field>

        <sw-entity-multi-select 
            :label="$tc('sw-cms.config.bc-brand-slider.selectBrand')"
            v-model:entityCollection="brandCollection"
            @update:entity-collection="onBrandsChange"
            :criteria="brandMediaFilter"
            required
        >
        </sw-entity-multi-select>

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

    </div>
{% endblock %}
