
<template>

<div class="vCard">
 <vue-tabs>
    <v-tab title="👤 Contact">
		<h1>👤 Contact</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" required>
		</div>
			
		 <button @click="persist">Enregistrer</button>
		
    </v-tab>
	<br>
    <v-tab 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}" 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" pattern="^((\+\d{1,3}(-| )?\(?\d\)?(-| )?\d{1,5})|(\(?\d{2,6}\)?))(-| )?(\d{3,4})(-| )?(\d{4})(( x| ext)\d{1,5}){0,1}$" 
			v-model="home">
		</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>				
		 <button @click="persist">Enregistrer</button>
		</div> 
    </v-tab>
	<br>
    <v-tab 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" pattern="^((\+\d{1,3}(-| )?\(?\d\)?(-| )?\d{1,5})|(\(?\d{2,6}\)?))(-| )?(\d{3,4})(-| )?(\d{4})(( x| ext)\d{1,5}){0,1}$"
			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>

		<div>				
		 <button @click="persist">Enregistrer</button>
		</div> 
    </v-tab>
	<br>
	 <v-tab title="✍🏼 Commentaires">
		 <h1>✍🏼 Commentaires</h1>
		 <div>
			<label for="comment"></label>
			<textarea v-model="home"></textarea>
		</div>
					
		 <button @click="persist">Enregistrer</button>
		
    </v-tab>
</vue-tabs>
</div>

    </template>

    <script>
	/*	export default {
            name: 'vCard',
			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');
					}
				}
			};
			
		new Vue({
  			el:"#vCard",
		})	
			*/
    </script>

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