<template>
  <v-container class="fill-height">
    <v-responsive
      class="align-centerfill-height mx-auto"
      max-width="900"
    >
      <div class="text-center">
        <div class="text-body-2 font-weight-light mb-n1">Welcome to</div>
        <h1 class="text-h2 font-weight-bold">home-cert-manager</h1>
      </div>

      <div class="py-4" />

      <v-row>
        <v-col cols="12">
          <v-card
            class="py-4"
            color="surface-variant"
            image="https://cdn.vuetifyjs.com/docs/images/one/create/feature.png"
            prepend-icon="mdi-rocket-launch-outline"
            rounded="lg"
            variant="outlined"
          >
            <template #image>
              <v-img position="top right" />
            </template>

            <template #title>
              <h2 class="text-h5 font-weight-bold">Get started</h2>
            </template>
          </v-card>
        </v-col>

        <v-col cols="6">
          <v-card
            class="py-4"
            color="surface-variant"
            prepend-icon="mdi-certificate"
            rounded="lg"
            title="Manage your certificates"
            variant="text"
            to="/cert-request"
          />
        </v-col>

        <v-col cols="6">
          <v-card
            class="py-4"
            color="surface-variant"
            prepend-icon="mdi-home-lock"
            rounded="lg"
            title="Secure your home lab"
            variant="text"
          />
        </v-col>

        <v-col cols="6">
          <v-card
            class="py-4"
            color="surface-variant"
            prepend-icon="mdi-domain"
            rounded="lg"
            title="Domain management"
            variant="text"
          />
        </v-col>

        <v-col cols="6">
          <v-card
            class="py-4"
            color="surface-variant"
            prepend-icon="mdi-web"
            rounded="lg"
            title="Internet certificate support"
            variant="text"
          />
        </v-col>
      </v-row>
    </v-responsive>
  </v-container>
</template>

<script setup lang="ts">
  //
</script>
