<script setup>
import {useI18n} from 'vue-i18n';
const {t} = useI18n({useScope: 'local'});
</script>

<template>
<form id="profil" method="POST" v-on:submit="checkForm">

    <div title="👤 Profil">
		<h1>👤 Profil</h1>
      	<div>
			<label for="avatar">Avatar</label>
			<input type="file" />
		</div>
		
		<div>
			<label for="nickname">Pseudonyme :</label>
			<input type="text" v-model="home">
		</div>

		<div>
			<label for="emailHome">Email Personnelle :</label>
			<input type="email" v-model="home" placeholder="john.Doe@email.com" required>
		</div>
    </div>

	<br>

    <div title="📇 Informations personnelles">
		<h1>📇 Informations personnelles</h1>
      	<div>
			<label for="name">Nom complet :</label>
			<input type="text" v-model="home" pattern="{a-zA-Z}{4,25}" placeholder="John Doe" required>
		</div>

		<div>
			<label for="bday"> Date de naissance :</label>
			<input type="date" v-model="home">
		</div>
		
        <div>
			<label for="nbrHome">Numéro de téléphone :</label>
			<input type="tel" v-model="home" placeholder="+32(0)15738490" >
		</div>

		<div class="Home">
			<h3>Adresse Personnelle</h3>
				<ul>
					<li><label for="street">Rue :</label></li>
					<input type="text" v-model="home">
					
					<li><label for="locality">Ville :</label></li>
					<input type="text" v-model="home">
					
					<li><label for="pcode">Code Postal :</label></li>
					<input type="text" v-model="home">
					
					<li><label for="ctry">Pays :</label></li>
					<input type="text" v-model="home">
				</ul>	
		</div>
    </div>

	<br>

    <div title="💼 Emploi">
		<h1>💼 Emploi</h1>
      <div>
			<label for="orgname">Entreprise :</label>
			<input type="text" v-model="work">
		</div>
		<div>
			<label for="title">Poste :</label>
			<input type="text" v-model="work">
		</div>
        <div>
			<label for="role">Rôle :</label>
			<input type="text" v-model="work">
		</div>
		<div>
			<label for="emailWork">Email Professionnel :</label>
			<input type="email" v-model="work">
		</div>
        <div>
			<label for="nbrWork">Numéro de téléphone :</label>
			<input type="tel" v-model="work">
		</div>

        <div class="Work">
			<h3>Adresse Proffessionelle</h3>
				<ul>
					<li><label for="street">Rue :</label></li>
					<input type="text" v-model="work">
					
					<li><label for="locality">Ville :</label></li>
					<input type="text" v-model="work">
					
					<li><label for="pcode">Code Postal :</label></li>
					<input type="text" v-model="work">
					
					<li><label for="ctry">Pays :</label></li>
					<input type="text" v-model="work">
				</ul>
		</div>
				
		 <button type="submit" value="Submit">Enregistrer</button>
    </div>

	<br>

	 <div title="✍🏼 À propos / Commentaires">
		 <h1>✍🏼 À propos / Commentaires</h1>
		 <div>
			<label for="comments"></label>
			<textarea v-model="home"></textarea>
		</div>
		  <button @click="persist">Enregistrer</button>
    </div>

</form>

    </template>

    <script>
	/*const profil = new Vue ({	// vue n'est pas définie
  		el: '#profil',
  		data: {
    	home: null,
		work: null
    
  		},
  		methods:{
    		checkForm: function (e) {
      		if (this.home && this.work) {
        	return true;
      	}
      	e.preventDefault();
    	}
  		}
		}); */


		/*export default {  //home n'est pas déclarer
            name: 'profil',
			setup() {
            home = "",
            work = ""
			},
			mounted() {
			if (localStorage.home) {
			this.home = localStorage.home;
				}
			if (localStorage.work) {
			this.work = localStorage.work;
				}	
			},
			 methods: {
				persist() {
				localStorage.home = this.home;
				localStorage.work = this.work;
				console.log('ok');
					}
				}
			}; */
	
    </script>

	<style scoped>
		label{
			padding: 5px;
		}
		input{
			padding: 5px;
		}
		li {
			list-style-type: none;
		}
		textarea {
			padding: 20px;
		}
		button{
			margin-top: 20px;
		}
	</style>

<i18n lang="json" locale="en" src="./locale/en.json"/>
<i18n lang="json" locale="fr" src="./locale/fr.json"/>