﻿<template>
  <div class="py-8" ref="container">
    <div class="text-center text-2xl py-4 border-t-4">À propos de vous</div>
    <div class="px-5 relative">
      <div class="flex flex-col space-y-4">
        <div>
          <div class="flex justify-between items-center mb-2">
            <label class="text-lg">Prénom</label>
          </div>
          <v-text-field v-model="firstName" label="Prénom" variant="outlined"></v-text-field>
        </div>

        <div>
          <div class="flex justify-between items-center mb-2">
            <label class="text-lg">Nom</label>
          </div>
          <v-text-field v-model="lastName" label="Nom" variant="outlined"></v-text-field>
        </div>

        <div>
          <div class="flex justify-between items-center mb-2">
            <label class="text-lg">Occupation</label>
          </div>
          <v-text-field v-model="occupation" label="Occupation" variant="outlined"></v-text-field>
        </div>

        <div>
          <div class="flex justify-between items-center mb-2">
            <label class="text-lg">Courriel</label>
          </div>
          <v-text-field v-model="email" label="Courriel" variant="outlined"></v-text-field>
        </div>

        <div>
          <div class="flex justify-between items-center mb-2">
            <label class="text-lg">Téléphone</label>
          </div>
          <v-text-field v-model="phone" label="Téléphone" variant="outlined"></v-text-field>
        </div>

        <div>
          <div class="flex justify-between items-center mb-2">
            <label class="text-lg">Date de naissance (JJ/MM/AAAA)</label>
          </div>
          <v-text-field v-model="birthDate" label="Date de naissance" variant="outlined"
                        :rules="[dateRule]"></v-text-field>
        </div>

        <div>
          <div class="flex justify-between items-center mb-2">
            <label class="text-lg">Pays</label>
          </div>
          <v-text-field v-model="country" label="Pays" variant="outlined"></v-text-field>
        </div>

        <div>
          <div class="flex justify-between items-center mb-2">
            <label class="text-lg">Ville</label>
          </div>
          <v-text-field v-model="city" label="Ville" variant="outlined"></v-text-field>
        </div>

        <div>
          <div class="flex justify-between items-center mb-2">
            <label class="text-lg">Adresse</label>
          </div>
          <v-text-field v-model="address" label="Adresse" variant="outlined"></v-text-field>
        </div>

        <div>
          <div class="flex justify-between items-center mb-2">
            <label class="text-lg">Titre A propos</label>
          </div>
          <v-text-field v-model="titre" label="Titre A propos" variant="outlined"></v-text-field>
        </div>

        <div>
          <div class="flex justify-between items-center mb-2">
            <label class="text-lg">Description</label>
          </div>
          <v-textarea v-model="description" label="Description" variant="outlined"></v-textarea>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const firstName = ref('');
const lastName = ref('');
const occupation = ref('');
const email = ref('');
const phone = ref('');
const birthDate = ref('');
const country = ref('');
const city = ref('');
const address = ref('');
const titre = ref('');
const description = ref('');

const dateRule = value => {
  const datePattern = /^(0[1-9]|[12][0-9]|3[01])\/(0[1-9]|1[0-2])\/(19|20)\d{2}$/;
  return datePattern.test(value) || 'Format de date invalide (JJ/MM/AAAA)';
};
</script>

<style scoped>
/* Votre style ici */
</style>
