<template>
  <v-container fluid>
    <v-row dense>
      <v-col>
        <v-card to="/manage/game-objects/list" class="hover-effect">
          <v-img src="/static/header-game-objects.webp" cover content-class="d-flex flex-column justify-space-between" gradient="to bottom, rgba(0,0,0,0), rgba(0,0,0,.5)">
            <v-btn icon="mdi-plus" class="align-self-end ma-3" to="/manage/game-objects/add" color="white" size="small" v-tooltip="l.createGameObject"></v-btn>
            <v-card-title class="text-white text-h5" v-text="l.gameObjects"></v-card-title>
          </v-img>
        </v-card>
      </v-col>
      <v-col>
        <v-card to="/manage/scenarios/list" class="hover-effect">
          <v-img src="/static/header-scenarios.webp" cover content-class="d-flex flex-column justify-space-between"gradient="to bottom, rgba(0,0,0,0), rgba(0,0,0,.5)">
            <v-btn icon="mdi-plus" class="align-self-end ma-3" to="/manage/scenarios/add" color="white" size="small" v-tooltip="l.createScenario"></v-btn>
            <v-card-title class="text-white text-h5" v-text="l.gameScenarios"></v-card-title>
          </v-img>
        </v-card>
      </v-col>
      <v-col>
        <v-card to="/manage/games/list" class="hover-effect">
          <v-img src="/static/header-studio.webp" cover content-class="d-flex flex-column justify-space-between"gradient="to bottom, rgba(0,0,0,0), rgba(0,0,0,.5)">
            <v-btn icon="mdi-plus" class="align-self-end ma-3" to="/manage/games/add" color="white" size="small" v-tooltip="l.createGame"></v-btn>
            <v-card-title class="text-white text-h5" v-text="l.gameDirector"></v-card-title>
          </v-img>
        </v-card>
      </v-col>
      <v-col>
        <v-card to="/manage/preview/list" class="hover-effect">
          <v-img src="/static/header-preview.webp" cover content-class="d-flex flex-column justify-space-between"gradient="to bottom, rgba(0,0,0,0), rgba(0,0,0,.5)">
            <v-btn icon="mdi-arrow-right" class="align-self-end ma-3" to="/manage/preview/list" color="white" size="small" v-tooltip="l.preview"></v-btn>
            <v-card-title class="text-white text-h5" v-text="l.preview"></v-card-title>
          </v-img>
        </v-card>
      </v-col>
    </v-row>

  </v-container>
</template>

<script setup>
  //
</script>

<route>
  {
    meta: {
      layout: "console"
    }
  }
</route>