<template>
    <div class="row m-t-10 parentContainer">
        <div class="col">
            <div class="row no-margin">
                <div class="col bg-white">
                    <div class="row align-items-center justify-content-center fs-11 p-t-10 p-b-10">
                        <div class="col">
                            <div class="row">
                                <div class="col bold"><span class="text-complete">{{this.account.email}}</span></div>
                            </div>
                            <div class="row">
                                <div class="col muted">{{this.account.created_at}}</div>
                            </div>
                        </div>
                        <div class="col-auto text-right">
                            <div class="dropdown show">
                                <button class="btn btn-secondary btn-xs b-rad-none p-r-0 muted" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                    <span>Action</span><i class="fa fa-angle-down m-l-5 p-l-5 p-r-5 muted"></i>
                                </button>
                                <div class="dropdown-menu dropdown-menu-right no-padding pointer" aria-labelledby="dropdownMenuLink">
                                    <div class="dropdown-item btn-xs p-t-0 p-l-15 p-r-15 b-b b-grey requestModal" data-type="delete">
                                        <i class="fa fa-trash"></i> <span class="">Delete</span>
                                    </div>
                                    <div class="dropdown-item btn-xs p-b-0 p-l-15 p-r-15" @click="resendInvite()">
                                        <i class="fa fa-envelope"></i> <span class="">Resend</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <confirm-modal-component
                    title="Delete Invitation"
                    :message="'Are you sure you want to remove?'"
                    type="delete"
                    danger
                    v-on:confirm="deleteInvite()"></confirm-modal-component>
        </div>
    </div>
</template>
<script>
    export default {
        props: ['data'],
        data() {
            return {
                account: this.data
            }
        },
        methods: {
            deleteInvite(){
                this.isLoading = true;

                fetch(route('api.account.invite.delete', {'id': this.account.id}), {
                    method: 'delete'
                }).catch(error => console.log(error));

                Event.$emit('updateInviteList');
                this.isLoading = false;
            },
            resendInvite(){

            }
        }

    }
</script>
