{% 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 page.scorm_package %}
                <div class="lms-course__info">
                    <h3>Course Content</h3>
                    <p><strong>Package:</strong> {{ page.scorm_package.title }}</p>
                    {% if page.scorm_package.description %}
                        <p>{{ page.scorm_package.description }}</p>
                    {% endif %}
                </div>

                {% 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 progress %}
                                    <br><strong>Progress:</strong> {{ progress.completion_status|title }}
                                    {% if progress.score_raw %}
                                        <br><strong>Score:</strong> {{ progress.score_raw }}
                                        {% if progress.score_max %}/ {{ progress.score_max }}{% endif %}
                                    {% endif %}
                                {% endif %}
                            </div>
                            <a href="{% url 'wagtail_lms:scorm_player' page.id %}" class="lms-button lms-button--primary">
                                {% if progress.completion_status == 'completed' %}
                                    Review Course
                                {% else %}
                                    {% if progress %}Continue Course{% else %}Start Course{% endif %}
                                {% endif %}
                            </a>
                        </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 %}
            {% else %}
                <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>
                {% if page.scorm_package %}
                    <ul class="lms-info-list">
                        <li><strong>Type:</strong> SCORM {{ page.scorm_package.version }}</li>
                        <li><strong>Added:</strong> {{ page.scorm_package.created_at|date:"M d, Y" }}</li>
                    </ul>
                {% endif %}
            </div>
        </aside>
    </div>
</div>
{% endblock %}
