<template>
    <div class="row">
        <div class="col">
            <div class="row" v-if="item.employee.status !== 2">
                <div class="col">
                    <div class="alert alert-warning padding-15" role="alert">
                        <div class="row m-b-15">
                            <div class="col">
                                <div class="font-heading text-danger fs-12">You are unable to make payments and complete your transfer requests until you complete your email address confirmation!</div>
                            </div>
                        </div>
                        <email-verification-form-component section="resendEmailVerificationSection"></email-verification-form-component>
                    </div>
                </div>
            </div>
            <div class="row parentContainer" v-if="item.status !== 2">
                <div class="col">
                    <div class="row no-margin">
                        <div class="col" :class="[{'bg-danger-lighter': item.status !== 1}, {'bg-master-lighter': item.status === 1}]">
                            <div class="row align-items-center">
                                <div class="col-auto p-r-0 p-t-15 p-b-15">
                                    <div class="icon-thumbnail fs-20 icon-35 btn-rounded" :class="[{'bg-danger-light': item.status !== 1}, {'bg-master-light': item.status === 1}]">
                                        <i class="fa fs-20" :class="[{'fa-times': item.status !== 1}, {'text-white': item.status !== 1}, {'fa-spinner': item.status === 1}]"></i>
                                    </div>
                                </div>
                                <div class="col p-l-0">
                                    <div class="font-heading bold fs-10" :class="[{'text-danger': item.status !== 1}]">Identification Verification</div>
                                    <div class="font-heading fs-10" :class="[{'text-danger': item.status !== 1}, {'muted': item.status === 1}]" v-text="item.status !== 1 ? 'Verification request rejected':'Approval in progress...'"></div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col p-b-15">
                                    <div class="font-heading text-danger fs-10" v-if="item.status !== 1">You are unable to create new transfer requests or make payments until you have successfully verified your identity!</div>
                                    <div class="font-heading fs-11" v-if="item.status === 1">You are unable to make payments until your identification is approved!</div>
                                </div>
                            </div>
                            <div class="row" v-if="item.status === 1">
                                <div class="col no-padding">
                                    <div class="progress m-b-0">
                                        <div class="progress-bar progress-bar-primary" style="width:75%"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="row" v-if="item.status !== 1">
                                <div class="col no-padding">
                                    <button class="btn btn-sm btn-danger btn-block b-rad-none requestModal" data-type="identificationVerificationModal">Re-submit Identification</button>
                                </div>
                            </div>
                            <modal-component type="identificationVerificationModal" v-if="item.status !== 1">
                                <identification-verification-form-component section="identificationVerificationSection" :data="item"></identification-verification-form-component>
                            </modal-component>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import componentHandler from '../../../general/mixins/componentHandler';
    export default {
        mixins: [componentHandler]
    }
</script>