<!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;
            display: flex; /* Align child elements using flexbox */
            flex-direction: column; /* Stack children vertically */
            align-items: center; /* Center children horizontally */
            justify-content: center; /* Center children along the main axis */
        }
    
        .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;
            margin-bottom: 20px;
            margin-top: 20px;
        }
    
        .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;
        background-color: #0D041A;
        color: white;
        min-width: 700px;
        flex-grow: 1;
        max-width: 2000px;
        margin: auto;
        position: relative;
        overflow: hidden;
        margin-bottom: 2rem; /* Add space below the progress bar */
    }

        .step-container {
        min-width: 600px;
        flex-grow: 1;
        max-width: 2000px;
        background-color: #0D041A;
        color: #fff;
        padding: 10px;
        border-radius: 5px;
        margin: 5px 0;
        margin-bottom: 1.5rem; /* Increase space between steps */
        justify-content: start; /* Align items to the start of the container */
        }

        .step-container h2 {
        margin: 0;
        line-height: 50px; /* This should match the height of .circle */
        display: inline-block;
        vertical-align: middle; /* Vertically aligns the inline-block element */
        }   

        .circle {
        width: 100px;
        height: 100px;
        background-color: #4672ED;
        border-radius: 50%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        margin-right: 10px;
        }

        .circle i.fas {
            font-size: 30px; /* This will control the size of the font icons */
            color: white; /* If you want to specify the color */
        }

        .locked {
            background-color: #252836;
        }

        .locked i.fa-solid {
            font-size: 30px; /* This will control the size of the font icons */
            color: #464c66; /* If you want to specify the color */
        }


    </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>
        <% pathway.forEach(function(pathway) { %>
        <main class="right-column">
            <div class="tracker">

                <div class="tracker-heading">
                    <h1><%= pathway.pathway_name %></h1>
                </div>
                <br>
                <div class="card course-card">
                    <div class="card-body">
                        <!-- <h5 class="card-title"><%= pathway.pathway_name %></h5> -->
                        <div class="progress mb-3">
                            <div class="progress-bar" role="progressbar" style="width: <%= (pathway.current_step / pathway.number_of_steps * 100).toFixed(2) %>%"  aria-valuenow="<%= pathway.current_step %>" aria-valuemin="0" aria-valuemax="<%= pathway.number_of_steps %>"></div>
                        </div>
                        <div class="d-flex justify-content-between mb-2">
                            <small><%= pathway.number_of_steps %> Skills</small>
                            <small><%= pathway.current_step %> / <%= pathway.number_of_steps %></small>
                        </div>
                    </div>
                </div>
            </div>

            <div class="container py-5">
                <div class="row">
                    <div class="col-12 col-md-4">
                        <% for(let index = 0; index < pathway.number_of_steps; index++) { %>
                            <% if(index < pathway.current_step) { %>
                                <!-- Unlocked Step -->
                                <div class="step-container d-flex align-items-center">
                                <div class="circle"><i class="fas fa-play"></i> </div>
                                <h2>Step <%= index + 1 %></h2>
                                </div>
                            <% } else { %>
                                <!-- Locked Step -->
                                <div class="step-container d-flex align-items-center">
                                <div class="circle locked"><i class="fa-solid fa-lock"></i></div>
                                <h2>Step <%= index + 1 %></h2>
                                </div>
                            <% } %>
                        <% } %>  
                    </div>
                </div>
            </div>
        </main>
        <% }); %>
    </div>

<!-- Bootstrap JS Bundle with Popper -->
<script console.log(__dirname); src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<!-- Include FontAwesome for icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">

</body>
</html>