<div class="space-y-6">
    <div class="rounded-2xl border border-border bg-card p-6 shadow-sm">
        <div class="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
            <div>
                <h2 class="text-2xl font-semibold text-foreground"><?= lang('knowledgebase') ?></h2>
                <p class="text-sm text-muted-foreground"><?= lang('how_can_we_help') ?></p>
            </div>
        </div>
        <div class="mt-4">
            <?php $this->load->view("admin/kb/search_box"); ?>
        </div>
    </div>

    <?php if (!empty($all_kb_category)) { ?>
        <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6">
            <?php foreach ($all_kb_category as $kb_category) {
                $total_kb = count(array($this->db->where(array('kb_category_id' => $kb_category->kb_category_id, 'status' => 1))->get('tbl_knowledgebase')->result()));
                ?>
                <a href="<?= base_url('admin/knowledgebase/details/kb_category/' . $kb_category->kb_category_id) ?>" class="block rounded-2xl border border-border bg-card p-5 shadow-sm transition hover:-translate-y-0.5 hover:shadow-md">
                    <div class="flex items-start justify-between gap-3">
                        <div>
                            <h3 class="text-lg font-semibold text-foreground"><?= $kb_category->category ?></h3>
                            <p class="mt-1 text-sm text-muted-foreground"><?= $kb_category->description ?></p>
                        </div>
                        <span class="inline-flex items-center gap-1 rounded-full border border-border bg-muted px-2 py-1 text-xs font-semibold text-foreground">
                            <?= !empty($total_kb) ? $total_kb : lang('no') ?>
                            <span class="text-muted-foreground"><?= lang('articles') ?></span>
                        </span>
                    </div>
                </a>
            <?php } ?>
        </div>
    <?php } else { ?>
        <div class="rounded-2xl border border-border bg-card p-6 text-sm text-muted-foreground">
            <?= lang('nothing_to_display') ?>
        </div>
    <?php } ?>
</div>
