<script setup lang="ts">
import { useRuntimeConfig } from '#imports'

const props = defineProps({
  opaque: Boolean,
})

const config = useRuntimeConfig()
const version = config.public.version
const buildDate = config.public.buildDate

const currentYear = new Date().getFullYear()
const mailTemplate = `I've just found a bug on https://enderman.ch and would like to report it.%0D%0A%0D%0AWebsite version: ${
  config.public.version
}%0D%0ABuild date: ${
  config.public.buildDate
}%0D%0ATimestamp: ${new Date().toISOString()}%0D%0A%0D%0A%0D%0ASteps to reproduce:%0D%0A{ Explain in detail what happened here, or attach a video/screenshot }%0D%0A%0D%0AAdditional information:%0D%0A{ Helpful information, such as developer console output / Leave empty if none }%0D%0A%0D%0A%0D%0A// Keep in mind that it's just a template, you can change it as you wish! :)`
</script>

<template>
  <footer class="user-select-none text-align-center line-height-1-5">
    <span
      class="font-small"
      :class="{ transpaque: !props.opaque, 'text-shadow': !props.opaque }"
    >
      <EMail
        class="link-hi-force-dark"
        address="contact@enderman.ch"
        cc="admin@enderman.ch"
        subject="Bug report: enderman.ch"
        :body="mailTemplate"
      >
        <strong>Report a bug</strong>
      </EMail>
      <br />
      © 2018-{{ currentYear }},
      <a class="link-hi-force-dark" href="https://enderman.ch">Enderman</a>. All
      rights reserved.
      <sub>
        β{{ version ? version : '?.?.?' }} ({{
          buildDate ? buildDate : '1970-01-01'
        }})
      </sub>
    </span>
  </footer>
</template>

<style scoped lang="scss">
.transpaque {
  color: white;

  opacity: 0.25;
  transition: ease 0.3s;
}

.transpaque:hover {
  opacity: 1;
}

.line-height-1-5 {
  line-height: 14px * 1.5;
}

.text-shadow {
  text-shadow: black 0 2px 5px;
}
</style>
