<template>
	<div class="rules">

		<!-- The header. Either 2 or 3 columns -->
		<div
			:class="{
				header : true,
				locked : locked,
			}"
		>
			<p v-if="! locked">{{ labels.select }}</p>
			<p>{{ labels.name }}</p>
			<p>{{ labels.purpose }}</p>
		</div>

		<!-- An individual script -->
		<div
			:class="{
				script : true,
				locked : locked,
			}"
			v-for="( script, index ) in scripts"
			:key="`script-${ groupIndex }-${ index }`"
		>
			<p v-if="! locked">
				<input
					type="checkbox"
					:id="`checkbox-${ groupIndex }-${ index }`"
					v-model="scripts[ index ].checked"
					@change="$emit( 'childCheckboxChanged', scripts, groupIndex )"
				/>
				<label
					:for="`checkbox-${ groupIndex }-${ index }`"
				></label>
			</p>
			<p>{{ script.name }}</p>
			<p>{{ script.purpose }}</p>
		</div>
	</div>
</template>
<script>
	
	export default {

		name: 'Rules',

		data() {
			return {
				labels  : window.GDPR_VISITOR_CONSENT_FRONTEND.labels,
			};
		},

		props: [
			'scripts',
			'groupIndex',
			'locked',
			'enableAll',
		],

		methods: {

			updateScriptChecks( checked ) {
				// Change the checked property
				this.scripts.forEach( ( script ) => {
					script.checked = checked;
				} );

				// Update this component
				this.$forceUpdate();
			},

		},

		mounted() {

			// Listen for parent toggle update
			this.$parent.$on( 'update', this.updateScriptChecks );

		},

	};

</script>
