{% extends 'base.html' %}

{% block title %}{{ course.title }} - Python Lern App{% endblock %}

{% block content %}
<header class="py-5 border-bottom border-2 bw-border">
    <div class="container">
        <a href="{% url 'home' %}" class="bw-text text-decoration-none font-mono small mb-3 d-block">&larr; BACK_TO_PATHS</a>
        <h1 class="display-4">{{ course.title }}</h1>
        <p class="lead font-mono mt-3">{{ course.description }}</p>
    </div>
</header>

<section class="py-5">
    <div class="container">
        <div class="row">
            <div class="col-lg-8">
                <h2 class="mb-5">SYLLABUS_MAP</h2>
                <div class="module-list">
                    {% for module in modules %}
                    <div class="module-item">
                        <h3 class="h5 font-mono mb-3">{{ module.title|upper }}</h3>
                        <div class="list-group list-group-flush border-top bw-border">
                            {% for lesson in module.lessons.all %}
                            <a href="{% url 'lesson_detail' lesson.pk %}" class="list-group-item list-group-item-action border-bottom bw-border px-0 py-3 d-flex justify-content-between align-items-center">
                                <span class="font-mono">{{ lesson.title }}</span>
                                <span class="btn btn-bw-outline btn-sm">START</span>
                            </a>
                            {% endfor %}
                        </div>
                    </div>
                    {% empty %}
                    <p class="font-mono">THIS PATH IS CURRENTLY UNDER CONSTRUCTION.</p>
                    {% endfor %}
                </div>
            </div>
            <div class="col-lg-4">
                <div class="card card-bw p-4 sticky-top" style="top: 100px;">
                    <h3 class="h5 mb-3">PATH_PROGRESS</h3>
                    <div class="progress mb-3 border bw-border rounded-0" style="height: 30px;">
                        <div class="progress-bar" role="progressbar" style="width: 0%;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">0%</div>
                    </div>
                    <p class="small font-mono">COMPLETE LESSONS TO TRACK YOUR PROGRESS.</p>
                </div>
            </div>
        </div>
    </div>
</section>
{% endblock %}