{% extends "frappe_theme/templates/base.html" %}
{% block title %}ERPNext Academy{% endblock %}

{% macro course_card(course) %}
<div class="card mt-3" data-list="getting-started">
    <div class='card-body'>
        <div class="row">
            <div class="course-details col-xs-8 col-sm-9 col-md-10">
                <h5>{{ course.course_name }}</h5>
                <span class="course-list text-muted" id="getting-started">
                    Course Content
                    <ul class="mb-0 mt-1">
                        {% for content in course.course_content %}
                            <li>{{ content.content }}</li>
                        {% endfor %}
                    </ul>
                </span>
            </div>
            <div class='text-center col-xs-4 col-sm-3 col-md-2'>
                {% if not check_complete(course.name) %}
                <a class='btn btn-primary btn-sm btn-block' href="/lms/course?program={{ program.program_code }}&course={{ course.name }}&type={{course.course_content[0].content_type}}&content={{ course.course_content[0].content }}">Start Course</a>
                {% else %}
                <a class='btn btn-success btn-sm btn-block' href="/lms/course?program={{ program.program_code }}&course={{ course.name }}&type={{course.course_content[0].content_type}}&content={{ course.course_content[0].content }}">Complete</a>
                {% endif %}
            </div>
        </div>
    </div>
</div>
{% endmacro %}

{% block content %}
<section class='top-section'>
    <div class='container'>
        <div class='text-center'>
            <!-- <img class="main-illustration" src='/assets/academy/img/expert.png' style='width: 700px;'> -->
        </div>
        <h1>{{ program.program_name }}</h1>
        <p class='lead'>{{ program.description }}</p>
        <p class="mt-4">
            <a class="btn btn-primary btn-lg" href="/program/course">
                Continue Learning</a>
        </p>
</section>

<section class='section-padding section-bg'>
    <div class='container'>
        <h3 class='text-center'>Courses</h3>
        <p class='lead text-center'>Curated Courses and Content</p>
        {% for course_item in course_list %}
        {{ course_card(course_item) }}
        {% endfor %}
    </div>
</section>

{% include "www/lms/templates/includes/highlights.html" %}

<style>
    .footer-message {
        display: none;
    }

    @media (max-width: 767px) {
        .course-details {
            margin-bottom: 1rem !important;
        }
    }
</style>

{% endblock %}