{% extends "base.html" %}
{#
  Wagtail LMS Course Page Template

  STYLING: This template uses CSS classes from 'wagtail_lms/css/course.css'.
  Include the stylesheet in your base template's <head> section:

    {% load static wagtailcore_tags %}
    <link rel="stylesheet" href="{% static 'wagtail_lms/css/course.css' %}">

  Alternatively, override these templates with your own (Bootstrap, Tailwind, etc.).
  See docs: https://github.com/dr-rompecabezas/wagtail-lms/blob/main/docs/template_customization.md
#}
{% load wagtailcore_tags %}

{% block content %}
<div class="lms-course">
    <div class="lms-course__layout">
        <main class="lms-course__main">
            <h1>{{ page.title }}</h1>

            {% if page.description %}
                <div class="lms-course__description">
                    {{ page.description|richtext }}
                </div>
            {% endif %}

            {% if lesson_pages %}
                <div class="lms-course__info">
                    <h3>H5P Lessons</h3>
                    <ol class="lms-lesson-list">
                        {% for lesson in lesson_pages %}
                            <li class="lms-lesson-list__item{% if lesson.pk in completed_lesson_ids %} lms-lesson-list__item--completed{% endif %}">
                                <a href="{% pageurl lesson %}" class="lms-lesson-list__link">{{ lesson.title }}</a>
                                {% if lesson.pk in completed_lesson_ids %}<span class="lms-lesson-list__checkmark" aria-label="Completed">&#10003;</span>{% endif %}
                            </li>
                        {% endfor %}
                    </ol>
                </div>
            {% endif %}

            {% if scorm_lesson_pages %}
                <div class="lms-course__info">
                    <h3>SCORM Lessons</h3>
                    <ol class="lms-lesson-list">
                        {% for lesson in scorm_lesson_pages %}
                            <li class="lms-lesson-list__item{% if lesson.pk in completed_scorm_lesson_ids %} lms-lesson-list__item--completed{% endif %}">
                                <a href="{% pageurl lesson %}" class="lms-lesson-list__link">{{ lesson.title }}</a>
                                {% if lesson.pk in completed_scorm_lesson_ids %}<span class="lms-lesson-list__checkmark" aria-label="Completed">&#10003;</span>{% endif %}
                            </li>
                        {% endfor %}
                    </ol>
                </div>
            {% endif %}

            {% if lesson_pages or scorm_lesson_pages %}
                {% if user.is_authenticated %}
                    {% if enrollment %}
                        <div class="lms-enrollment">
                            <div class="lms-notice lms-notice--info">
                                <strong>Enrolled:</strong> {{ enrollment.enrolled_at|date:"M d, Y" }}
                                {% if enrollment.completed_at %}
                                    <br><strong>Completed:</strong> {{ enrollment.completed_at|date:"M d, Y" }}
                                {% endif %}
                            </div>
                        </div>
                    {% else %}
                        <div class="lms-enrollment">
                            <a href="{% url 'wagtail_lms:enroll_course' page.id %}" class="lms-button lms-button--success">
                                Enroll in Course
                            </a>
                        </div>
                    {% endif %}
                {% else %}
                    <div class="lms-notice lms-notice--warning">
                        Please login to enroll in this course.
                    </div>
                {% endif %}
            {% endif %}

            {% if not lesson_pages and not scorm_lesson_pages %}
                <div class="lms-notice lms-notice--warning">
                    This course doesn't have any content assigned yet.
                </div>
            {% endif %}
        </main>

        <aside class="lms-course__sidebar">
            <div class="lms-sidebar-section">
                <h4>Course Information</h4>
                <ul class="lms-info-list">
                    {% if lesson_pages %}
                        <li><strong>H5P Lessons:</strong> {{ lesson_pages|length }}</li>
                    {% endif %}
                    {% if scorm_lesson_pages %}
                        <li><strong>SCORM Lessons:</strong> {{ scorm_lesson_pages|length }}</li>
                    {% endif %}
                </ul>
            </div>
        </aside>
    </div>
</div>
{% endblock %}
