<template>

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

    <v-row style="background-color: #6b0065; height: 100px; margin-top: -50px; margin-bottom: -25px;"></v-row>

    <v-row justify="center">
      <v-col cols="12">
        <v-img class="profile-banner " max-height="375" :src="bannerImageUrl" cover
          style="box-shadow: 0 4px 6px rgba(0, 0, 0, 0.8);"></v-img>
      </v-col>
    </v-row>
    <v-row style="background-color: #6b0065; height: 100px; margin-top: -0px;" align="center">
      <v-col cols="12" class="text-right">
        <v-btn style="margin-right: 3%"> <v-icon>mdi-pencil</v-icon></v-btn>
      </v-col>
    </v-row>

    <v-row justify="center">

    </v-row>


    <v-container style="max-width: 800px; margin-top: -100px" class="d-flex justify-center align-center">
      <v-container>
        <v-row>
          <v-col style="background-color: white; border-radius: 30px;" class=" col-shadow">
            <v-row style="margin-bottom: 20px;">
              <v-spacer></v-spacer>
              <v-col style="margin-top: -70px;">
                <v-row>
                  <v-img class="your-profile-picture" :src="profilePictureUrl"></v-img>
                </v-row>
                <v-col>
                  <v-btn style="margin-top: -30px;">
                    <v-icon>mdi-pencil</v-icon>
                  </v-btn>
                </v-col>

              </v-col>
              <v-spacer></v-spacer>
            </v-row>
            <p class="text-center" style="margin-bottom: 10px; font-size: 2rem; font-weight: 600;">{{ userName }}</p>
            <p class="text-center" style="margin-bottom: 50px; font-size: 1.2rem">Informations personnelles</p>

            <v-form>
              <v-text-field v-model="firstName" label="Prénom"></v-text-field>
              <v-text-field v-model="lastName" label="Nom"></v-text-field>
              <v-text-field v-model="titre" label="Titre"></v-text-field>
              <v-text-field v-model="description" label="Description"></v-text-field>

            </v-form>
            <v-col class="text-right"> <!-- Aligner le contenu à droite -->

              <router-link :to="{ name: 'creatorfolio' }" class="">
                <v-btn style="margin-right: 20px;">Retour</v-btn>
              </router-link>
              <v-btn>Éditer</v-btn>

            </v-col>

          </v-col>

        </v-row>
      </v-container>
    </v-container>
    <FooterLayout></FooterLayout>
  </body>
</template>

<script setup>
import DefaultLayout from '@/layouts/DefaultLayout.vue';
import FooterLayout from '@/layouts/FooterLayout.vue';
import { ref } from 'vue';



const profilePictureUrl = ref('../../../images/guillaume.png');
const bannerImageUrl = ref('../../../images/guillaimeaime3x.png');

</script>

<style>
.your-profile-picture {
  width: 300px;
  border-radius: 40px;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.6);

}

.row-shadow {
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.6);
}

.col-shadow {
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
}
</style>
