{% extends 'base.html.twig' %}

{% block title %}Blog Management — Admin{% endblock %}

{% block stylesheets %}
{{ parent() }}
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
:root {
    --adm-primary: #6366f1;
    --adm-primary-light: #818cf8;
    --adm-success: #10b981;
    --adm-warning: #f59e0b;
    --adm-danger: #ef4444;
    --adm-bg: #f1f5f9;
    --adm-card: #ffffff;
    --adm-text: #1e293b;
    --adm-text-muted: #64748b;
    --adm-border: #e2e8f0;
}
body { font-family: 'Inter', sans-serif; background: var(--adm-bg); }

.blog-admin-wrap {
    max-width: 1200px;
    margin: 30px auto;
    padding: 0 20px;
}

.blog-admin-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
}

.blog-admin-header h1 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--adm-text);
    margin: 0;
}

.btn-add-post {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: var(--adm-primary);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s;
}
.btn-add-post:hover { background: #4f46e5; color: #fff; text-decoration: none; }

.blog-table-card {
    background: var(--adm-card);
    border-radius: 12px;
    border: 1px solid var(--adm-border);
    overflow: hidden;
}

.blog-table {
    width: 100%;
    border-collapse: collapse;
}

.blog-table th {
    text-align: left;
    padding: 12px 16px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--adm-text-muted);
    border-bottom: 2px solid var(--adm-border);
    background: #f8fafc;
}

.blog-table td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--adm-border);
    font-size: 0.875rem;
    color: var(--adm-text);
    vertical-align: middle;
}

.blog-table tr:last-child td { border-bottom: none; }
.blog-table tr:hover td { background: #f8fafc; }

.post-title-cell {
    max-width: 300px;
}
.post-title-cell .title-ar { font-weight: 600; direction: rtl; display: block; }
.post-title-cell .title-en { font-size: 0.8rem; color: var(--adm-text-muted); display: block; }

.badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 600;
}
.badge-published { background: #d1fae5; color: #065f46; }
.badge-draft { background: #fee2e2; color: #991b1b; }
.badge-lang { background: #e0e7ff; color: #3730a3; margin-right: 4px; }

.cover-thumb {
    width: 48px;
    height: 48px;
    border-radius: 6px;
    object-fit: cover;
    border: 1px solid var(--adm-border);
}

.cover-placeholder {
    width: 48px;
    height: 48px;
    border-radius: 6px;
    background: #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    font-size: 1.2rem;
    border: 1px solid var(--adm-border);
}

.actions-cell { white-space: nowrap; }
.actions-cell a, .actions-cell button {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 10px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 500;
    text-decoration: none;
    border: 1px solid var(--adm-border);
    background: #fff;
    color: var(--adm-text);
    cursor: pointer;
    transition: all 0.15s;
    margin-right: 4px;
}
.actions-cell a:hover { border-color: var(--adm-primary); color: var(--adm-primary); }
.actions-cell .btn-delete { color: var(--adm-danger); }
.actions-cell .btn-delete:hover { border-color: var(--adm-danger); background: #fef2f2; }
.actions-cell .btn-view { color: var(--adm-success); }
.actions-cell .btn-view:hover { border-color: var(--adm-success); }

.empty-state {
    text-align: center;
    padding: 60px 20px;
    color: var(--adm-text-muted);
}
.empty-state i { font-size: 3rem; margin-bottom: 12px; display: block; }

.flash-msg {
    padding: 12px 20px;
    margin-bottom: 16px;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 500;
}
.flash-msg.success { background: #d1fae5; color: #065f46; border: 1px solid #a7f3d0; }

.back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--adm-text-muted);
    text-decoration: none;
    font-size: 0.85rem;
    margin-bottom: 16px;
}
.back-link:hover { color: var(--adm-primary); }
</style>
{% endblock %}

{% block body %}
<div class="blog-admin-wrap">
    <a href="{{ path('admin_playground_dashboard') }}" class="back-link">
        <i class="fa fa-arrow-left"></i> Back to Dashboard
    </a>

    {% for message in app.flashes('success') %}
        <div class="flash-msg success">{{ message }}</div>
    {% endfor %}

    <div class="blog-admin-header">
        <h1><i class="fa fa-newspaper-o"></i> Blog Posts</h1>
        <a href="{{ path('admin_blog_new') }}" class="btn-add-post">
            <i class="fa fa-plus"></i> New Post
        </a>
    </div>

    <div class="blog-table-card">
        {% if posts|length > 0 %}
        <table class="blog-table">
            <thead>
                <tr>
                    <th>Cover</th>
                    <th>Title</th>
                    <th>Author</th>
                    <th>Languages</th>
                    <th>Status</th>
                    <th>Published</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                {% for post in posts %}
                <tr>
                    <td>
                        {% if post.coverImage %}
                            <img src="{{ post.coverImageUrl }}" alt="" class="cover-thumb">
                        {% else %}
                            <div class="cover-placeholder"><i class="fa fa-image"></i></div>
                        {% endif %}
                    </td>
                    <td class="post-title-cell">
                        {% if post.titleAr %}
                            <span class="title-ar">{{ post.titleAr }}</span>
                        {% endif %}
                        {% if post.titleEn %}
                            <span class="title-en">{{ post.titleEn }}</span>
                        {% endif %}
                    </td>
                    <td>{{ post.authorName }}</td>
                    <td>
                        {% if post.hasArabic() %}<span class="badge badge-lang">AR</span>{% endif %}
                        {% if post.hasEnglish() %}<span class="badge badge-lang">EN</span>{% endif %}
                    </td>
                    <td>
                        {% if post.isPublished() %}
                            <span class="badge badge-published">Published</span>
                        {% else %}
                            <span class="badge badge-draft">Draft</span>
                        {% endif %}
                    </td>
                    <td>{{ post.publishedAt|date('Y-m-d') }}</td>
                    <td class="actions-cell">
                        <a href="{{ path('admin_blog_edit', {id: post.id}) }}"><i class="fa fa-pencil"></i> Edit</a>
                        {% if post.isPublished() %}
                            <a href="{{ path('app_blog_show', {slug: post.slug}) }}" target="_blank" class="btn-view"><i class="fa fa-external-link"></i> View</a>
                        {% endif %}
                        <form method="post" action="{{ path('admin_blog_delete', {id: post.id}) }}" style="display:inline" onsubmit="return confirm('Delete this post?');">
                            <button type="submit" class="btn-delete"><i class="fa fa-trash"></i> Delete</button>
                        </form>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
        {% else %}
            <div class="empty-state">
                <i class="fa fa-newspaper-o"></i>
                <p>No blog posts yet. Create your first post!</p>
            </div>
        {% endif %}
    </div>
</div>
{% endblock %}