<template>
    <div class="login-page">
        <page-title pagetitle="Se Connecter"/>
        <form action="#" @submit.prevent="onSubmit">
            <div class="form-content">
                <text-input id="mail" label="Email"/>
                <pwd-input id="password" label="Mot de passe"/>
                <checkbox-input id="remember" label="Se souvenir de moi"/>
                
            </div>
                
            <svg-button id="back" svg="/icons/back.svg"/>
            <svg-button id="validate" svg="/icons/validate.svg"/>
        </form>
    </div>
</template>

<script>
import PageTitle from '@/components/PageTitle.vue'
import SvgButton from '@/components/SvgButton.vue'
import TextInput from '@/components/form/TextInput.vue'
import PwdInput from '@/components/form/PwdInput.vue'
import CheckboxInput from '@/components/form/CheckboxInput.vue'
export default {
    name: 'Login',
    components: {
        PageTitle,
        SvgButton,
        TextInput,
        PwdInput,
        CheckboxInput
    },
    methods: {
        onSubmit: function(event){
            if (event.submitter.id=='back') {
                this.$router.push('/');
            }
            if (event.submitter.id=='validate') {
                this.$router.push('lobby');
            }
        }
    }
}
</script>

<style>
.login-page{
    top: 100px;
    position: relative;
}

.login-page .form-content{
    flex-direction: column;
    display: flex;
    width: 900px;
    background-color: rgba(196, 196, 196, 0.6);
    margin: 0 auto;
    padding-top: 50px;
    padding-bottom: 40px;
    
}



*, ::before, ::after {
    box-sizing: border-box;
}
</style>