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

import Controls from '@/layout/Controls.vue'
import List from '@/layout/List.vue'
import Details from '@/layout/Details.vue'

import { useSystemStore } from '@/stores/system'
const sys = useSystemStore()
onMounted(() => {
  sys.allResults()
  setInterval(() => {
    sys.updateRunning()
  }, 2 * 1000)
})
</script>

<template>
  <HRoot darkAppearance>
    <HAGrid
      class="main-grid"
      template="
        'controls list              details' auto
       / 15em     minmax(20em, 1fr) 2fr"
    >
      <HArea area="controls" class="main-area area-controls">
        <Controls />
      </HArea>
      <HArea area="list" class="main-area area-list">
        <List />
      </HArea>
      <HArea area="details" class="main-area area-details">
        <Details />
      </HArea>
    </HAGrid>
  </HRoot>
</template>

<style>
body { background: #000; overflow-y: hidden; }

.holo-root {
  --bg0:  203 55% 10%;
  --bg5:  203 57% 15%;
  --bg10: 203 60% 20%;
  --bg15: 203 62% 25%;
  --bg20: 203 65% 30%;
  --display-font: "IBM Plex Sans" !important;
  overflow: hidden !important;
}

.holo-root h1, .holo-root h2 { text-transform: none !important; }

.main-area {
  height: 100vh;
  overflow-y: auto;
}

.area-controls {
  background-color: hsl(var(--bg10));
}
.area-list {
  background-color: hsl(var(--bg5));
}
.area-details {
  background-color: hsl(var(--bg0));
}

.fs {
  display: flex;
  align-items: center;
}

.fsb {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.v-enter-active,
.v-leave-active {
  transition: opacity 200ms;
}

.v-enter-from,
.v-leave-to {
  opacity: 0;
}
</style>
