<%- include('../partials/header') %>

<div class="blog-page container py-4">
    <div class="category-header">
        <h1 data-i18n="<%= category.name %>"><%= category.name %></h1>
        <p data-i18n="<%= category.description %>"><%= category.description %></p>
    </div>

    <div class="row g-4">
        <div class="col-lg-8">
            <% if (!posts || posts.length === 0) { %>
                <div class="alert alert-warning text-center py-5">
                    <h3 data-i18n="blog.no.posts">هیچ پستی یافت نشد</h3>
                </div>
            <% } else { %>
                <div class="row g-4">
                    <% posts.forEach(post => { %>
                        <div class="col-md-6">
                            <div class="blog-card">
                                <% if (post.imageUrl) { %>
                                    <img src="<%= post.imageUrl %>" class="blog-card-img" alt="<%= post.title %>">
                                <% } %>
                                <div class="blog-card-content">
                                    <h2 class="blog-card-title">
                                        <a href="/blog/<%= post.slug %>"><%= post.title %></a>
                                    </h2>
                                    <div class="blog-card-meta">
                                        <span><i class="fas fa-calendar-alt"></i> <%= new Date(post.published_at).toLocaleDateString('fa-IR') %></span>
                                        <span><i class="fas fa-eye"></i> <%= post.views %> <span data-i18n="blog.views">بازدید</span></span>
                                    </div>
                                    <p class="blog-card-excerpt"><%= post.excerpt || post.content?.substring(0, 150) %>...</p>
                                    <a href="/blog/<%= post.slug %>" class="blog-card-btn" data-i18n="blog.read.more">ادامه مطلب</a>
                                </div>
                            </div>
                        </div>
                    <% }) %>
                </div>
            <% } %>
        </div>

        <div class="col-lg-4">
            <div class="blog-sidebar">
                <div class="sidebar-widget">
                    <h3 class="widget-title" data-i18n="blog.categories">دسته‌بندی‌ها</h3>
                    <ul>
                        <% categories.forEach(cat => { %>
                            <li><a href="/blog/category/<%= cat.slug %>"><%= cat.name %></a></li>
                        <% }) %>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

<%- include('../partials/footer') %>