<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Nexus Portal</title>

    
        <link rel="stylesheet" href="/webjars/bootstrap/5.3.8/css/bootstrap.min.css" media="screen">
        <link rel="stylesheet" href="/webjars/bootstrap-icons/1.13.1/font/bootstrap-icons.min.css">
        <link rel="stylesheet" href="/css/layout.css">
        <link rel="stylesheet" href="/webjars/datatables/2.3.7/css/dataTables.dataTables.css">
        <link rel="stylesheet" href="/webjars/font-awesome/7.2.0/css/all.min.css">
        <link rel="stylesheet" href="/webjars/datatables/2.3.7/css/dataTables.bootstrap5.css">
    
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">

    
</head>
<body>
<div class="layout">
    <div class="sidebar">
        <div class="sidebar-container">
            <div class="sidebar-head">
                <div class="navbar-brand">
                    <img class="logo-image" src="/images/logo.png" alt="logo"/>
                </div>
            </div>

            <div class="sidebar-content">
                <div class="p-3">
                    <a class="nav-link px-3 py-2 rounded d-flex align-items-center gap-3 text-white text-decoration-none"
                       href="/dashboard" style="background: rgba(255,255,255,0.05)">
                        <i class="bi bi-speedometer2 text-primary"></i>
                        <span style="font-size: 1.02rem; font-weight: 500;">Dashboard Overview</span>
                    </a>
                </div>

                <section class="sidebar-nav-section">
                    <p><i class="bi bi-backpack-fill"></i> Students</p>
                    <div class="sidebar-nav-wrapper">
                        <ul class="sidebar-nav">
                            <li class="nav-item"><a class="nav-link" href="/students"><i class="bi bi-person-badge"></i> View All</a></li>
                            <li class="nav-item"><a class="nav-link" href="/students/create"><i class="bi bi-person-plus"></i> Enroll Student</a></li>
                            <li class="nav-item"><a class="nav-link" href="/students/grades"><i class="bi bi-graph-up"></i> Grade Book</a></li>
                        </ul>
                    </div>
                </section>

                <section class="sidebar-nav-section">
                    <p><i class="bi bi-journal-text"></i> Assessments</p>
                    <div class="sidebar-nav-wrapper">
                        <ul class="sidebar-nav">
                            <li class="nav-item"><a class="nav-link" href="/assessments"><i class="bi bi-journal-text"></i> All Templates</a></li>
                            <li class="nav-item"><a class="nav-link" href="/assessments/create"><i class="bi bi-file-earmark-plus"></i> New Template</a></li>
                        </ul>
                    </div>
                </section>

                <section class="sidebar-nav-section">
                    <p><i class="bi bi-briefcase-fill"></i> Staff</p>
                    <div class="sidebar-nav-wrapper">
                        <ul class="sidebar-nav">
                            <li class="nav-item"><a class="nav-link" href="/instructors"><i class="bi bi-person-workspace"></i> Instructors</a></li>
                            <li class="nav-item"><a class="nav-link" href="/instructors/create"><i class="bi bi-person-plus-fill"></i> Add Member</a></li>
                        </ul>
                    </div>
                </section>

                <section class="sidebar-nav-section">
                    <p><i class="bi bi-book"></i> Classes</p>
                    <div class="sidebar-nav-wrapper">
                        <ul class="sidebar-nav">
                            <li class="nav-item"><a class="nav-link" href="/classes"><i class="bi bi-collection"></i> Manage Classes</a></li>
                            <li class="nav-item"><a class="nav-link" href="/classes/create"><i class="bi bi-folder-plus"></i> Open New Class</a></li>
                        </ul>
                    </div>
                </section>
                <section class="sidebar-nav-section">
                    <p><i class="bi bi-flask"></i> Subjects</p>
                    <div class="sidebar-nav-wrapper">
                        <ul class="sidebar-nav">
                            <li class="nav-item"><a class="nav-link" href="/subjects"><i class="bi bi-flask-fill"></i> Subjects</a></li>
                            <li class="nav-item"><a class="nav-link" href="/subjects/create"><i class="bi bi-clipboard2-plus-fill"></i>Add Subject</a></li>
                        </ul>
                    </div>
                </section>
                <section class="sidebar-nav-section">
                    <p><i class="bi bi-gear-wide-connected"></i> Settings</p>
                    <div class="sidebar-nav-wrapper">
                        <ul class="sidebar-nav">
                        </ul>
                    </div>
                </section>
            </div>
        </div>
    </div>
    <div class="main-section">
        <!-- ============================================================ -->
        <!--  FIXED TOP BAR  -->
        <!-- ============================================================ -->
        <div class="navbar">
            <nav class="navbar-container navbar-expand-lg bg-white w-full">
                <div class="container-fluid d-flex align-items-center justify-content-between">

                    <!-- LEFT: Breadcrumbs -->
                    <nav class="breadcrumbs" aria-label="Breadcrumb">
                        <ol id="breadcrumb-container" class="breadcrumb-modern">
                            <!-- Populated by JS -->
                        </ol>
                    </nav>

                    <!-- RIGHT: User + Actions -->
                    <div class="topbar-actions d-flex align-items-center gap-2">

                        <!-- Help button -->
                        <button class="topbar-btn d-none d-md-flex" title="Help">
                            <i class="bi bi-question-circle"></i>
                        </button>

                        <button class="topbar-btn d-none d-md-flex" title="Messages">
                            <i class="bi bi-envelope"></i>
                        </button>

                        <!-- Notifications -->
                        <a class="btn topbar-btn position-relative" href="/notifications" title="Notifications">
                            <i class="bi bi-bell"></i>
                            <span class="notification-dot"></span>
                        </a>

                        <!-- Divider -->
                        <span class="topbar-divider d-none d-sm-block"></span>

                        <!-- Profile Dropdown -->
                        <div class="dropdown profile-dropdown">
                            

                            <!-- Dropdown Menu -->
                            <div class="dropdown-menu dropdown-menu-end shadow-lg border-0 rounded-3 p-2">
                                <a href="/profile" class="dropdown-item d-flex align-items-center gap-3 rounded-2">
                                    <i class="bi bi-person-circle fs-5 text-primary"></i>
                                    <span>My Profile</span>
                                </a>
                                <hr class="dropdown-divider my-1">
                                <a type="button" class="dropdown-item d-flex align-items-center gap-3 rounded-2 text-danger"
                                   data-bs-toggle="modal" data-bs-target="#logOutModal">
                                    <i class="bi bi-box-arrow-right fs-5"></i>
                                    <span>Sign Out</span>
                                </a>
                            </div>
                        </div>
                    </div>

                    <!-- Logout Modal -->
                    <div class="modal fade" id="logOutModal" tabindex="-1" aria-labelledby="logOutModalLabel" aria-hidden="true">
                        <div class="modal-dialog modal-dialog-centered">
                            <div class="modal-content border-0 shadow-lg rounded-4">
                                <div class="modal-header border-0 pb-0">
                                    <h5 class="modal-title fw-bold" id="logOutModalLabel">
                                        <i class="bi bi-exclamation-triangle-fill text-warning me-2"></i>
                                        Confirm Sign Out
                                    </h5>
                                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                </div>
                                <div class="modal-body pt-2">
                                    <p class="text-secondary mb-0">Are you sure you want to end your current session?</p>
                                </div>
                                <div class="modal-footer border-0 pt-0">
                                    <button type="button" class="btn btn-light rounded-pill px-4" data-bs-dismiss="modal">
                                        Cancel
                                    </button>
                                    <button id="logout-btn" class="btn btn-danger rounded-pill px-4">
                                        <i class="bi bi-box-arrow-right me-1"></i> Sign Out
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </nav>
        </div>

        <main class="main-content">
            <main class="container mt-5">
    <div class="row justify-content-center">
        <div class="col-md-6 text-center">
            <div class="display-1 text-danger fw-bold">404</div>
            <h2 class="mb-4">Something went wrong</h2>
            <p class="lead text-muted">Oops! This resource doesn&#39;t exist.</p>
            <hr>
            <a href="/" class="btn btn-primary">Return to Dashboard</a>
            <button onclick="history.back()" class="btn btn-outline-secondary">Go Back</button>
        </div>
    </div>
