{% extends 'base.html' %}
{% load static %}
{% block title %} Your Subscription Courses - {{ 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" 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 active" 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">Your Courses</h1>
            </div>
            <div class="row">
                {% for ucourse in ucourse reversed %}
                <div class="col-md-4">
                    <div class="card my-4 mx-3 shadow-lg p-3 mb-5 bg-white rounded" style="width: 18rem;">
                        <img src="{{ ucourse.course.thumbnail_url }}" class="card-img-top" alt="Course Thumbnail" height="150">
                        <div class="card-body">
                            <h5 class="card-title">{{ ucourse.course.title }}</h5>
                        </div>
                        <ul class="list-group list-group-flush">
                            <li class="list-group-item"><img src="https://img.icons8.com/metro/20/000000/in-progress.png"/> Progress 
                                <span class="badge badge-danger">{{ ucourse.progress }}</span></li>
                        </ul>
                        <div class="card-body">
                            <center>
                                <a href="{% url 'course_detail' ucourse.course.course_slug %}" class="btn btn-info py-2 my-1">Continue to Learn</a>
                            </center>
                        </div>
                    </div>
                </div>{% endfor %}
            </div>
        </main>
    </div>
</div>
{% endblock body %}