<template>
    <div class="row m-b-15 align-items-end">
        <div class="col-auto">
            <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">{{this.item.name}}</div>
                </div>
            </div>
        </div>
        <div class="col-2 text-right">
            <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">{{this.item.reference}}</div>
                </div>
            </div>
        </div>
        <div class="col-auto">
            <a :href="route('customer.profile', this.item.reference)" target="_blank">
                <button type="button" class="btn btn-xs btn-primary fs-11">Open in new tab</button>
            </a>
        </div>
    </div>
</template>
<script>
     import componentHandler from '../../../general/mixins/componentHandler';
    export default {
        mixins: [componentHandler]
    }
</script>
