<template>
  <v-container fluid class="sub-layout">
    <v-row no-gutters>
      <v-col cols="12" md="8">
        <v-row no-gutters>
          <v-col cols="12">
            <v-card
              class="tile"
              :style="{ height: 'calc(40vh - 24px)', width: '100%' }"
            >
              <policy-plot />
            </v-card>
          </v-col>
          <v-col cols="12">
            <v-card
              class="tile"
              :style="{ height: 'calc(20vh - 24px)', width: '100%' }"
            >
              <weight-tuner />
            </v-card>
          </v-col>
          <v-col cols="12">
            <v-card
              class="tile"
              :style="{ height: 'calc(40vh - 24px)', width: '100%' }"
            >
              <reward-plot />
            </v-card>
          </v-col>
        </v-row>
      </v-col>
      <v-col cols="12" md="4">
        <v-row no-gutters>
          <v-col cols="12">
            <v-card
              class="tile"
              :style="{ height: 'calc(40vh - 24px)', width: '100%' }"
            >
              <MountainCarCanvas />
            </v-card>
          </v-col>
          <v-col cols="12">
            <v-card
              class="tile"
              :style="{ height: 'calc(60vh - 48px)', width: '100%' }"
            >
              <control-panel />
            </v-card>
          </v-col>
        </v-row>
      </v-col>
    </v-row>
  </v-container>
</template>

<script setup>
import WeightTuner from "@/components/WeightTuner.vue";
import RewardPlot from "@/components/RewardPlot.vue";
import PolicyPlot from "@/components/PolicyPlot.vue";
import ControlPanel from "@/components/ControlPanel.vue";
import MountainCarCanvas from "@/components/MountainCarCanvas.vue";
</script>

<style scoped>
.sub-layout {
  padding: 0;
  margin: 1px 0 0 0;
}
.tile {
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;

  border: 1px solid #333;
}
</style>
