<template>
	<div class="wcc-gtm-template-container">
		<div class="wcc-row">
			<div class="wcc-col-5 wcc-gtm-template-instructions">
				<h4>{{ $i18n.__("Adding the Google Tag Manager template", "webtoffee-cookie-consent") }}</h4>
				<p>
					{{ $i18n.__("Follow these steps to add the GDPR Cookie Consent template to your GTM workspace.", "webtoffee-cookie-consent") }}
				</p>
				<ol>
					<li>
						{{ $i18n.__("Open", "webtoffee-cookie-consent") }}
						<a href="https://tagmanager.google.com/" target="_blank" rel="noopener">
							{{ $i18n.__("Google Tag Manager", "webtoffee-cookie-consent") }}
						</a>
					</li>
					<li>{{ $i18n.__("Select your workspace", "webtoffee-cookie-consent") }}</li>
					<li>{{ $i18n.__("Navigate to the", "webtoffee-cookie-consent") }} <b>{{ $i18n.__("Templates tab", "webtoffee-cookie-consent") }}</b></li>
					<li>{{ $i18n.__("Click", "webtoffee-cookie-consent") }} <b>{{ $i18n.__("Search Gallery", "webtoffee-cookie-consent") }}</b>, {{ $i18n.__("under the Tag Templates section", "webtoffee-cookie-consent") }}</li>
					<li>{{ $i18n.__("Search for", "webtoffee-cookie-consent") }} <b>WebToffee CMP</b></li>
					<li>{{ $i18n.__("Select it and click", "webtoffee-cookie-consent") }} <b>{{ $i18n.__("Add to workspace", "webtoffee-cookie-consent") }}</b></li>
				</ol>
                <button class="wcc-button wcc-button-blue wcc-button" @click="openGTM">{{ $i18n.__("GTM Template Gallery", "webtoffee-cookie-consent") }} <img src="@/assets/external-link.svg" alt="External link" /></button>
			</div>
			<div class="wcc-col-7 wcc-gtm-template-image">
                <div class="wcc-gtm-template-image"></div>
			</div>
		</div>
	</div>
</template>
<script>
import BaseIcon from "@/components/icons/BaseIcon.vue";

export default {
	name: "GTMTemplate",
	components: {
		BaseIcon,
	},
	data() {
		return {
		};
	},
	methods: {
		openGTM() {
			window.open("https://tagmanager.google.com/gallery/#/owners/WebToffee/templates/webtoffee-gtm-template", "_blank");
		},
	},
	computed: {
	},
};
</script>
<style lang="scss" scoped>
    .wcc-gtm-template-container {
        padding: 20px 16px;
    }
    .wcc-gtm-template-instructions {
        ol {
            margin-left: 1.2em;
            margin-top: 48px;
            margin-bottom: 48px;
            li {
                line-height: 1.8;
            }
            b {
                font-weight: 600;
            }
            a {
                color: #1a73e8;
                text-decoration: underline;
            }
        }
    }
    .wcc-gtm-template-image {
        display: flex;
        align-items: center;
        justify-content: center;
        .wcc-gtm-template-image {
            height: 100%;
            width: 100%;
            background: url("~@/assets/gtm-template.svg");
            background-repeat: no-repeat;
            border-radius: 10px;
        }
    }
    .wcc-gtm-template-instructions .wcc-button {
    display: inline-flex;
    align-items: center;
    gap: 0.5em; // space between text and icon
    }

    // Responsive: For small screens, reduce image size and make it fit
    @media (max-width: 900px) {
    .wcc-row {
        flex-direction: column;
    }
    .wcc-gtm-template-image .wcc-gtm-template-image {
        max-width: 350px;
        min-height: 180px;
        margin: 0 auto;
        background-size: contain;
        background-position: center;
        aspect-ratio: 16/9;
    }
    }

    @media (max-width: 600px) {
    .wcc-gtm-template-image .wcc-gtm-template-image {
        max-width: 100%;
        min-width: 0;
        min-height: 120px;
        background-size: contain;
        background-position: center;
        aspect-ratio: 16/9;
    }
    }
</style>