<template>
	<accordion-item>
		<template slot="accordion-trigger">
			<label class="wcc-app-accordion-title">{{
				$i18n.__("Blocked Content", "webtoffee-cookie-consent")
			}}</label>
		</template>
		<template slot="accordion-content">
			<div class="wcc-form-section">
				<div class="wcc-form-group wcc-align-center wcc-row">
					<label class="wcc-col-3 wcc-col-label">{{
						$i18n.__("Label", "webtoffee-cookie-consent")
					}}</label>
					<div class="wcc-col-9">
						<input
							type="text"
							class="wcc-form-control"
							v-model="content.videoPlaceholder.elements.title"
							:disabled="disabled"
							:data-test-id="'wcc-blocked-content-label'"
						/>
					</div>
				</div>
				<div class="wcc-form-group wcc-align-center wcc-row" v-if="!translate">
					<label class="wcc-col-3 wcc-col-label">{{
						$i18n.__("Customize colour", "webtoffee-cookie-consent")
					}}</label>
					<div class="wcc-col">
						<label class="">{{
							$i18n.__("Background", "webtoffee-cookie-consent")
						}}</label>
						<colors
							:color="
								banner.properties.config.videoPlaceholder.styles[
									'background-color'
								]
							"
							v-model="
								banner.properties.config.videoPlaceholder.styles[
									'background-color'
								]
							"
							:disabled="disabled"
							:data-test-id="'wcc-blocked-content-background-color'"
						/>
					</div>
					<div class="wcc-col">
						<label class="">{{ $i18n.__("Border", "webtoffee-cookie-consent") }}</label>
						<colors
							:color="
								banner.properties.config.videoPlaceholder.styles['border-color']
							"
							v-model="
								banner.properties.config.videoPlaceholder.styles['border-color']
							"
							:disabled="disabled"
							:data-test-id="'wcc-blocked-content-border-color'"
						/>
					</div>
					<div class="wcc-col">
						<label class="">{{ $i18n.__("Text", "webtoffee-cookie-consent") }}</label>
						<colors
							:color="
								banner.properties.config.videoPlaceholder.elements.title.styles
									.color
							"
							v-model="
								banner.properties.config.videoPlaceholder.elements.title.styles
									.color
							"
							:disabled="disabled"
							:data-test-id="'wcc-blocked-content-text-color'"
						/>
					</div>
				</div>
			</div>
		</template>
	</accordion-item>
</template>
<script>
import AccordionItem from "@/components/accordion/AccordionItem.vue";
import Colors from "@/components/Colors.vue";

export default {
	name: "AccordionBlockedContent",
	props: {
		content: Object,
		translate: {
			type: Boolean,
			default: false,
		},
		disabled: {
			type: Boolean,
			default: false,
		},
	},
	components: {
		AccordionItem,
		Colors,
	},
	computed: {
		banner() {
			return this.$store.state.banners.current;
		},
	},
};
</script>
