{% extends "page.html" %}
{% block page_content %}
<div class="card">
    <div class="card-header"><h2>Управление блогом</h2>
        <button class="btn btn-primary btn-sm" onclick="document.getElementById('modal-blog').classList.add('open')">+ Новая запись</button>
    </div>
    <div class="table-wrap"><table><thead><tr><th>Название</th><th>Категория</th><th>Автор</th><th>Статус</th><th>Дата</th><th class="actions"></th></tr></thead>
        <tbody>{% for p, author in posts %}<tr>
            <td>{{ p.title }}</td><td><span class="badge badge-{{ p.category }}">{{ p.category }}</span></td><td>{{ author }}</td>
            <td><span class="badge badge-{{ p.status }}">{{ {'draft':'Черновик','published':'Опубликован','archived':'Архив'}[p.status] }}</span></td>
            <td><small>{{ p.created_at.strftime('%d.%m.%Y') if p.created_at else '' }}</small></td>
            <td class="actions">
                <button class="btn btn-secondary btn-sm" onclick="editBlog({{ p.id }},'{{ p.title|e }}','{{ p.slug|e }}','{{ p.category|e }}','{{ p.status }}','{{ p.excerpt|e }}','{{ p.content|e }}')">✎</button>
                <form method="post" action="/service/blog/delete" style="display:inline" onsubmit="return confirm('Удалить запись?')"><input type="hidden" name="id" value="{{ p.id }}"><button class="btn btn-danger btn-sm">✕</button></form>
            </td>
        </tr>{% endfor %}</tbody></table>
    </div>
</div>
<div class="modal-overlay" id="modal-blog"><div class="modal">
    <button type="button" class="modal-close" onclick="this.closest('.modal-overlay').classList.remove('open')">✕</button>
    <h2 id="modal-blog-title">Новая запись</h2>
    <form method="post" id="modal-blog-form">
        <input type="hidden" name="id" id="blog-id">
        <div class="form-group"><label>Название</label><input type="text" name="title" id="blog-title" required></div>
        <div class="form-row">
            <div class="form-group"><label>Slug</label><input type="text" name="slug" id="blog-slug"></div>
            <div class="form-group"><label>Категория</label><select name="category" id="blog-category"><option value="">—</option><option value="news">Новости</option><option value="tech">Технологии</option><option value="case">Кейсы</option></select></div>
        </div>
        <div class="form-group"><label>Краткое описание</label><textarea name="excerpt" id="blog-excerpt"></textarea></div>
        <div class="form-group"><label>Содержание (HTML)</label><textarea name="content" id="blog-content" rows="10"></textarea></div>
        <div class="form-group"><label>Статус</label><select name="status" id="blog-status"><option value="draft">Черновик</option><option value="published">Опубликовать</option></select></div>
        <div class="form-actions"><button type="submit" class="btn btn-primary">Сохранить</button>
        <button type="button" class="btn btn-secondary" onclick="this.closest('.modal-overlay').classList.remove('open')">Отмена</button></div>
    </form>
</div></div>
<script>
function editBlog(id,title,slug,category,status,excerpt,content){
    document.getElementById('modal-blog').classList.add('open');
    document.getElementById('modal-blog-title').textContent = 'Редактировать запись';
    document.getElementById('modal-blog-form').action = '/service/blog/edit';
    document.getElementById('blog-id').value = id;
    document.getElementById('blog-title').value = title;
    document.getElementById('blog-slug').value = slug;
    document.getElementById('blog-category').value = category;
    document.getElementById('blog-status').value = status;
    document.getElementById('blog-excerpt').value = excerpt;
    document.getElementById('blog-content').value = content;
}
</script>
{% endblock %}