<template>
    <div class="row m-b-20">
        <div class="col">
            <div class="row">
                <div class="col-3">
                    <div class="row">
                        <div class="col">
                            <div class="font-heading fs-10 muted all-caps">Name</div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col">
                            <div class="font-heading all-caps fs-11">{{ item.company_module.name }}</div>
                        </div>
                    </div>
                </div>
                <div class="col-2">
                    <div class="row">
                        <div class="col">
                            <div class="font-heading fs-10 muted all-caps">Reference</div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col">
                            <div class="font-heading all-caps fs-11">{{ item.connection.invitee_reference }}</div>
                        </div>
                    </div>
                </div>
                <div class="col-auto">
                    <a :href="route('customer.profile', item.connection.invitee_reference)" target="_blank">
                        <button type="button" class="btn btn-xs btn-primary fs-11">Open in new tab</button>
                    </a>
                </div>
            </div>
            <!-- company_module_contact -->
            <div class="row m-b-10 m-t-5" v-if="item.company_module_contact">
                <div class="col-auto">
                    <div class="row">
                        <div class="col">
                            <div class="font-heading fs-10 muted all-caps">Company Module Phone</div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col">
                            <div class="font-heading all-caps fs-11">{{ item.company_module_contact.phone }}</div>
                        </div>
                    </div>
                </div>
                <div class="col-auto">
                    <div class="row">
                        <div class="col">
                            <div class="font-heading fs-10 muted all-caps">Company Module Email</div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col">
                            <div class="font-heading all-caps fs-11">{{ item.company_module_contact.email }}</div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- company_contact -->
            <div class="row m-t-5" v-if="item.company_contact">
                <div class="col-auto">
                    <div class="row">
                        <div class="col">
                            <div class="font-heading fs-10 muted all-caps">Company Phone</div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col">
                            <div class="font-heading all-caps fs-11">{{ item.company_contact.phone }}</div>
                        </div>
                    </div>
                </div>
                <div class="col-auto">
                    <div class="row">
                        <div class="col">
                            <div class="font-heading fs-10 muted all-caps">Company Email</div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col">
                            <div class="font-heading all-caps fs-11">{{ item.company_contact.email }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import componentHandler from '../../../general/mixins/componentHandler';
    export default {
        mixins: [componentHandler]
    }
</script>
