const template = html`
<div class="search-group-content">
    <h4>{{title}}</h4>
    <small v-if="!data || data.length === 0">No results found</small>
    <div class="search-result" v-for="item in data" :key="item.id" v-if="data && data.length > 0">
        <a :href="'/clients#/'+item.client_type+'/'+item.client_id" @click="$emit('close-search')">
            <span class="muted">{{item.client?.name || 'Unknown Client'}}</span>
        </a>
        <p>
            <a :href="'/invoices#/'+item.type+'s/view/'+item.id" @click="$emit('close-search')">
                Invoice <span class="text-warning">#{{item.invoice_number || item.id}}</span>
            </a>
        </p>
    </div>
</div>
`;

export default {
    props: ['title', 'data'],
    emits: ['close-search'],
    data: function () {
        return {};
    },
    components: {},
    methods: {},
    template
};
