<template>
  <main class="entry-page">
    <iframe :src="myAccountUrl" class="iframe"></iframe>
  </main>
</template>

<script setup lang="ts">
import { computed } from 'vue'

const myAccountUrl = computed<string>(
  () => `${import.meta.env.VITE_API_URL}oauth/realms/geovisio/account`
)
</script>

<style lang="scss" scoped>
.entry-page {
  padding-right: toRem(4);
  padding-left: toRem(8);
}
.iframe {
  width: 100%;
  min-height: calc(100vh - #{toRem(9)});
}

@media (max-width: toRem(84.8)) {
  .entry-page {
    padding-top: toRem(4);
  }
}
@media (max-width: toRem(76.8)) {
  .entry-page {
    padding-right: toRem(2);
    padding-left: toRem(2);
  }
}
@media (max-width: toRem(50)) {
  .entry-page {
    padding-top: toRem(14);
  }
}
</style>
