<template>
        <div class="row">
            <div class="col">
                <div class="row align-items-center m-b-15 parentContainer position-relative">
                    <div class="col-auto">
                        <div class="row">
                            <div class="col-auto p-r-10 all-caps">
                                <div class="font-heading all-caps bold">{{item.owner.marking}}</div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col">
                                <div class="font-heading all-caps muted fs-11">{{item.owner.created_at}}</div>
                            </div>
                        </div>
                    </div>
                    <div class="col-2">
                        <div class="font-heading fs-10 muted all-caps">Marking</div>
                        <div class="font-heading">
                            <a :href="route('customer.profile', item.owner.company.reference)">{{this.item.owner.company.reference}}</a>
                        </div>
                    </div>
                    <div class="col-auto">
                        <div class="font-heading fs-10 muted all-caps">Document Type</div>
                        <div class="font-heading">
                            <span v-if="item.document_type === 'INVOICE'">Invoice</span>
                            <span v-if="item.document_type === 'PURCHASE_ORDER'">Purchase Order</span>
                            <span v-if="item.document_type === 'DELIVER_ORDER'">Delivery Order</span>
                            <span v-if="item.document_type === 'SUPPLIER_DELIVER_ORDER'">Supplier Delivery Order</span>
                        </div>
                    </div>
                    <div class="col-auto d-none d-lg-block">
                        <div class="font-heading fs-10 muted all-caps">Currency</div>
                        <div class="font-heading bold">
                            <span class="flag-icon" :class="'flag-icon-'+item.owner.convertible_currency.country.short_code.toLowerCase()"></span> {{item.owner.convertible_currency.short_code}}
                        </div>
                    </div>
                    <div class="col">
                        <div class="font-heading fs-10 muted all-caps">Payable Amount</div>
                        <div class="font-heading text-success bold">{{item.owner.amount}} {{item.owner.fixed_currency.short_code}}</div>
                    </div>
                    <div class="col">
                        <div class="row">
                            <div class="col-auto">
                                <document-file-viewer-component :file="item.files[0]">
                                    <template slot="button">
                                        <button class="btn btn-success w-100">Download</button>
                                    </template>
                                </document-file-viewer-component>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
</template>

<script>
    import componentHandler from '../../../general/mixins/componentHandler';
    export default {
        data(){
            return {

            }
        },
        mixins: [componentHandler]
    }
</script>