<%- include('navbar.ejs') %>

    <style>
        .content-wrapper {
            padding: 50px 40px;
        }

        /* ===== Header ===== */

        .content-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 35px;
        }

        .content-title {
            font-size: 14px;
            font-weight: 600;
            background: linear-gradient(90deg, #6366f1, #ec4899);
            margin: 0;
            padding: 12px;
            color: white;
            border-radius: 12px;
        }

        .btn-upload {
            background: linear-gradient(135deg, #6366f1, #4f46e5);
            border: none;
            padding: 10px 20px;
            border-radius: 12px;
            color: #fff;
            font-weight: 600;
            transition: .3s;
            box-shadow: 0 10px 25px rgba(99, 102, 241, 0.3);
        }

        .btn-upload:hover {
            transform: translateY(-3px);
            box-shadow: 0 15px 35px rgba(99, 102, 241, 0.4);
            color: white;
        }

        /* ===== Card ===== */

        .content-card {
            background: #ffffff;
            border-radius: 22px;
            padding: 30px;
            box-shadow: 0 25px 60px rgba(0, 0, 0, 0.06);
        }

        /* ===== Table ===== */

        .table {
            margin: 0;
        }

        .table thead {
            background: linear-gradient(135deg, #6366f1, #ec4899);
            color: #fff;
        }

        .table th {
            font-size: 13px;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            border: none;
        }

        .table td {
            vertical-align: middle;
            font-size: 14px;
            border-top: 1px solid #f1f5f9;
        }

        .table tbody tr {
            transition: .3s;
        }

        .table tbody tr:hover {
            background: #f9fafb;
        }

        .desc-cell {
            max-width: 220px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        /* ===== Action Buttons ===== */

        .btn-view-video {
            background: #0ea5e9;
            color: #fff;
            border: none;
            border-radius: 8px;
            padding: 5px 12px;
            font-size: 12px;
            font-weight: bold;
        }

        .btn-view-video:hover {
            background: #0284c7;
        }

        .btn-view-pdf {
            background: #f59e0b;
            color: #fff;
            border: none;
            border-radius: 8px;
            padding: 5px 12px;
            font-size: 12px;
            font-weight: bold;
        }

        .btn-delete {
            background: #ef4444;
            color: #fff;
            border: none;
            border-radius: 8px;
            padding: 5px 12px;
            font-size: 12px;
            font-weight: bold;
        }

        .btn-delete:hover {
            background: #dc2626;
        }

        @media(max-width:768px) {
            .content-wrapper {
                padding: 25px 15px;
            }
        }
    </style>

    <div class="content-wrapper">

        <!-- Header -->
        <div class="content-header">
            <h3 class="content-title">📚 Course Content Manager</h3>

            <a href="/admin/course-content" class="btn-upload">
                + Upload New Content
            </a>
        </div>

        <!-- Card -->
        <div class="content-card">

            <div class="table-responsive">
                <table class="table align-middle">

                    <thead>
                        <tr>
                            <th>#</th>
                            <th>Course</th>
                            <th>Title</th>
                            <th>Description</th>
                            <th>Video</th>
                            <th>PDF</th>
                            <th>Date</th>
                            <th>Action</th>
                        </tr>
                    </thead>

                    <tbody>

                        <% if(contents.length> 0){ %>

                            <% contents.forEach((item,index)=>{ %>

                                <tr>
                                    <td>
                                        <%= index+1 %>
                                    </td>

                                    <td><strong>
                                            <%= item.course_name %>
                                        </strong></td>

                                    <td>
                                        <%= item.title %>
                                    </td>

                                    <td class="desc-cell">
                                        <%= item.description || '-' %>
                                    </td>

                                    <td>
                                        <% if(item.video_file){ %>
                                            <a href="/admin/view-video/<%= item.content_id %>" class="btn-view-video">
                                                View
                                            </a>
                                            <% } else { %> - <% } %>
                                    </td>

                                    <td>
                                        <% if(item.pdf_file){ %>
                                            <a href="<%= item.pdf_file %>" target="_blank" class="btn-view-pdf">
                                                View
                                            </a>
                                            <% } else { %> - <% } %>
                                    </td>

                                    <td>
                                        <%= new Date(item.created_at).toDateString() %>
                                    </td>

                                    <td>
                                        <a href="/admin/delete-course-content/<%= item.content_id %>"
                                            onclick="return confirm('Delete this content?')" class="btn-delete">
                                            🗑 Delete
                                        </a>
                                    </td>
                                </tr>

                                <% }) %>

                                    <% } else { %>

                                        <tr>
                                            <td colspan="8" class="text-center py-4">
                                                No content uploaded yet.
                                            </td>
                                        </tr>

                                        <% } %>

                    </tbody>

                </table>
            </div>

        </div>

    </div>

    <%- include('footer.ejs') %>