<template>
  <div class="copyright-notice__version" @click="openInfoModal">
    v{{ config.version }}, © 2021-2023, Settel
  </div>
  <InfoModal v-if="showInfoModal" @close="closeInfoModal" />
</template>

<script setup lang="ts">
import { useRuntimeConfig } from '#app'
import { ref } from 'vue'

const config = useRuntimeConfig()

const showInfoModal = ref(false)
const openInfoModal = () => { showInfoModal.value = true }
const closeInfoModal = () => { showInfoModal.value = false }
</script>

<style lang="scss">
.copyright-notice {
  &__version {
    position: absolute;
    right: 1em;
    bottom: 0;
    color: #606060;
    cursor: pointer;
    
    &:hover {
      color: #c0c0c0;
    }
  }
}
</style>