<template>

  <body style="background-color: #f4f4f4;">

    <!-- Version pour ordinateur -->
    <v-card style="z-index: 9000; background-color: #f4f4f4;" class="hidden-sm-and-down" hidden-sm-and-down>
      <v-container style="z-index: 2000; margin-bottom: .5%; margin-top: -.6%; margin-right: 1%;">
        <v-row justify="end" style="margin-top: .2%; margin-bottom: -1.2%;">
          <v-col cols="auto" class="d-flex align-end justify-end">
            <router-link :to="{ name: 'yourprofile' }">
              <v-row class="d-flex align-center">
                <img src="/images/anonyme.png" class="header-profile-icon mr-2" alt="Logo">
                <h1 class="mb-0 text-h5">ANONYME</h1>
              </v-row>
            </router-link>
          </v-col>
        </v-row>
      </v-container>
    </v-card>

    <!-- Version pour mobile -->
    <v-card style="z-index: 9000; background-color: #f4f4f4;" class="hidden-md-and-up" hidden-md-and-up>
      <v-app-bar app>
        <v-app-bar-nav-icon @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
        <v-row>
          <v-col cols="11" class="d-flex align-center justify-center">
            <img src="/images/Chevron2.png" class="mobile-header" alt="Logo">
          </v-col>

        </v-row>
      </v-app-bar>
      <v-navigation-drawer v-model="drawer" temporary>
        <v-list>
          <v-list-item subtitle="Pascal@hutopy.com" title="Pascal Marchesseault">
            <template v-slot:prepend>
              <img src="/images/pascal.jpg" class="mobile-profile-picture mini-profile-picture " alt="Avatar">
            </template>

          </v-list-item>
        </v-list>
        <v-divider></v-divider>
        <v-list density="compact" nav>
          <h1 class="h1-navigation">Navigation</h1>
          <router-link :to="{ name: 'home' }" class="">
            <v-list-item prepend-icon="mdi-home" title="Accueil" value="home"></v-list-item>
          </router-link>
          <RouterLink :to="{ name: 'contact' }">
            <v-list-item prepend-icon="mdi-account-multiple" title="Amis" value="friends"></v-list-item>
          </RouterLink>
          <v-list-item prepend-icon="mdi-newspaper" title="Contenu" value="content"></v-list-item>
          <v-divider style="margin-top: 20%;"></v-divider>
          <h1 class="h1-navigation">Outils</h1>
          <v-list-item prepend-icon="mdi-wallet" title="Portefeuille" value="wallet"></v-list-item>
          <v-list-item style="margin-top: 110%;" prepend-icon="mdi-logout" title="Déconnexion"
            value="logout"></v-list-item>

        </v-list>
      </v-navigation-drawer>
    </v-card>


    <main class="px-8 py-3 ">
      <router-view />
    </main>

  </body>
</template>

<script setup>
import { auth } from '@/stores/auth.js';
import { useRouter } from 'vue-router';

const store = auth();
const router = useRouter();

const logout = () => {
  store.logout();
  router.push('/login');
}

const user = store.user;

</script>

<script>
export default {




  data() {
    return {
      imageSrc: '../../../images/guillaimeaime3x.png',
      drawer: false,
      items: [
        { title: 'Item 1' },
        { title: 'Item 2' },
        { title: 'Item 3' },
      ],
    };


  },
};
</script>

<style scoped>
.mini-profile-picture {
  border-radius: 100px;
}

.header-profile-icon {
  height: 60px;
  width: 60px;
  border-radius: 50px;
  border: 2px solid #a30e79;
}

.mobile-profile-picture {
  height: 40px;
  border-radius: px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
  /* Ajouter une ombre à la photo */
  border: 2px solid #a30e79;
  margin-right: 10px
}

.header-banner {
  border-top: 5px solid rgba(107, 0, 101, 1);
  margin-top: 15%;

}

.social-container {
  background-color: #006d77;
  margin-top: -20%;
  font-size: 1.4rem;
  font-weight: 800;
  color: white;
}

.social-container2 {
  background-color: #0baab2;
  font-size: 1.4rem;
  font-weight: 800;
  color: white;
  min-width: 400px;

}


.mobile-header {
  height: 50px;

}
</style>