<template>
    <div>
        <b-form @submit.prevent="handleSubmit">
            <b-form-group
                    id="email-group"
                    label="Email address:"
                    label-for="email"
                    description="We'll never share your email with anyone else."
            >
                <b-form-input
                        id="email"
                        v-model="form.email"
                        type="email"
                        required
                        placeholder="Enter email"
                ></b-form-input>
            </b-form-group>

            <b-form-group id="username-group" label="Username:" label-for="username">
                <b-form-input
                        id="username"
                        v-model="form.username"
                        required
                        placeholder="Enter a username"
                ></b-form-input>
            </b-form-group>

            <b-form-group id="password-group" label="Password:" label-for="password">
                <b-form-input
                        id="password"
                        v-model="form.password"
                        required
                        placeholder="Enter a password"
                ></b-form-input>
            </b-form-group>

            <b-form-group id="password-confirm-group" label="Confirm password:" label-for="password-confirm">
                <b-form-input
                        id="password-confirm"
                        v-model="form.passwordConfirm"
                        required
                        placeholder="Confirm your password"
                ></b-form-input>
            </b-form-group>

            <b-button type="submit" variant="primary">Submit</b-button>
        </b-form>
        <b-card class="mt-3" header="Form Data Result">
            <pre class="m-0">{{ form }}</pre>
        </b-card>
    </div>
</template>

<script>
    export default {
        name: "SignupForm",
        data() {
            return {
                form: {
                    username: '',
                    email: '',
                    password: '',
                    passwordConfirm: ''
                }
            }
        },
        methods: {
            handleSubmit(){
                
            }
        }
    }
</script>
