<div class="card fade-in" style="max-width: 800px; margin: 0 auto; padding: 3rem;">
    <h1 style="margin-bottom: 2rem;"><?= \App\Helpers\Lang::t('edit_post') ?></h1>

    <form action="/post/update/<?= $post['id'] ?>" method="POST">
        <?= \App\Core\CSRF::field() ?>
        
        <div class="form-group" style="margin-bottom: 1.5rem;">
            <label style="display: block; margin-bottom: 0.5rem; font-weight: 600;"><?= \App\Helpers\Lang::t('title') ?></label>
            <input type="text" name="title" class="form-control" value="<?= htmlspecialchars($post['title']) ?>" required>
        </div>

        <div class="form-group" style="margin-bottom: 1.5rem;">
            <label style="display: block; margin-bottom: 0.5rem; font-weight: 600;"><?= \App\Helpers\Lang::t('category') ?></label>
            <select name="category_id" class="form-control" required>
                <?php foreach ($categories as $cat): ?>
                    <option value="<?= $cat['id'] ?>" <?= ($cat['id'] == $post['category_id']) ? 'selected' : '' ?>>
                        <?= htmlspecialchars($cat['name']) ?>
                    </option>
                <?php endforeach; ?>
            </select>
        </div>

        <div class="form-group" style="margin-bottom: 2rem;">
            <label style="display: block; margin-bottom: 0.5rem; font-weight: 600; display: flex; justify-content: space-between; align-items: center;">
                <?= \App\Helpers\Lang::t('content') ?>
                <span style="font-size: 0.8rem; font-weight: 400; color: var(--text-muted);">Markdown Supported</span>
            </label>
            
            <div class="editor-dual-pane" style="display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; border: 1px solid var(--border); border-radius: 1rem; overflow: hidden; background: var(--bg);">
                <textarea name="content" id="post-editor" class="form-control" rows="15" required style="border: none; border-radius: 0; background: transparent; padding: 1.25rem; resize: vertical; border-right: 1px solid var(--border);"><?= htmlspecialchars($post['content']) ?></textarea>
                
                <div id="markdown-preview" class="markdown-body" style="padding: 1.25rem; overflow-y: auto; max-height: 480px; min-height: 480px;">
                </div>
            </div>
        </div>

        <div style="display: flex; gap: 1rem; justify-content: flex-end;">
            <a href="/post/<?= $post['slug'] ?>" class="btn" style="background: var(--bg); border: 1px solid var(--border);"><?= \App\Helpers\Lang::t('cancel') ?></a>
            <button type="submit" class="btn btn-primary"><?= \App\Helpers\Lang::t('save_changes') ?></button>
        </div>
    </form>
</div>
<script>
    const editor = document.getElementById('post-editor');
    const preview = document.getElementById('markdown-preview');

    const updatePreview = () => {
        const val = editor.value;
        if (val.trim()) {
            preview.innerHTML = marked.parse(val);
        } else {
            preview.innerHTML = '';
        }
    };

    if (editor && preview) {
        editor.addEventListener('input', updatePreview);
        updatePreview(); // Initial load
    }
</script>
