<div class="container">
    <div class="d-flex justify-content-between align-items-center mt-4 mb-4">
        <div>
            <h1 class="h3 mb-0" style="color: var(--primary-dark);">
                <%= title %>
            </h1>
            <p class="text-muted mb-0">Manage blog posts and articles</p>
        </div>
        <div class="d-flex gap-2">
            <% if (typeof frontendUrl !=='undefined' ) { %>
                <a href="<%= frontendUrl %>/blog" class="btn btn-outline-primary" target="_blank">
                    <i class="fas fa-external-link-alt me-2"></i>View Blog Page
                </a>
                <% } %>
                    <a href="/admin/blog/create" class="btn btn-primary">
                        <i class="fas fa-plus me-2"></i>Create New Post
                    </a>
        </div>
    </div>

    <!-- Filters -->
    <div class="card border-0 shadow-sm mb-4">
        <div class="card-body">
            <form method="GET" action="/admin/blog" class="row g-3">
                <div class="col-md-3">
                    <label class="form-label">Search</label>
                    <input type="text" class="form-control" name="search" value="<%= query.search || '' %>"
                        placeholder="Search title or excerpt...">
                </div>
                <div class="col-md-2">
                    <label class="form-label">Status</label>
                    <select class="form-select" name="status">
                        <option value="">All</option>
                        <option value="published" <%=query.status==='published' ? 'selected' : '' %>>Published</option>
                        <option value="draft" <%=query.status==='draft' ? 'selected' : '' %>>Draft</option>
                    </select>
                </div>
                <div class="col-md-3">
                    <label class="form-label">Category</label>
                    <select class="form-select" name="category">
                        <option value="">All Categories</option>
                        <% categories.forEach(cat=> { %>
                            <option value="<%= cat.name %>" <%=query.category===cat.name ? 'selected' : '' %>>
                                <%= cat.name %>
                            </option>
                            <% }); %>
                    </select>
                </div>
                <div class="col-md-2">
                    <label class="form-label">&nbsp;</label>
                    <button type="submit" class="btn btn-primary w-100">
                        <i class="fas fa-search me-1"></i>Filter
                    </button>
                </div>
                <div class="col-md-2">
                    <label class="form-label">&nbsp;</label>
                    <a href="/admin/blog" class="btn btn-outline-secondary w-100">
                        <i class="fas fa-times me-1"></i>Clear
                    </a>
                </div>
            </form>
        </div>
    </div>

    <!-- Blog List -->
    <div class="card border-0 shadow-sm">
        <div class="card-body p-4">
            <% if (blogs && blogs.length> 0) { %>
                <div class="table-responsive">
                    <table class="table table-hover align-middle">
                        <thead>
                            <tr>
                                <th scope="col" style="width: 60px">Image</th>
                                <th scope="col">Title</th>
                                <th scope="col">Category</th>
                                <th scope="col">Status</th>
                                <th scope="col">Author</th>
                                <th scope="col">Published</th>
                                <th scope="col" style="width: 200px">Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            <% blogs.forEach((blog, index)=> { %>
                                <tr>
                                    <td>
                                        <% if (blog.featuredImage) { %>
                                            <img src="<%= blog.featuredImage.startsWith('http') ? blog.featuredImage : (typeof frontendUrl !== 'undefined' ? frontendUrl : '') + blog.featuredImage %>"
                                                alt="<%= blog.title %>" class="img-thumbnail"
                                                style="width: 50px; height: 50px; object-fit: cover;">
                                            <% } else { %>
                                                <div class="bg-light d-flex align-items-center justify-content-center"
                                                    style="width: 50px; height: 50px;">
                                                    <i class="fas fa-image text-muted"></i>
                                                </div>
                                                <% } %>
                                    </td>
                                    <td>
                                        <div>
                                            <span class="fw-medium">
                                                <%= blog.title %>
                                            </span>
                                            <% if (blog.isFeatured) { %>
                                                <span class="badge bg-warning text-dark ms-2">Featured</span>
                                                <% } %>
                                        </div>
                                        <small class="text-muted">
                                            <%= blog.excerpt.substring(0, 60) %>...
                                        </small>
                                    </td>
                                    <td>
                                        <% if (blog.category && blog.category.length> 0) { %>
                                            <% blog.category.slice(0, 2).forEach(cat=> { %>
                                                <span class="badge bg-secondary me-1">
                                                    <%= cat %>
                                                </span>
                                                <% }); %>
                                                    <% if (blog.category.length> 2) { %>
                                                        <span class="text-muted">+<%= blog.category.length - 2 %></span>
                                                        <% } %>
                                                            <% } else { %>
                                                                <span class="text-muted">-</span>
                                                                <% } %>
                                    </td>
                                    <td>
                                        <% if (blog.status==='published' ) { %>
                                            <span class="badge bg-success">Published</span>
                                            <% } else { %>
                                                <span class="badge bg-secondary">Draft</span>
                                                <% } %>
                                    </td>
                                    <td>
                                        <%= blog.author || 'Admin' %>
                                    </td>
                                    <td>
                                        <%= blog.publishedAt || '-' %>
                                    </td>
                                    <td>
                                        <div class="btn-group" role="group">
                                            <% if (typeof frontendUrl !=='undefined' ) { %>
                                                <a href="<%= frontendUrl %>/blog/<%= blog.slug %>" target="_blank"
                                                    class="btn btn-sm btn-outline-secondary">
                                                    <i class="fas fa-external-link-alt me-1"></i>View
                                                </a>
                                                <% } %>
                                                    <a href="/admin/blog/<%= blog._id %>/edit"
                                                        class="btn btn-sm btn-outline-primary">
                                                        <i class="fas fa-edit me-1"></i>Edit
                                                    </a>
                                                    <button type="button" class="btn btn-sm btn-outline-danger"
                                                        data-custom-modal="open" data-id="<%= blog._id %>"
                                                        data-title="<%= blog.title %>">
                                                        <i class="fas fa-trash-alt me-1"></i>Delete
                                                    </button>
                                        </div>
                                    </td>
                                </tr>
                                <% }); %>
                        </tbody>
                    </table>
                </div>

                <!-- Pagination -->
                <% if (pagination && pagination.total> 1) { %>
                    <nav aria-label="Blog pagination" class="mt-4">
                        <ul class="pagination justify-content-center">
                            <% if (pagination.current> 1) { %>
                                <li class="page-item">
                                    <a class="page-link"
                                        href="?page=<%= pagination.current - 1 %><%= query.search ? '&search=' + query.search : '' %><%= query.status ? '&status=' + query.status : '' %><%= query.category ? '&category=' + query.category : '' %>">Previous</a>
                                </li>
                                <% } %>

                                    <% for (let i=1; i <=pagination.total; i++) { %>
                                        <% if (i===pagination.current) { %>
                                            <li class="page-item active">
                                                <span class="page-link">
                                                    <%= i %>
                                                </span>
                                            </li>
                                            <% } else if (i===1 || i===pagination.total || (i>= pagination.current - 2
                                                && i <= pagination.current + 2)) { %>
                                                    <li class="page-item">
                                                        <a class="page-link"
                                                            href="?page=<%= i %><%= query.search ? '&search=' + query.search : '' %><%= query.status ? '&status=' + query.status : '' %><%= query.category ? '&category=' + query.category : '' %>">
                                                            <%= i %>
                                                        </a>
                                                    </li>
                                                    <% } else if (i===pagination.current - 3 || i===pagination.current +
                                                        3) { %>
                                                        <li class="page-item disabled">
                                                            <span class="page-link">...</span>
                                                        </li>
                                                        <% } %>
                                                            <% } %>

                                                                <% if (pagination.current < pagination.total) { %>
                                                                    <li class="page-item">
                                                                        <a class="page-link"
                                                                            href="?page=<%= pagination.current + 1 %><%= query.search ? '&search=' + query.search : '' %><%= query.status ? '&status=' + query.status : '' %><%= query.category ? '&category=' + query.category : '' %>">Next</a>
                                                                    </li>
                                                                    <% } %>
                        </ul>
                    </nav>
                    <% } %>
                        <% } else { %>
                            <div class="text-center py-5">
                                <i class="fas fa-blog text-muted mb-3" style="font-size: 3rem;"></i>
                                <h5 class="text-muted mb-3">No Blog Posts Found</h5>
                                <a href="/admin/blog/create" class="btn btn-primary">
                                    <i class="fas fa-plus-circle me-1"></i>Create First Blog Post
                                </a>
                            </div>
                            <% } %>
        </div>
    </div>
