<?php
$title = \App\Helpers\Lang::t('static_pages');
?>

<div class="fade-in">
    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem;">
        <div>
            <h1 style="margin: 0; font-size: 1.75rem;"><i class="fas fa-file-alt" style="margin-right: 0.75rem; color: var(--primary);"></i><?= $title ?></h1>
            <p style="color: var(--text-muted); margin-top: 0.5rem;"><?= \App\Helpers\Lang::t('manage_footer_pages') ?></p>
        </div>
        <a href="/admin/pages/create" class="btn btn-primary" style="display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.5rem;">
            <i class="fas fa-plus"></i> <?= \App\Helpers\Lang::t('create_new_page') ?>
        </a>
    </div>

    <div class="card" style="padding: 0; overflow: hidden;">
        <table style="width: 100%; border-collapse: collapse; text-align: left;">
            <thead style="background: var(--bg); border-bottom: 1px solid var(--border);">
                <tr>
                    <th style="padding: 1.25rem 2rem; font-weight: 600; color: var(--text-muted);"><?= \App\Helpers\Lang::t('title') ?></th>
                    <th style="padding: 1.25rem 2rem; font-weight: 600; color: var(--text-muted);">Slug</th>
                    <th style="padding: 1.25rem 2rem; font-weight: 600; color: var(--text-muted);"><?= \App\Helpers\Lang::t('status') ?></th>
                    <th style="padding: 1.25rem 2rem; font-weight: 600; color: var(--text-muted); text-align: right;"><?= \App\Helpers\Lang::t('actions') ?></th>
                </tr>
            </thead>
            <tbody>
                <?php if (empty($pages)): ?>
                    <tr>
                        <td colspan="4" style="padding: 3rem; text-align: center; color: var(--text-muted);">
                            <i class="fas fa-ghost" style="font-size: 2rem; display: block; margin-bottom: 1rem; opacity: 0.5;"></i>
                            <?= \App\Helpers\Lang::t('no_pages_found') ?>
                        </td>
                    </tr>
                <?php else: ?>
                    <?php foreach ($pages as $page): ?>
                        <tr style="border-bottom: 1px solid var(--border); transition: var(--transition);" class="table-row-hover">
                            <td style="padding: 1.25rem 2rem;">
                                <div style="font-weight: 600;"><?= htmlspecialchars($page['title']) ?></div>
                            </td>
                            <td style="padding: 1.25rem 2rem;">
                                <code style="background: var(--bg); padding: 0.2rem 0.5rem; border-radius: 4px; font-size: 0.85rem;">/p/<?= htmlspecialchars($page['slug']) ?></code>
                            </td>
                            <td style="padding: 1.25rem 2rem;">
                                <?php if ($page['is_active']): ?>
                                    <span style="display: inline-flex; align-items: center; gap: 0.4rem; background: rgba(34, 197, 94, 0.1); color: #22c55e; padding: 0.25rem 0.75rem; border-radius: 2rem; font-size: 0.75rem; font-weight: 700;">
                                        <div style="width: 6px; height: 6px; border-radius: 50%; background: #22c55e;"></div> <?= \App\Helpers\Lang::t('active') ?>
                                    </span>
                                <?php else: ?>
                                    <span style="display: inline-flex; align-items: center; gap: 0.4rem; background: var(--bg); color: var(--text-muted); padding: 0.25rem 0.75rem; border-radius: 2rem; font-size: 0.75rem; font-weight: 700;">
                                        <div style="width: 6px; height: 6px; border-radius: 50%; background: var(--text-muted);"></div> <?= \App\Helpers\Lang::t('hidden') ?>
                                    </span>
                                <?php endif; ?>
                            </td>
                            <td style="padding: 1.25rem 2rem; text-align: right;">
                                <div style="display: flex; gap: 0.5rem; justify-content: flex-end;">
                                    <a href="/p/<?= $page['slug'] ?>" target="_blank" class="btn btn-sm" style="background: var(--bg); padding: 0.5rem;" title="View">
                                        <i class="fas fa-external-link-alt"></i>
                                    </a>
                                    <a href="/admin/pages/edit/<?= $page['id'] ?>" class="btn btn-sm" style="background: var(--primary); color: white; padding: 0.5rem;" title="Edit">
                                        <i class="fas fa-edit"></i>
                                    </a>
                                    <form action="/admin/pages/delete/<?= $page['id'] ?>" method="POST" onsubmit="return confirm('<?= \App\Helpers\Lang::t('confirm_delete_page') ?>')" style="display: inline;">
                                        <?= \App\Core\CSRF::field() ?>
                                        <button type="submit" class="btn btn-sm" style="background: var(--danger); color: white; padding: 0.5rem;" title="Delete">
                                            <i class="fas fa-trash"></i>
                                        </button>
                                    </form>
                                </div>
                            </td>
                        </tr>
                    <?php endforeach; ?>
                <?php endif; ?>
            </tbody>
        </table>
    </div>
</div>

<style>
.table-row-hover:hover {
    background: var(--bg-hover) !important;
}
</style>
