<%- include('partials/layout_start', { activePage: 'blogs', pageTitle: 'Manage Blogs' }) %>

<div class="admin-section">
    <form action="/admin/blog/add" method="POST" enctype="multipart/form-data" style="margin-bottom: 30px; background: #1e293b; padding: 20px; border-radius: 8px; border: 1px solid #334155; max-width: 800px;">
        <h4 style="margin-top: 0; margin-bottom: 15px;">Add New Blog Post</h4>
        <div class="form-group" style="margin-bottom: 15px;">
            <label style="display: block; margin-bottom: 5px; font-weight: bold;">Title (English)</label>
            <input type="text" name="title_en" placeholder="e.g. A journey through Madagascar" required style="width: 100%; padding: 10px; border: 1px solid #475569; background: #0f172a; color: #f1f5f9; border-radius: 4px;">
        </div>
        <div class="form-group" style="margin-bottom: 15px;">
            <label style="display: block; margin-bottom: 5px; font-weight: bold;">Title (Bengali)</label>
            <input type="text" name="title_bn" placeholder="e.g. মাদাগাস্কারের মধ্য দিয়ে একটি যাত্রা" required style="width: 100%; padding: 10px; border: 1px solid #475569; background: #0f172a; color: #f1f5f9; border-radius: 4px;">
        </div>
        <div class="form-group" style="margin-bottom: 15px;">
            <label style="display: block; margin-bottom: 5px; font-weight: bold;">Content (English)</label>
            <textarea name="content_en" rows="5" required style="width: 100%; padding: 10px; border: 1px solid #475569; background: #0f172a; color: #f1f5f9; border-radius: 4px;"></textarea>
        </div>
        <div class="form-group" style="margin-bottom: 15px;">
            <label style="display: block; margin-bottom: 5px; font-weight: bold;">Content (Bengali)</label>
            <textarea name="content_bn" rows="5" required style="width: 100%; padding: 10px; border: 1px solid #475569; background: #0f172a; color: #f1f5f9; border-radius: 4px;"></textarea>
        </div>
        <div class="form-group" style="margin-bottom: 15px;">
            <label style="display: block; margin-bottom: 5px; font-weight: bold;">Feature Image</label>
            <input type="file" name="image" accept="image/*" required>
        </div>
        <button type="submit" class="btn-primary" style="padding: 10px 20px; background-color: #f59e0b; color: #1e293b; border: none; font-weight: bold; cursor: pointer; border-radius: 4px;">Add Blog Post</button>
    </form>
    
    <div class="grid-2">
        <% blogs.forEach(blog => { %>
            <div style="background: #1e293b; border: 1px solid #334155; border-radius: 8px; overflow: hidden; display: flex; flex-direction: column;">
                <div style="background-color: #0f172a; text-align: center;">
                    <img src="<%= blog.image_url %>" style="width: 100%; height: 200px; object-fit: cover;">
                </div>
                <div style="padding: 15px; display: flex; flex-direction: column; flex-grow: 1;">
                    <div style="font-weight: bold; font-size: 1.1rem; margin-bottom: 5px;"><%= blog.title_en %></div>
                    <div style="color: #64748b; font-size: 0.9rem; margin-bottom: 15px;"><%= blog.created_at %></div>
                    <form action="/admin/blog/delete/<%= blog.id %>" method="POST" style="margin: auto 0 0 0; text-align: right;">
                        <button type="submit" style="color:white; background: #ef4444; border:none; padding: 8px 12px; border-radius: 4px; cursor:pointer;"><i class="fas fa-trash-alt"></i> Delete</button>
                    </form>
                </div>
            </div>
        <% }) %>
    </div>
</div>

<%- include('partials/layout_end') %>
