<template>
  <UiNotification
    v-if="isShown && route.path !== '/policy'"
    v-model="isShown"
  >
    <template #title>{{ $t('cookie.title') }}</template>
    <p class="layout-cookie__text">{{ $t('cookie.text') }}</p>
    <template #footer>
      <div class="layout-cookie__buttons">
        <UiLink
          wide
          :to="generateLink('/policy')"
          :title="$t('privacy_policy')"
          theme="secondary"
        >{{ $t('cookie.learn_more') }}</UiLink>
        <UiBtn
          wide
          :title="$t('close')"
          :aria-label="$t('close')"
          theme="primary"
          @click="acceptCookies"
        >{{ $t('cookie.accept') }}</UiBtn>
      </div>
    </template>
  </UiNotification>
</template>

<script setup lang="ts">
const { generateLink } = useGenerateLink();
const isShown = ref(false);

const checkConsent = () => (isShown.value = !localStorage.getItem('accept_cookies'));

onMounted(() => checkConsent());

const route = useRoute();

const acceptCookies = () => {
  localStorage.setItem('accept_cookies', 'true');
  checkConsent();
};
</script>

<style lang="scss">
.layout-cookie__text {
  max-width: 320px;
  color: $cookie-text;
}

.layout-cookie__buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 8px;
}
</style>
