<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Profile</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 */
        }

    </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" href="/#">
                                <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="/management">
                                <img src="icons/management_navbar_icons.svg" alt="Image" class="circle-img">
                                Management
                            </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 id="enablePathway">
                <h2>Enable a Pathway</h2>
                <form id="enablePathwayform" action="/enable" method="POST">
                    <p><label>
                        <strong>Select a Pathway:</strong>
                        <select name="pathway">
                            <% pathways.forEach(pathways => { %>
                                <option value="<%= pathways.pathwayID %>"><%= pathways.skill %></option>
                            <% }); %>
                        </select>
                    </label></p>
        
                    <button type="submit" style="background-color: rgb(105, 245, 70); color: white;">Enable</button>
                </form>
        
                <br><br>
                <button onclick="window.location.href='/dashboard'" style="background-color: white; color: black;">Return to Dashboard</button>
            </div>
        
        </main>
</div>

<!-- Add Bootstrap JS (Popper.js and Bootstrap.js) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.
n