<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Skill Tracker</title>
    <!-- Add Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <style>
        /* Set the background color of the entire website */
        body {
            background-color: #0D041A;
            color: #E2E2F6; /* Set text color to white */
            margin: 0; /* Remove default margin */
        }
    
        /* Apply a border with soft corners to both columns */
        .left-column, .right-column {
            border-radius: 10px;
            padding: 20px;
            margin: 10px; /* Adjust margin for spacing */
            min-height: 1000px;
        }
    
        /* Define the maximum width for the left column and minimum width for the right column */
        .left-column {
            width: 250px;
            max-width: 250px;
            min-width: 250px;
            background-color: #141236;
        }
    
        .right-column {
            min-width: 700px;
            flex-grow: 1;
            max-width: 2000px;
        }
    
        /* Create a container to hold the two columns and apply some spacing */
        .container {
            display: flex; /* Make the columns display side by side */
        }
    
        /* Customize the offcanvas */
        .offcanvas.show {
            transform: translateX(0);
            visibility: visible;
        }
    
        .offcanvas-header {
            padding: 0px 0px 20px 0px;
        }
    
        /* Center both image and text horizontally */
        .nav-link {
            display: flex;
            align-items: center;
            padding: 8px; /* Add padding to the nav-link */
            transition: background-color 0.3s, color 0.3s; /* Add a transition effect for background color and text color */
            border-radius: 10px; /* Make the border corners more circular */
            background-color: #141236; /* Set background color to match the page */
            color: #E2E2F6; /* Text color for nav links */
        }
    
        /* Apply a border and change background color on hover */
        .nav-link:hover {
            border: 1px solid #4672ED; /* Add a border on hover */
            background-color: #4672ED; /* Change background color on hover */
        }
    
        .circle-img {
            margin-right: 10px; /* Add spacing between the image and text */
            width: 30px; /* Set the maximum width for the SVG image */
        }
    
        .tracker {
            margin: 30px 0;
        }
    
        .tracker-heading {
            text-align: center; /* Center align the text */
            margin-bottom: 1rem; /* Add some space below the heading */
        }
    
        .tracker-card {
            border: none;
            border-radius: 20px;
            background: #0D041A; /* Dark background */
            margin-bottom: 20px;
            border: 1px solid #4672ED;
        }
    
        .progress {
            background-color: #0D041A;
            border: 1px solid #4672ED;
            border-radius: 20px;
            height: 30px;
        }
    
        .progress-bar {
            background-color: #4672ED; /* Lighter blue */
            border-radius: 20px;
            height: 30px;
        }
    
        /* Utility classes for padding and margins */
        .py-1 { padding-top: 1rem; padding-bottom: 1rem; }
        .my-1 { margin-top: 1rem; margin-bottom: 1rem; }
        .px-2 { padding-left: 2rem; padding-right: 2rem; }
        .mx-2 { margin-left: 2rem; margin-right: 2rem; }
    

        /* course card */
        .course-card {
        border-radius: 20px;
        border: 1px solid #4672ED;
        margin: 30px 0px 30px 0px;
        background-color: #0D041A;
        color: #4672ED;
        min-width: 600px;
        flex-grow: 1;
        max-width: 2000px;
        margin: auto;
        position: relative;
        overflow: hidden;
        display: flex;
        align-items: center;
    }

    </style>
    
</head>
<body>
    <div class="container">
        <nav class="left-column">
            <!-- Offcanvas Navbar -->
            <div class="offcanvas offcanvas-start py-4 px-3" tabindex="-1" id="offcanvasNavbar" aria-labelledby="offcanvasNavbarLabel">
                <!-- Logo image -->
                <div class="offcanvas-header">
                    <h1 class="offcanvas-title" id="offcanvasNavbarLabel">Learnr</h1>
                </div>
                <div class="offcanvas-body">
                    <!-- Add your navbar content here -->
                    <ul class="nav flex-column">
                        <li class="nav-item">
                            <a class="nav-link" href="/dashboard">
                                <img src="icons/home_navbar_icons.svg" alt="Image" class="circle-img">
                                Home 
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link">
                                <img src="icons/pathways_navbar_icons.svg" alt="Image" class="circle-img">
                                Pathways
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="/profile">
                                <img src="icons/profile_navbar_icons.svg" alt="Image" class="circle-img">
                                Profile
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="/logout">
                                <img src="icons/signout_navbar_icons.svg" alt="Image" class="circle-img">
                                Sign Out
                            </a>
                        </li>
                        <!-- Add more items as needed -->
                    </ul>
                </div>
            </div>
        </nav>
        <main class="right-column">
            <div class="tracker">

                <div class="tracker-heading">
                    <h1>Supermentor Management</h1>
                </div>
                <br>
                        <a href='/createPathway'> 
                        <div class="card course-card">
                            <div class="card-body">
                                <h4 class="card-title">Create a pathway</h4>
                            </div>
                        </div>
                        </a>
                        
                        <br><br>

                        <a href='/assign'> 
                            <div class="card course-card">
                                <div class="card-body">
                                    <h4 class="card-title">Assign your mentee a pathway</h4>
                                </div>
                            </div>
                        </a>
                        
                        <br><br>

                        <a href='/updateProgress'> 
                            <div class="card course-card">
                                <div class="card-body">
                                    <h4 class="card-title">Update your mentee's pathway progress</h4>
                                </div>
                            </div>
                        </a>

                </div>

        </main>
</div>

<!-- Bootstrap JS Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>