<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="AL"
        ></v-avatar>
        <v-chip text="AuthLayout"></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>
            <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>
const links = [
  {text: 'Главная', to: '/'},
  {text: 'О сервисе', to: '/about'},
  {text: 'Авторизация', to: '/login'},

]
</script>