<template>
  <div class="bottomfloat PolicyTips" v-if="showTips">
    <span class="tips">
      {{
        $t(
          'By using bgsub.com you agree to the use of cookies. You can find details on how we use cookies in our '
        )
      }}
      <a :href="'/pages/#/policy/privacy_' + locateLang" target="_blank"
        ><b>{{ $t('Privacy Policy') }}</b></a
      >.
    </span>
    <span class="closeBtn" @click="closeTips()"> OK </span>
  </div>
  <div class="placeholder" v-if="showTips"></div>
</template>
<style lang="scss" scoped>
@import '../css/bgsub_common.scss';
.bottomfloat {
  position: fixed;
  bottom: 0;
  z-index: 10;
}
.PolicyTips {
  width: 100%;
  padding: 16px;
  background: $primary;
  color: white;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;
  a:visited {
    color: white;
  }
  a {
    color: white;
    text-decoration: underline;
  }
  .tips {
    max-width: 70vw;
    font-size: 20px;
    text-align: left;
  }
  .closeBtn {
    padding: 8px 30px;
    border-radius: 6px;
    background: white;
    font-weight: 600;
    color: $primary;
    cursor: pointer;
  }
}
.placeholder {
  width: 100%;
  height: 3.5rem;
  bottom: 0;
}
</style>
<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'FloatPolicyTips',
  props: {},
  data() {
    return {
      showTips: false,
      locateLang: 'en_US',
    };
  },
  created() {
    this.showTips = localStorage.getItem('bgsub_notShowPolicyTips') !== 'true';
    this.locateLang = this.$i18n.locale.replace('-', '_');
  },
  methods: {
    closeTips() {
      this.showTips = false;
      localStorage.setItem('bgsub_notShowPolicyTips', 'true');
    },
  },
});
</script>
