<template>
  <div class="d-flex text-center flex-column flex-md-row flex-grow-1">
    <v-sheet class="layout-side mx-auto mx-md-1 d-none d-md-flex flex-md-column justify-space-between px-2">
      <div class="mt-3 mt-md-10 pa-2">
        <div class="text-h3 font-weight-bold text-primary">
          {{ name }}
        </div>
        <div class="title my-2">Welcome! Let's build amazing things together.</div>
        <v-btn to="/" class="my-4">Take me back</v-btn>
      </div>
      <img class="w-100" src="/images/illustrations/signin-illustration.svg"/>

    </v-sheet>

    <div class="pa-2 pa-md-4 flex-grow-1 align-center justify-center d-flex flex-column">
      <div class="layout-content ma-auto w-100">
        <router-view v-slot="{ Component }">
          <v-fade-transition mode="out-in">
            <component :is="Component"/>
          </v-fade-transition>
        </router-view>
      </div>
      <div class="overline mt-4">{{ title }} - v1.0.0</div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {useAppInfo} from "@/composables/system";

const {title, name} = useAppInfo();
</script>

<style scoped>
.layout-side {
  width: 420px;
}

.layout-content {
  max-width: 480px;
}
</style>
