<template>
	<div class="divi-views-wizard__footer">
		<cx-vui-button
			v-if="'licenseStep' === currentStep"
			button-style="link-accent"
			class="cx-vui-button--style-accent"
			size="link"
			tagName="a"
			:url="config.jetDashboardLink"
		>
			<template v-slot:label>
				<span>Skip Wizard, go to Dashboard</span>
			</template>
		</cx-vui-button>

		<cx-vui-button
			v-if="'finishStep' === currentStep"
			button-style="accent-border"
			class="cx-vui-button--style-accent"
			size="default"
			tagName="a"
			:url="config.jetDashboardLink"
		>
			<template v-slot:label>
				<span>Go to Dashboard</span>
				<span class="svg-icon">
					<svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
						<path d="M8.3332 5.5L7.1582 6.675L10.9749 10.5L7.1582 14.325L8.3332 15.5L13.3332 10.5L8.3332 5.5Z" fill="#0D88BF"/>
					</svg>
				</span>
			</template>
		</cx-vui-button>
	</div>
</template>

<script>

export default {
	name: 'Footer',
	props: {},
	data() {
		return {
			debounceInterval: null,
			config: window.wizardConfig.config
		}
	},
	watch: {},
	computed: {
		currentStep() {
			return this.$store.state.currentStep;
		},
	},
	methods: {

	}
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
	.divi-views-wizard {
		&__footer {
			padding: 40px;
		}
	}
</style>