</main>
        </main>
    </div>
</div>

<!-- Scripts -->
<script src="/webjars/jquery/4.0.0/jquery.js"></script>
<script src="/webjars/bootstrap/5.3.8/js/bootstrap.bundle.min.js"></script>
<script src="/webjars/datatables/2.3.7/js/dataTables.js"></script>
<script src="/webjars/datatables/2.3.7/js/dataTables.bootstrap5.min.mjs"></script>
<script type="text/javascript">
    $(document).ready(() => {
        const logoutButton = document.getElementById("logout-btn");

        function buildBreadCrumbs() {
            const path = window.location.pathname;
            const pathArray = path.split('/').filter(p => p);
            const $container = $('#breadcrumb-container');

            // Home is always first
            $container.append(`
                <li class="breadcrumb-item">
                    <a href="/dashboard">
                        <i class="bi bi-house-door-fill"></i> Home
                    </a>
                </li>
            `);

            let currentPath = '';

            pathArray.forEach((segment, index) => {
                currentPath += `/${segment}`;
                const displayName = segment.replace(/-/g, ' ').replace(/(^\w|\s\w)/g, m => m.toUpperCase());

                if (index === pathArray.length - 1) {
                    $container.append(`
                        <li class="breadcrumb-item active" aria-current="page">
                            <span>${displayName}</span>
                        </li>
                    `);
                } else {
                    $container.append(`
                        <li class="breadcrumb-item">
                            <a href="${currentPath}">${displayName}</a>
                        </li>
                    `);
                }
            });
        }

        buildBreadCrumbs();

        const handleSecureLogout = (e) => {
            e.target.disabled = true;
            const csrfToken = /*KcwDPtt4-J05Lnw8TmrlDfQupnfsUQvQnVdSXv7AbnS7Pb7UGfg7C-obnqQUGx5ZekfRPcIbixXcNTP9-2JgZs7wWU2JBInt*/ '';
            const csrfHeader = /*X-CSRF-TOKEN*/ 'X-CSRF-TOKEN';
            const logoutUrl = /*/logout*/ '/logout';

            fetch(logoutUrl, {
                method: 'POST',
                headers: {
                    [csrfHeader]: csrfToken
                }
            })
                .then(response => {
                    if (response.redirected) {
                        window.location.href = response.url;
                    } else {
                        window.location.href = '/login?logout=true';
                    }
                })
                .catch(error => {
                    console.error('Logout error:', error);
                    window.location.href = '/login?error=true';
                });
        };

        if (logoutButton) {
            logoutButton.addEventListener("click", handleSecureLogout);
        }
    });
</script>

</body>
</html>