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}}</span>
        </a>
        <p>
            <a :href="getTaskUrl(item)" @click="$emit('close-search')">
                <span class="text-warning">{{item.id}}</span>
                <span v-if="item.seraph_id" class="text-success">(Seraph ID: {{item.seraph_id}})</span>
                <span class="text-info">{{item.title}}</span>
            </a>
        </p>
    </div>
</div>
`;

export default {
    props: ['title', 'data'],
    emits: ['close-search'],
    data: function () {
        return {};
    },
    components: {},
    methods: {
        getTaskUrl(item) {
            // Map the task type to the correct URL format
            const taskTypeMap = {
                'repairs': '/tasks/repairs/',
                'support': '/tasks/support/',
                'onsite': '/tasks/onsite/',
                'sale_leads': '/tasks/sale-lead/'
            };

            const taskType = this.title.toLowerCase().replace(' ', '_');
            return (taskTypeMap[taskType] || '/tasks/') + item.id;
        }
    },
    template
};
