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

<div class="fade-in">
    <div style="margin-bottom: 2rem;">
        <a href="/admin/pages" style="display: inline-flex; align-items: center; gap: 0.5rem; color: var(--text-muted); text-decoration: none; font-size: 0.9rem; margin-bottom: 0.75rem;">
            <i class="fas fa-arrow-left"></i> <?= \App\Helpers\Lang::t('back_to_pages') ?>
        </a>
        <h1 style="margin: 0; font-size: 1.75rem;"><i class="fas fa-edit" style="margin-right: 0.75rem; color: var(--primary);"></i><?= $title ?>: <?= htmlspecialchars($page['title']) ?></h1>
    </div>

    <form action="/admin/pages/update/<?= $page['id'] ?>" method="POST">
        <?= \App\Core\CSRF::field() ?>
        
        <div style="display: grid; grid-template-columns: 3fr 1fr; gap: 2rem;">
            <div style="display: flex; flex-direction: column; gap: 1.5rem;">
                <div class="card" style="padding: 2rem;">
                    <div class="form-group" style="margin-bottom: 1.5rem;">
                        <label style="display: block; margin-bottom: 0.5rem; font-weight: 600;"><?= \App\Helpers\Lang::t('page_title') ?></label>
                        <input type="text" name="title" id="page-title" class="form-control" value="<?= htmlspecialchars($page['title']) ?>" required style="padding: 0.75rem; font-size: 1.1rem;">
                    </div>

                    <div class="form-group" style="margin-bottom: 1.5rem;">
                        <label style="display: block; margin-bottom: 0.5rem; font-weight: 600;">Slug (URL)</label>
                        <div style="display: flex; align-items: center; background: var(--bg); border: 1px solid var(--border); border-radius: 0.75rem; padding-left: 1rem; overflow: hidden;">
                            <span style="color: var(--text-muted); font-size: 0.9rem; user-select: none;">/p/</span>
                            <input type="text" name="slug" id="page-slug" class="form-control" value="<?= htmlspecialchars($page['slug']) ?>" required style="border: none; padding: 0.75rem; background: transparent;">
                        </div>
                    </div>

                    <div class="form-group">
                        <label style="display: block; margin-bottom: 0.5rem; font-weight: 600;"><?= \App\Helpers\Lang::t('content') ?></label>
                        <textarea name="content" id="editor" class="form-control" rows="20" style="padding: 1rem; font-family: monospace; line-height: 1.6;"><?= htmlspecialchars($page['content']) ?></textarea>
                    </div>
                </div>
            </div>

            <div style="display: flex; flex-direction: column; gap: 1.5rem;">
                <div class="card" style="padding: 1.5rem;">
                    <h3 style="margin-top: 0; margin-bottom: 1.25rem; font-size: 1.1rem;"><?= \App\Helpers\Lang::t('publishing') ?></h3>
                    
                    <div class="form-group" style="margin-bottom: 1.5rem;">
                        <label style="display: flex; align-items: center; gap: 0.75rem; cursor: pointer;">
                            <input type="checkbox" name="is_active" value="1" <?= $page['is_active'] ? 'checked' : '' ?> style="width: 1.2rem; height: 1.2rem; accent-color: var(--primary);">
                            <span style="font-weight: 600;"><?= \App\Helpers\Lang::t('active') ?></span>
                        </label>
                    </div>

                    <button type="submit" class="btn btn-primary" style="width: 100%; padding: 0.8rem; font-weight: 700; margin-bottom: 1rem; display: flex; align-items: center; justify-content: center; gap: 0.5rem;">
                        <i class="fas fa-save"></i> <?= \App\Helpers\Lang::t('update_page') ?>
                    </button>
                    
                    <a href="/admin/pages" class="btn" style="width: 100%; background: var(--bg); border: 1px solid var(--border); display: block; text-align: center; padding: 0.8rem; box-sizing: border-box;">
                        <?= \App\Helpers\Lang::t('cancel') ?>
                    </a>
                </div>

                <div class="card" style="padding: 1.5rem;">
                    <h3 style="margin-top: 0; margin-bottom: 1rem; font-size: 1rem;">Stats</h3>
                    <div style="font-size: 0.85rem; color: var(--text-muted); display: flex; flex-direction: column; gap: 0.5rem;">
                        <div>Created: <?= $page['created_at'] ?></div>
                        <div>Last Updated: <?= $page['updated_at'] ?></div>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>

<script>
document.getElementById('page-title').addEventListener('input', function() {
    // Only update slug if user hasn't modified it manually or it was empty
    // (Optional logic, for now simple sync)
});
</script>
