<div class="row g-4">
    
    <div class="col-md-4">
        <div class="tw-bg-white tw-border-0 tw-rounded-[1.5rem] tw-shadow-sm tw-p-6 md:tw-p-8 tw-sticky tw-top-28">
            <h5 class="tw-font-black tw-text-lg tw-text-gray-800 tw-mb-5 d-flex align-items-center">
                <div class="tw-w-10 tw-h-10 tw-bg-blue-50 tw-text-blue-600 tw-rounded-xl d-flex align-items-center justify-content-center tw-mr-3">
                    <i class="fa-solid fa-folder-plus"></i>
                </div>
                Yeni Kategori
            </h5>
            
            <form action="<?= BASE_URL ?>/admin/category_add" method="POST">
                <div class="mb-4">
                    <label class="tw-text-xs tw-font-extrabold tw-text-gray-400 tw-uppercase tw-tracking-widest tw-mb-2 tw-block tw-px-1">Kategori Adı</label>
                    <input type="text" name="name" class="form-control tw-bg-gray-50 tw-border-0 focus:tw-bg-white focus:tw-ring-2 focus:tw-ring-blue-100 tw-py-3.5 tw-rounded-xl tw-text-sm tw-font-medium tw-transition-all" placeholder="Örn: Müstakil Ev" required>
                </div>
                <button type="submit" class="btn tw-bg-blue-600 hover:tw-bg-blue-700 tw-text-white tw-w-full tw-py-3.5 tw-rounded-xl tw-font-bold tw-shadow-md tw-shadow-blue-500/20 tw-transition-all hover:tw--translate-y-0.5">
                    <i class="fa-solid fa-plus tw-mr-1"></i> Ekle
                </button>
            </form>
        </div>
    </div>

    <div class="col-md-8">
        <div class="tw-bg-white tw-border-0 tw-rounded-[1.5rem] tw-shadow-sm tw-overflow-hidden">
            
            <div class="tw-p-6 tw-border-b tw-border-gray-100 d-flex justify-content-between align-items-center">
                <h5 class="tw-font-black tw-text-lg tw-text-gray-800 tw-mb-0 d-flex align-items-center">
                    <i class="fa-solid fa-list tw-text-blue-500 tw-mr-3"></i>
                    Mevcut Kategoriler
                </h5>
                <span class="tw-bg-gray-100 tw-text-gray-600 tw-px-3 tw-py-1 tw-rounded-lg tw-text-xs tw-font-bold">
                    Toplam: <?php echo count($categories ?? []); ?>
                </span>
            </div>

            <div class="table-responsive tw-p-2">
                <table class="table tw-mb-0 align-middle tw-border-transparent">
                    <thead>
                        <tr>
                            <th class="tw-bg-transparent tw-text-gray-400 tw-text-xs tw-font-extrabold tw-uppercase tw-tracking-widest tw-py-4 tw-px-4 tw-border-b-2 tw-border-gray-100">Kategori Adı</th>
                            <th class="tw-bg-transparent tw-text-gray-400 tw-text-xs tw-font-extrabold tw-uppercase tw-tracking-widest tw-py-4 tw-px-4 tw-border-b-2 tw-border-gray-100">Slug (URL)</th>
                            <th class="tw-bg-transparent tw-text-gray-400 tw-text-xs tw-font-extrabold tw-uppercase tw-tracking-widest tw-py-4 tw-px-4 tw-border-b-2 tw-border-gray-100 text-end">İşlem</th>
                        </tr>
                    </thead>
                    <tbody class="tw-divide-y tw-divide-gray-50">
                        <?php if(!empty($categories)): ?>
                            <?php foreach($categories as $cat): ?>
                            <tr class="hover:tw-bg-gray-50/80 tw-transition-colors">
                                <td class="tw-py-4 tw-px-4 tw-font-bold tw-text-gray-800">
                                    <?= htmlspecialchars($cat->name) ?>
                                </td>
                                <td class="tw-py-4 tw-px-4">
                                    <span class="tw-bg-gray-100 tw-text-gray-500 tw-px-2.5 tw-py-1 tw-rounded-md tw-text-[11px] tw-font-medium tw-font-mono">
                                        <?= htmlspecialchars($cat->slug) ?>
                                    </span>
                                </td>
                                <td class="tw-py-4 tw-px-4 text-end">
                                    <a href="<?= BASE_URL ?>/admin/category_delete/<?= $cat->id ?>" 
                                       onclick="return confirm('Bu kategoriyi silmek istediğinize emin misiniz?')" 
                                       class="btn tw-bg-red-50 hover:tw-bg-red-500 tw-text-red-500 hover:tw-text-white tw-border-0 tw-rounded-lg tw-px-3 tw-py-1.5 tw-text-sm tw-font-bold tw-transition-colors" title="Sil">
                                        <i class="fa-solid fa-trash-can tw-mr-1"></i> Sil
                                    </a>
                                </td>
                            </tr>
                            <?php endforeach; ?>
                        <?php else: ?>
                            <tr>
                                <td colspan="3" class="text-center tw-py-10">
                                    <div class="tw-text-gray-400 tw-mb-2"><i class="fa-regular fa-folder-open tw-text-4xl"></i></div>
                                    <div class="tw-text-gray-500 tw-font-medium">Henüz hiçbir kategori eklenmemiş.</div>
                                </td>
                            </tr>
                        <?php endif; ?>
                    </tbody>
                </table>
            </div>

        </div>
    </div>
    
</div>