{% block sw_cms_el_config_bc_instagram_widget %}

<sw-container class="sw-cms-el-config-bc-hover-text-image">
	<sw-card :hero="false" :isloading="false" :large="false">
		<sw-text-field 
			v-model:value="element.config.title.value" 
			:label="$tc('sw-cms.config.bc-instagram-widget.titleLabel')"
			:placeholder="$tc('sw-cms.config.bc-instagram-widget.titlePlaceholder')"
            required
		/>
        <sw-text-field 
			v-model:value="element.config.subTitle.value" 
			:label="$tc('sw-cms.config.bc-instagram-widget.subTitleLabel')"
			:placeholder="$tc('sw-cms.config.bc-instagram-widget.subTitlePlaceholder')"
		/>
		<sw-text-field 
			v-model:value="element.config.username.value" 
			:label="$tc('sw-cms.config.bc-instagram-widget.usernameLabel')"
			:placeholder="$tc('sw-cms.config.bc-instagram-widget.usernamePlaceholder')"
            required
		/>
        <sw-password-field
            v-model:value="element.config.accessToken.value"
            :label="$tc('sw-cms.config.bc-instagram-widget.accessTokenLabel')"
			:placeholder="$tc('sw-cms.config.bc-instagram-widget.accessTokenPlaceholder')"
            required
        />
	</sw-card>

	<sw-card :hero="false" :isloading="false" :large="false">
		<sw-number-field 
			v-model:value="element.config.limit.value" 
			:label="$tc('sw-cms.config.bc-instagram-widget.limitLabel')"
			:placeholder="$tc('sw-cms.config.bc-instagram-widget.limitPlaceholder')"
		/>
		<sw-colorpicker
			:label="$tc('sw-cms.config.bc-instagram-widget.mainHeadingColor')"
			v-model:value="element.config.mainHeadingColor.value"
			value="#000"
			colorOutput="auto"
			:alpha="true"
			:disabled="false"
			:colorLabels="true"
			zIndex="1001"
            required>
		</sw-colorpicker>
		<sw-colorpicker
			:label="$tc('sw-cms.config.bc-instagram-widget.usernameColor')"
			v-model:value="element.config.usernameColor.value"
			value="#000"
			colorOutput="auto"
			:alpha="true"
			:disabled="false"
			:colorLabels="true"
			zIndex="1001"
            required>
		</sw-colorpicker>
		<sw-colorpicker
			:label="$tc('sw-cms.config.bc-instagram-widget.subtitleColor')"
			v-model:value="element.config.subtitleColor.value"
			value="#000"
			colorOutput="auto"
			:alpha="true"
			:disabled="false"
			:colorLabels="true"
			zIndex="1001"
            required>
		</sw-colorpicker>
	</sw-card>
</sw-container>

{% endblock %}
