<template>
  <div id="layout-multi">
    <div id="card-time" class="card" v-if="state.cardVisibility.time">
      <TimeCard />
    </div>
    <div id="card-zodiac" class="card" v-if="state.cardVisibility.zodiac">
      <ZodiacCard />
    </div>
    <div id="card-knowledge" class="card" v-if="state.cardVisibility.knowledge">
      <KnowledgeCard />
    </div>
    <div id="card-ainews" class="card" v-if="state.cardVisibility.ainews">
      <AINewsCard />
    </div>
    <div id="card-weather" class="card" v-if="state.cardVisibility.weather">
      <WeatherCard />
    </div>
    <PhotoCard />
  </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'
import PhotoCard from './PhotoCard.vue'
</script>

<style scoped>
#layout-multi {
  position: fixed;
  inset: var(--layout-top) var(--layout-x) var(--layout-bottom);
  z-index: 10;
  display: grid;
  grid-template-columns: minmax(420px, 1fr) minmax(360px, var(--knowledge-panel)) var(--right-panel);
  grid-template-rows: var(--time-panel-h) var(--layout-gap) var(--zodiac-panel-h) minmax(32px, 1fr) auto;
  grid-template-areas:
    "photo knowledge time"
    "photo knowledge ."
    "photo knowledge zodiac"
    ". . ."
    "news weather weather";
  column-gap: var(--layout-col-gap);
  row-gap: 0;
  pointer-events: none;
}
#layout-multi > .card { pointer-events: none; }
#card-time {
  grid-area: time; text-align: left;
  width: 100%; height: 100%; padding: 22px 30px;
}
#card-zodiac {
  grid-area: zodiac; width: 100%; height: 100%; padding: 22px 28px;
}
#card-knowledge {
  grid-area: knowledge; align-self: stretch;
  width: 100%; min-height: 0; padding: 22px 26px;
}
#card-ainews {
  grid-area: news; align-self: end;
  width: 100%; max-height: 390px;
}
#card-weather {
  grid-area: weather; align-self: end;
  width: 100%; min-width: 0; text-align: right;
  padding: 22px 28px 24px;
}
#card-knowledge { overflow: hidden; }
#layout-multi :deep(#card-photo) {
  grid-area: photo;
  position: relative; top: auto; left: auto;
  align-self: start;
  width: 100%;
  max-height: var(--photo-panel-h);
  padding: 16px;
}
#layout-multi :deep(#card-photo img) {
  max-height: calc(var(--photo-panel-h) - 32px);
}
</style>
