<template>
  <div id="layout-single">
    <div id="info" class="card">
      <TimeCard v-if="state.cardVisibility.time" />
      <div class="divider"></div>
      <AINewsCard v-if="state.cardVisibility.ainews" />
      <div class="divider" v-if="state.cardVisibility.ainews"></div>
      <KnowledgeCard v-if="state.cardVisibility.knowledge" />
      <div class="divider" v-if="state.cardVisibility.knowledge"></div>
      <WeatherCard v-if="state.cardVisibility.weather" />
      <div class="divider" v-if="state.cardVisibility.weather"></div>
      <ZodiacCard v-if="state.cardVisibility.zodiac" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { state } from '../composables/useOverlayState'
import TimeCard from './TimeCard.vue'
import WeatherCard from './WeatherCard.vue'
import ZodiacCard from './ZodiacCard.vue'
import KnowledgeCard from './KnowledgeCard.vue'
import AINewsCard from './AINewsCard.vue'
</script>

<style scoped>
#layout-single { display: block; }
#info {
  position: fixed;
  top: 42px; right: 42px;
  text-align: left;
  width: min(760px, calc(50vw - 52px));
  max-height: calc(100vh - 84px);
  z-index: 10;
}
</style>
