<?= $this->extend('admin/layout'); ?>
<?= $this->section('content'); ?>
<div class="card">
    <div class="card-header border-0 pt-6">
        <div class="card-title">
            <h3 class="fw-bold m-0"><?= esc($title); ?></h3>
        </div>
        <div class="card-toolbar">
            <div class="d-flex justify-content-end">
                <a href="<?= adminUrl('web-stories/add'); ?>" class="btn btn-primary">
                    <i class="ki-duotone ki-plus fs-2"><span class="path1"></span><span class="path2"></span></i>
                    <?= trans("add_story") ?? 'Add Web Story'; ?>
                </a>
            </div>
        </div>
    </div>
    <div class="card-body pt-5">
        <div class="table-responsive">
            <table class="table align-middle table-row-dashed fs-6 gy-5" id="tableWebStories">
                <thead>
                    <tr class="text-start text-muted fw-bold fs-7 text-uppercase gs-0">
                        <th class="w-60px">ID</th>
                        <th class="min-w-200px">Title / Cover</th>
                        <th>Language</th>
                        <th>Category</th>
                        <th>Author</th>
                        <th>Pageviews</th>
                        <th>Status</th>
                        <th>Date</th>
                        <th class="text-end min-w-100px">Options</th>
                    </tr>
                </thead>
                <tbody class="text-gray-600 fw-semibold">
                    <?php if (!empty($stories)): ?>
                        <?php foreach ($stories as $item): ?>
                            <tr>
                                <td><?= esc($item->id); ?></td>
                                <td class="d-flex align-items-center">
                                    <div class="symbol symbol-60px me-3">
                                        <img src="<?= strpos($item->cover_image, 'http') === 0 ? esc($item->cover_image) : base_url(esc($item->cover_image)); ?>" class="object-fit-cover" alt="" onerror="this.src='<?= base_url('assets/media/no-image.jpg'); ?>'">
                                    </div>
                                    <div class="d-flex flex-column">
                                        <a href="<?= langBaseUrl('web-stories/' . $item->slug); ?>" target="_blank" class="text-gray-800 text-hover-primary mb-1 fw-bold">
                                            <?= esc(character_limiter($item->title, 50)); ?>
                                        </a>
                                    </div>
                                </td>
                                <td><?= esc($item->language_name ?? 'Default'); ?></td>
                                <td><?= esc($item->category_name ?? 'Uncategorized'); ?></td>
                                <td><?= esc($item->author_name ?? 'Admin'); ?></td>
                                <td><span class="badge badge-light-info fw-bold"><?= esc($item->pageviews); ?> Views</span></td>
                                <td><?= (int)$item->status === 1 ? '<span class="badge badge-light-success">Active</span>' : '<span class="badge badge-light-danger">Draft</span>'; ?></td>
                                <td><?= date('M d, Y', strtotime($item->created_at)); ?></td>
                                <td class="text-end">
                                    <a href="#" class="btn btn-light btn-active-light-primary btn-sm" data-kt-menu-trigger="click" data-kt-menu-placement="bottom-end">
                                        Options <i class="ki-duotone ki-down fs-5 ms-2"></i>
                                    </a>
                                    <div class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-600 menu-state-bg-light-primary fw-semibold fs-7 py-4 w-150px" data-kt-menu="true">
                                        <div class="menu-item px-3">
                                            <a href="<?= adminUrl('web-stories/edit/' . esc($item->id)); ?>" class="menu-link px-3">Edit</a>
                                        </div>
                                        <div class="menu-item px-3">
                                            <a href="javascript:void(0)" class="menu-link px-3 js-action-trigger text-danger"
                                                data-url="<?= adminUrl('web-stories/delete'); ?>"
                                                data-action="delete"
                                                data-id="<?= $item->id; ?>"
                                                data-message="Are you sure you want to delete this story?"
                                                data-confirm="1">Delete</a>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                        <?php endforeach; ?>
                    <?php else: ?>
                        <tr><td colspan="9" class="text-center text-muted">No records found.</td></tr>
                    <?php endif; ?>
                </tbody>
            </table>
        </div>
        <?php if (isset($pager) && $pager->getPageCount() > 1): ?>
            <div class="d-flex justify-content-end mt-4">
                <?= $pager->links(); ?>
            </div>
        <?php endif; ?>
    </div>
</div>
<?= $this->endSection(); ?>