{% extends 'base.html' %}
{% load static %}
{% block title %} {{ request.user }} - Student Dashboard {% endblock title %}

{% block head %}
<link rel="stylesheet" href="{% static 'css/dashboard.css' %}">
{% endblock head %}
{% block body %}
<div class="container-fluid">
    <div class="row">
        <nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block bg-light sidebar collapse">
            <div class="sidebar-sticky pt-3">
                <ul class="nav flex-column">
                    <li class="nav-item">
                        <a class="nav-link active" href="{% url 'info' %}">
                            <img src="https://img.icons8.com/pastel-glyph/24/000000/user-male.png" />
                            Profile
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="{% url 'ChangePassword' %}">
                            <img src="https://img.icons8.com/ios/24/000000/password-window.png" />
                            Change Password
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="{% url 'UserCourse' %}">
                            <img src="https://img.icons8.com/wired/24/000000/singing-teacher.png" />
                            Your Courses
                        </a>
                    </li>
                </ul>
            </div>
        </nav>

        <main role="main" class="col-md-9 ml-sm-auto col-lg-10 px-md-4">
            <div
                class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
                <h1 class="h2">Dashboard</h1>
                <div class="btn-toolbar mb-2 mb-md-0">
                    <div class="btn-group mr-2">
                        <button type="button" class="btn btn-sm btn-outline-secondary">Share</button>
                        <button type="button" class="btn btn-sm btn-outline-secondary">Export</button>
                    </div>
                    <button type="button" class="btn btn-sm btn-outline-secondary dropdown-toggle">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                            class="feather feather-calendar">
                            <rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
                            <line x1="16" y1="2" x2="16" y2="6"></line>
                            <line x1="8" y1="2" x2="8" y2="6"></line>
                            <line x1="3" y1="10" x2="21" y2="10"></line>
                        </svg>
                        This week
                    </button>
                </div>
            </div>

            <canvas class="my-4 w-100 chartjs-render-monitor" id="myChart" width="1080" height="456"
                style="display: block; width: 1080px; height: 456px;"></canvas>


        </main>
    </div>
</div>

{% endblock body %}