<template>
  <v-app id="inspire">
    <v-app-bar flat>
      <v-container class="mx-auto d-flex align-center justify-center">
        <v-avatar
            class="me-4"
            color="grey-darken-1"
            size="32"
            text="ML"
        ></v-avatar>
        <v-chip text="MainLayout"></v-chip>
        <v-btn
            v-for="link in links"
            :key="link"
            :text="link.text"
            variant="text"
            :to="link.to"
        ></v-btn>

        <v-spacer></v-spacer>

        <v-responsive max-width="160">
          <v-text-field
              density="compact"
              label="Поиск"
              rounded="lg"
              variant="solo-filled"
              flat
              hide-details
              single-line
          ></v-text-field>
        </v-responsive>
      </v-container>
    </v-app-bar>

    <v-main class="bg-grey-lighten-3">
      <v-container>
        <v-row>
          <v-col cols="2">
            <v-sheet rounded="lg">
              <v-list rounded="lg">
                <v-list-item
                    v-for="n in 5"
                    :key="n"
                    :title="`List Item ${n}`"
                    link
                ></v-list-item>

                <v-divider class="my-2"></v-divider>

                <v-list-item
                    v-if="auth.user()"
                    @click="auth.logout()"
                    color="grey-lighten-4"
                    title="Выход"
                    link
                ></v-list-item>
              </v-list>
            </v-sheet>
          </v-col>

          <v-col>
            <v-sheet
                class="pa-5"
                min-height="70vh"
                rounded="lg"
            >
              <slot></slot>
            </v-sheet>
          </v-col>
        </v-row>
      </v-container>
    </v-main>
  </v-app>
</template>

<script setup>
import {useAuth} from "vue-auth3";

const auth = useAuth()
const links = [
  {text: 'Главная', to: '/'},
  {text: 'О сервисе', to: '/about'},
  {text: 'Авторизация', to: '/login'},

]
</script>