</div>

<!-- Delete Blog Confirmation Modal -->
<div class="modal fade" id="deleteBlogModal" tabindex="-1" aria-labelledby="deleteBlogModalLabel" aria-hidden="true"
    data-bs-backdrop="true" data-bs-keyboard="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header bg-danger text-white">
                <h5 class="modal-title" id="deleteBlogModalLabel">
                    <i class="fas fa-trash me-2"></i>Confirm Delete
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"
                    aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p>Are you sure you want to delete the blog post "<span id="deleteBlogTitle" class="fw-bold"></span>"?
                </p>
                <p class="text-danger mb-0">
                    <small>
                        <i class="fas fa-exclamation-triangle me-1"></i>This action cannot be
                        undone.</small>
                </p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <form id="deleteBlogForm" method="POST" style="display: inline;">
                    <button type="submit" class="btn btn-danger">
                        <i class="fas fa-trash me-1"></i>Delete
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>

<style>
    /* Fix modal z-index - must be higher than everything else */
    #deleteBlogModal {
        z-index: 2050 !important;
    }

    #deleteBlogModal .modal-dialog {
        z-index: 2060 !important;
        position: relative;
    }

    #deleteBlogModal .modal-content {
        z-index: 2070 !important;
        position: relative;
    }

    /* Ensure modal is clickable */
    #deleteBlogModal.show {
        display: block !important;
    }
</style>

<script>
    document.addEventListener('DOMContentLoaded', function () { // Initialize modal instance once
        const deleteModalElement = document.getElementById('deleteBlogModal');
        const deleteModal = new bootstrap.Modal(deleteModalElement, {
            backdrop: false,
            keyboard: true,
            focus: true
        });

        // Handle delete buttons
        document.querySelectorAll('[data-custom-modal="open"]').forEach(button => {
            button.addEventListener('click', function (e) {
                e.preventDefault();
                const blogId = this.getAttribute('data-id');
                const blogTitle = this.getAttribute('data-title');

                // Set blog title in modal
                document.getElementById('deleteBlogTitle').textContent = blogTitle;

                // Set form action
                document.getElementById('deleteBlogForm').action = `/admin/blog/${blogId}/delete`;

                // Show Bootstrap modal
                deleteModal.show();
            });
        });
    });
</script>