<script setup lang="ts">
import { useHead } from '@unhead/vue';
import BracketPanel from '../components/BracketPanel.vue';
import CommentaryPanel from '../components/CommentaryPanel.vue';
import ScoreboardPanel from '../components/ScoreboardPanel.vue';

defineOptions({ name: 'DashboardView' });

useHead({ title: 'Dashboard' });
</script>

<template>
  <QPage class="q-pa-lg">
    <div class="dashboard-panels q-mt-lg">
      <div class="dashboard-row dashboard-row--scoreboard">
        <QCard
          bordered
          class="dashboard-panel-card"
        >
          <QCardSection class="dashboard-panel-content">
            <ScoreboardPanel />
          </QCardSection>
        </QCard>
      </div>

      <div class="dashboard-row dashboard-row--bottom">
        <QCard
          bordered
          class="dashboard-panel-card"
        >
          <QCardSection class="dashboard-panel-content">
            <CommentaryPanel />
          </QCardSection>
        </QCard>
        <QCard
          bordered
          class="dashboard-panel-card"
        >
          <QCardSection class="dashboard-panel-content">
            <BracketPanel />
          </QCardSection>
        </QCard>
      </div>
    </div>
  </QPage>
</template>

<style scoped>
.dashboard-panels {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.dashboard-row {
  width: 100%;
}

.dashboard-row--bottom {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

.dashboard-panel-card {
  width: 100%;
}

.dashboard-panel-content {
  padding-bottom: 16px;
}

@media (min-width: 1200px) {
  .dashboard-row--bottom {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
</style>
