<template>
    <div class="row">
        <div class="col">
            <loading-component style="height: 200px; top: 0;" key="1" color="success" v-show="$store.getters.isLoading(section)"></loading-component>
            <div class="row" v-show="sent">
                <div class="col">
                    <div class="row align-items-center m-b-10">
                        <div class="col-auto p-r-0">
                            <div class="icon-thumbnail fs-16 icon-25 m-r-10 btn-rounded bg-success">
                                <i class="fa fa-check fs-16 text-white"></i>
                            </div>
                        </div>
                        <div class="col p-l-0">
                            <div class="font-heading fs-12 all-caps bold text-success">Verification email sent</div>
                        </div>
                    </div>
                    <div class="font-heading fs-11">It may take a few minutes. follow the directions in the email to confirm and activate your account</div>
                </div>
            </div>
            <div class="row" v-show="!$store.getters.isLoading(section) && !sent">
                <div class="col">
                    <div class="row">
                        <div class="col">
                            <div class="font-heading fs-16 all-caps bold m-b-15">Verify your email</div>
                            <div class="font-heading fs-12 m-b-5">We have sent an email to <span class="bold text-primary">{{ $store.getters.getUserEmail }}</span></div>
                            <div class="font-heading fs-11">You need to verify your email to continue.</div>
                            <div class="font-heading fs-11 m-b-15">If you have not received the verification email, please check your <span class="text-danger">Spam</span> folder.</div>
                            <div class="font-heading fs-11 m-b-10">You can also click the resend button below to have another email sent to you.</div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-auto">
                            <button class="btn btn-sm b-rad-none btn-outline-success" @click="submit(route('api.account.email.verification.resend'), 'post', section, true, false); sent=true">Resend Verification Email</button>
                        </div>
                        <div class="col no-padding">
                            <error-message-component :error="error"></error-message-component>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import ModalFromHandler from '../../../general/mixins/modalFormHandler'
    export default {
        data(){
            return {
                sent: false,
                parameters: {
                    user_id: this.$store.getters.getUserId
                }
            }
        },
        mixins: [ModalFromHandler]

    }
</script>