<template>
	<div class="wcc-header">
		<div class="wcc-row wcc-align-center">
			<div class="wcc-col-4">
				<span class="wcc-plugin-title">
					{{ $i18n.__("Cookie Consent", "webtoffee-cookie-consent") }}
				</span>
			</div>
			<div class="wcc-col-8">
				<div class="wcc-card-header-actions">
					{{ $i18n.__("Developed by", "webtoffee-cookie-consent") }}
					<a class="wcc-link wcc-align-center" target="_blank" href="https://www.webtoffee.com/">
						<base-icon width="120px" icon="wtlogo" color="#000000" />
					</a>
				</div>
			</div>
		</div>
		<div class="wcc-row wcc-align-center">
			<div class="wcc-col-12">
				<review-banner></review-banner>
			</div>
		</div>
	</div>
</template>

<script>
import BaseIcon from "@/components/icons/BaseIcon.vue";
import ReviewBanner from "@/components/ReviewSeekingBanner.vue";


export default {
	name: "TheHeader",
	components: {
		BaseIcon,
		ReviewBanner
	},
};
</script>

<style lang="scss">
@include wrap-class() {
	.wcc-header {
		margin-left: -20px;
		margin-right: -20px;
		padding: 16px 20px;
		background: #ffffff;
		span.wcc-icon-base {
			margin-right: 5px;
		}
		color: #000000;
	}
	.wcc-logo-caption {
		font-size: 12px;
		font-style: normal;
		font-weight: $font--weight-bold;
		line-height: 17px;
		text-align: left;
		color: #000000;
		margin-top: 5px;
	}
	span.wcc-version {
		font-weight: $font--weight-bold;
		padding-left: 5px;
		color: #000000;
	}
	.wcc-card-header-actions {
		color: #000000;
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}
	.wcc-card-header-actions a {
		color: inherit;
	}
	a.wcc-link {
		margin-left: 15px;
	}
	.wcc-plugin-title{
		color: #000000;
		font-size: 20px;
		font-weight: 700;
	}
}
body { 
	background: #ffffff;
}
</style>