<main class="layout-maxed collection" id="app">
    <h1>
        Mon compte
    </h1>

    <div class="grid grid-cols-1 md:grid-cols-2 gap-10">
        <form method="POST" action="/mon-compte" @submit="updateProfil">

            <div class="field">
                <label for="email">Adresse e-mail</label>
                <input
                    type="email"
                    readonly
                    disabled
                    name="email"
                    id="email"
                    v-model="email"
                />
            </div>
            <div class="field">
                <label for="username">Nom d'utilisateur</label>
                <input
                    type="string"
                    readonly
                    disabled
                    name="username"
                    id="username"
                    v-model="username"
                />
            </div>
            <div class="field">
                <label for="oldPassword">Mot de passe actuel</label>
                <input
                    type="password"
                    name="oldPassword"
                    id="oldPassword"
                    required
                    placeholder="Saisisssez votre mot de passe actuel"
                    v-model="oldPassword"
                />
            </div>
            <div></div>
            <div class="field">
                <label for="password">Nouveau mot de passe</label>
                <input
                    type="password"
                    name="password"
                    id="password"
                    required
                    placeholder="Saisisssez votre nouveau mot de passe"
                    v-model="password"
                />
            </div>
            <div class="field">
                <label for="passwordConfirm">Nouveau mot de passe (confirmation)</label>
                <input
                    type="password"
                    name="passwordConfirm"
                    id="passwordConfirm"
                    required
                    placeholder="Confirmez votre nouveau mot de passe"
                    v-model="passwordConfirm"
                />
            </div>

            <button type="submit" class="button is-primary mt-10" :disabled="loading">
                <span v-if="!loading">Mettre à jour</span>
                <i class="icon-spin animate-spin" v-if="loading"></i>
            </button>
        </form>
    </div>
</main>

<script>
    Vue.createApp({
        data() {
            return {
                email: '<%= user.email %>',
                username: '<%= user.username %>',
                oldPassword: '',
                password: '',
                passwordConfirm: '',
                loading: false,
            }
        },
        methods: {
            async updateProfil(event) {
                // try {
                //     if ( this.password !== this.passwordConfirm ) {
                //         throw "La confirnation du mot de passe ne correspond pas";
                //     }
                // } catch(err) {
                //     event.preventDefault();
                //     showToastr(err);
                // }
            },
        }
    }).mount('#app');
  </script>