{% extends "templates/base.html" %} {% block title %}{{ program.program_name }}{% endblock %} {% from "www/lms/macros/hero.html" import hero %} {% from "www/lms/macros/card.html" import null_card %} {% block head_include %} <style> div.card-hero-img { height: 220px; background-size: cover; background-repeat: no-repeat; background-position: center; background-color: rgb(250, 251, 252); } .card-image-wrapper { display: flex; overflow: hidden; height: 220px; background-color: rgb(250, 251, 252); justify-content: center; } .image-body { align-self: center; color: #d1d8dd; font-size: 24px; font-weight: 600; line-height: 1; padding: 20px; } section { padding: 5rem 0 5rem 0; } </style> {% endblock %} {% macro card(course) %} <div class="col-sm-4 mb-4 text-left"> <a href="/lms/course?name={{ course.name }}&program={{ program.name }}" class="no-decoration no-underline"> <div class="card h-100"> {% if course.hero_image %} <div class="card-hero-img" style="background-image: url('{{ course.hero_image }}')"></div> {% else %} <div class="card-image-wrapper text-center"> <div class="image-body"><i class="fa fa-picture-o" aria-hidden="true"></i></div> </div> {% endif %} <div class='card-body'> <h5 class='card-title'>{{ course.course_name }}</h5> <div class="text-muted">{{ course.description[:110] + '...' if course.description else '' }}</div> </div> {% if has_access and progress[course.name] %} <div class='card-footer'> {% if progress[course.name].completed %} <span class="indicator green">Completed</span> {% elif progress[course.name].started %} <span class="indicator orange">In Progress</span> {% else %} <span class="indicator blue">Start</span> {% endif %} </div> {% endif %} </div> </a> </div> {% endmacro %} {% block content %} <section class="section"> {{ hero(program.program_name, program.description, has_access, {'name': 'Home', 'url': '/lms'}) }} <div class='container'> <div class="row mt-5"> {% for course in courses %} {{ card(course) }} {% endfor %} {% if courses %} {% for n in range( (3 - (courses|length)) %3) %} {{ null_card() }} {% endfor %} {% endif %} </div> </div> </section> {% endblock %}