{% extends "richie/fullwidth.html" %}
{% load cms_tags i18n extra_tags pagination_tags static thumbnail humanize %}

{% block meta_index_rules %}
    {# Make sure course snapshot pages are not indexed by search engines #}
    {% if current_page.parent_page.course %}
        <meta name="robots" content="noindex">
    {% else %}
        {{ block.super }}
    {% endif %}
{% endblock meta_index_rules %}

{% block meta_rdfa_context %}
    {% get_placeholder_plugins "course_cover" as plugins or %}
        {{ block.super }}
    {% endget_placeholder_plugins %}
    {% blockplugin plugins.0 %}
        <meta property="og:type" content="website" />
        {% thumbnail instance.picture 1200x630 crop upscale subject_location=instance.picture.subject_location as thumb %}
        <meta property="og:image" content="{{ MEDIA_URL_PREFIX }}{{ thumb.url }}" />
        <meta property="og:image:width" content="{{ thumb.width }}" />
        <meta property="og:image:height" content="{{ thumb.height }}" />
    {% endblockplugin %}
    {% if not current_page|is_empty_placeholder:"course_introduction" %}
        <meta property="og:description" content="{% show_placeholder 'course_introduction' current_page %}">
    {% endif %}
{% endblock meta_rdfa_context %}

{% block body_rdfa %} vocab="https://schema.org/" typeof="Course"{% endblock body_rdfa %}

{% block subheader %}
<div class="subheader subheader--alternative">
    {% block breadcrumbs %}
        {% include "menu/breadcrumbs.html" %}
    {% endblock breadcrumbs %}

    {% block subheader_content %}{% spaceless %}
        {% with course=current_page.course header_level=2 %}
        {% if course %}
        <div class="subheader__container">
            <div class="subheader__intro">
                <div class="subheader__main">
                    {% block categories %}
                    {% if current_page.publisher_is_draft or not current_page|is_empty_placeholder:"course_icons" or not current_page|is_empty_placeholder:"course_categories" %}
                    <div class="category-badge-list">
                        <div class="category-badge-list__container">
                        {% with category_variant="badge" %}
                            {% placeholder "course_icons" %}
                            {% placeholder "course_categories" or %}
                                {% if current_page.publisher_is_draft and current_page|is_empty_placeholder:"course_icons" %}
                                <span class="category-badge-list__empty">
                                    {% trans "No associated categories" %}
                                </span>
                                {% endif %}
                            {% endplaceholder %}
                        {% endwith %}
                        </div>
                    </div>
                    {% endif %}
                    {% endblock categories %}

                    {% block title %}
                    <h1 class="subheader__title" property="name">{% render_model current_page "title" %}</h1>
                    {% if course.code or current_page.publisher_is_draft %}
                        <div class="subheader__code" property="courseCode" content="{{ course.code|default:'' }}">
                            {% trans "Ref. " %}{% render_model course "code" "code,is_listed" "" "default:'...'" %}
                        </div>
                    {% endif %}
                    {% endblock title %}

                    <div class="subheader__content">
                        {% block synopsis %}
                        {% if course.duration or course.effort or current_page.publisher_is_draft %}
                        <div class="characteristics">
                            <ul class="characteristics__container">
                            {% render_model_block course "duration,effort,is_self_paced" %}
                                {% if instance.duration or current_page.publisher_is_draft %}
                                <li class="characteristics__item">
                                    <svg role="img" class="characteristics__icon" aria-hidden="true">
                                        <use href="#icon-duration" />
                                    </svg>
                                    <span class="characteristics__term">{% trans "Duration:" %} {{ instance.get_duration_display|default:"NA" }}</span>
                                </li>
                                {% endif %}
                                {% if instance.effort or current_page.publisher_is_draft %}
                                <li class="characteristics__item">
                                    <svg role="img" class="characteristics__icon" aria-hidden="true">
                                        <use href="#icon-clock" />
                                    </svg>
                                    <span class="characteristics__term" property="timeRequired" content="{{ current_page.course.pt_effort }}">
                                        {% trans "Effort:" %} {{ instance.get_effort_display|default:"NA" }}
                                    </span>
                                </li>
                                {% endif %}
                                {% if instance.get_pace_display or current_page.publisher_is_draft %}
                                <li class="characteristics__item">
                                    <svg role="img" class="characteristics__icon" aria-hidden="true">
                                        <use href="#icon-pace" />
                                    </svg>
                                    <span class="characteristics__term">{% trans "Pace:" %} {{ instance.get_pace_display|default:"NA" }}</span>
                                </li>
                                {% endif %}
                            {% endrender_model_block %}
                            </ul>
                        </div>
                        {% endif %}
                        {% endblock synopsis %}

                        {% if current_page.publisher_is_draft or not current_page|is_empty_placeholder:"course_introduction" %}
                            <div property="description">{% placeholder "course_introduction" or %}<p>{% trans 'Enter here a introduction of your course.' %}</p>{% endplaceholder %}</div>
                        {% endif %}
                    </div>

                    {% block enrollment_count %}
                        {% with enrollment_count=course.course_runs_enrollment_count %}
                            {% if enrollment_count > 0 and RICHIE_MINIMUM_COURSE_RUNS_ENROLLMENT_COUNT > 0 and enrollment_count >= RICHIE_MINIMUM_COURSE_RUNS_ENROLLMENT_COUNT %}
                                <div class="subheader__enrollment-count">
                                    {% blocktrans with count=enrollment_count|intcomma %}
                                        {{ count }} already enrolled!
                                    {% endblocktrans %}
                                </div>
                            {% endif %}
                        {% endwith %}
                    {% endblock enrollment_count %}

                    <div class="subheader__teaser">
                        {% placeholder "course_teaser" or %}
                            {% get_placeholder_plugins "course_cover" as plugins or %}
                                {% if current_page.publisher_is_draft %}
                                    <p class="empty">{% trans 'Add a teaser video or add a cover image below and it will be used as teaser image as well.' %}</p>
                                {% endif %}
                            {% endget_placeholder_plugins %}
                            {% blockplugin plugins.0 %}
                                <img
                                    src="{% thumbnail instance.picture 300x170 crop upscale subject_location=instance.picture.subject_location %}"
                                    srcset="
                                    {% thumbnail instance.picture 300x170 crop upscale subject_location=instance.picture.subject_location %} 300w
                                    {% if instance.picture.width >= 600 %},{% thumbnail instance.picture 600x340 crop upscale subject_location=instance.picture.subject_location %} 600w{% endif %}
                                    {% if instance.picture.width >= 900 %},{% thumbnail instance.picture 900x510 crop upscale subject_location=instance.picture.subject_location %} 900w{% endif %}
                                    "
                                    sizes="300px"
                                    alt="{% if instance.picture.default_alt_text %}{{ instance.picture.default_alt_text }}{% else %}{% trans 'course cover image' %}{% endif %}"
                                />
                            {% endblockplugin %}

                        {% endplaceholder %}
                    </div>
                </div>

                <div class="subheader__aside">
                    {% block main_organization %}
                    {% with main_organization=course.get_main_organization %}
                        {% if main_organization %}
                            {% include "courses/cms/fragment_organization_main_logo.html" with organization=main_organization.public_extension %}
                        {% else %}
                            {% include "courses/cms/fragment_organization_main_logo.html" with organization=None %}
                        {% endif %}
                    {% endwith %}
                    {% endblock main_organization %}

                    {% block social_networks %}
                        {% include "social-networks/course-badges.html" with page_title=request.current_page.get_title page_url=request.current_page.get_absolute_url %}
                    {% endblock social_networks %}

                    {% block contact %}
                        <a href="#" class="subheader__cta">{% trans "Contact us" %}</a>
                    {% endblock contact %}
                </div>
            </div>
        </div>
        {% endif %}
        {% endwith %}
    {% endspaceless %}{% endblock subheader_content %}
</div>
{% endblock subheader %}



{% block content %}{% spaceless %}
{% with course=current_page.course header_level=2 %}
<div class="course-detail">
    {% if course %}

    <div class="course-detail__grid">
        <div class="course-detail__wrapper">

            <div class="course-detail__content">
                {% block snapshot %}
                {% if request.current_page.parent_page.course %}
                <div class="course-detail__snapshot">
                    <div class="course-detail__date">
                    {% blocktrans with creation_date=request.current_page.creation_date|date:"SHORT_DATE_FORMAT" %}
                        Archived on {{ creation_date }}
                    {% endblocktrans %}
                    </div>
                    <a href="{{ request.current_page.parent_page.get_absolute_url }}">{% trans "Go to current version" %}</a>
                </div>
                {% endif %}
                {% endblock snapshot %}

                {% block cover %}
                    {% get_placeholder_plugins "course_cover" as cover_plugins %}
                    <meta property="image" content="{% thumbnail cover_plugins.0.picture 300x170 crop upscale subject_location=cover_plugins.0.picture.subject_location %}" />
                    {% if current_page.publisher_is_draft %}
                    <div class="course-detail__block course-detail__cover">
                        <div class="course-detail__row">
                            <h2 class="course-detail__title">{% trans 'Glimpse cover' %}</h2>
                            {% if not cover_plugins %}
                                <p class="course-detail__empty">{% trans 'Add an image for course cover on its glimpse.' %}</p>
                            {% endif %}
                            {% blockplugin cover_plugins.0 %}
                            <img
                                src="{% thumbnail instance.picture 300x170 crop upscale subject_location=instance.picture.subject_location %}"
                                srcset="
                                {% thumbnail instance.picture 300x170 crop upscale subject_location=instance.picture.subject_location %} 300w
                                {% if instance.picture.width >= 600 %},{% thumbnail instance.picture 600x340 crop upscale subject_location=instance.picture.subject_location %} 600w{% endif %}
                                {% if instance.picture.width >= 900 %},{% thumbnail instance.picture 900x510 crop upscale subject_location=instance.picture.subject_location %} 900w{% endif %}
                                "
                                sizes="300px"
                                alt="{% if instance.picture.default_alt_text %}{{ instance.picture.default_alt_text }}{% else %}{% trans 'course cover image' %}{% endif %}"
                            />
                            {% endblockplugin %}
                        </div>
                    </div>
                    {% endif %}
                {% endblock cover %}

                {% block fragment_content %}
                <div class="course-detail__block course-detail__primary-group">
                    {% block skills %}
                        {% if current_page.publisher_is_draft or not current_page|is_empty_placeholder:"course_skills" %}
                        <div class="course-detail__row course-detail__skills">
                            <h2 class="course-detail__title">{% blocktrans context "course_detail__title" %}What you will learn{% endblocktrans %}</h2>
                            <p>{% trans "At the end of this course, you will be able to:" %}</p>
                            {% placeholder "course_skills" %}
                        </div>
                        {% endif %}
                    {% endblock skills %}

                    {% block description %}
                        {% if current_page.publisher_is_draft or not current_page|is_empty_placeholder:"course_description" %}
                        <div class="course-detail__row course-detail__description">
                            <h2 class="course-detail__title">{% blocktrans context "course_detail__title" %}Description{% endblocktrans %}</h2>
                            <div{% if current_page|is_empty_placeholder:'course_introduction' %} property="description"{% endif %}>
                                {% placeholder "course_description" %}
                            </div>
                        </div>
                        {% endif %}
                    {% endblock description %}

                    {% block format %}
                        {% if current_page.publisher_is_draft or not current_page|is_empty_placeholder:"course_format" %}
                            <section class="course-detail__row course-detail__format">
                                <h2 class="course-detail__title">{% blocktrans context "course_detail__title" %}Format{% endblocktrans %}</h2>
                                {% placeholder "course_format" or %}
                                <p>{% trans 'How is the course structured?' %}</p>
                                {% endplaceholder %}
                            </section>
                        {% endif %}
                    {% endblock format %}

                    {% block prerequisites %}
                        {% if current_page.publisher_is_draft or not current_page|is_empty_placeholder:"course_prerequisites" %}
                            <section class="course-detail__prerequisites course-detail__row course-detail__prerequisites">
                                <h2 class="course-detail__title">{% blocktrans context "course_detail__title" %}Prerequisites{% endblocktrans %}</h2>
                                <div property="coursePrerequisites">
                                {% placeholder "course_prerequisites" or %}
                                    <p>{% trans 'What are the prerequisites to follow this course?' %}</p>
                                {% endplaceholder %}
                                </div>
                            </section>
                        {% endif %}
                    {% endblock prerequisites %}

                    {% block assessment %}
                        {% if current_page.publisher_is_draft or not current_page|is_empty_placeholder:"course_assessment" %}
                        <section class="course-detail__row course-detail__assessment">
                            <h2 class="course-detail__title">{% blocktrans context "course_detail__title" %}Assessment and certification{% endblocktrans %}</h2>
                            {% placeholder "course_assessment" or %}
                                <p class="course-detail__assessment__placeholder">
                                    {% trans "How is progress evaluated and/or certified?" %}
                                </p>
                            {% endplaceholder %}
                        </section>
                        {% endif %}
                    {% endblock assessment %}
                </div>

                {% block plan %}
                    <div class="course-detail__block course-detail__secondary-group">
                        {% if current_page.publisher_is_draft or not current_page|is_empty_placeholder:"course_plan" %}
                        <section class="course-detail__row course-detail__plan">
                            <h2 class="course-detail__title">{% blocktrans context "course_detail__title" %}Course plan{% endblocktrans %}</h2>

                            {% placeholder "course_plan" or %}
                                <p class="course-detail__empty">{% trans 'Enter here the detailed course plan.' %}</p>
                            {% endplaceholder %}
                        </section>
                        {% endif %}
                    </div>
                {% endblock plan %}
                {% endblock fragment_content %}
            </div>

            {% block runs %}
                <div class="course-detail__aside" property="isAccessibleForFree" content="true">
                    {% with runs_dict=course.course_runs_dict %}
                        {% block runs_open %}
                            <div class="course-detail__row course-detail__runs course-detail__runs--open">
                                <h2 class="course-detail__title">
                                    {% blocktrans context "course_detail__title" %}Course runs{% endblocktrans %}
                                    {% render_model_add course "" "" "get_admin_url_to_add_run" %}
                                </h2>
                                {% for run in runs_dict.0|add:runs_dict.1|add:runs_dict.2 %}
                                    {% include "courses/cms/fragment_course_run.html" %}
                                {% empty %}
                                    <div class="course-detail__empty">{% trans "No open course runs" %}</div>
                                {% endfor %}
                            </div>
                        {% endblock runs_open %}

                        {% block runs_to_be_scheduled %}
                        {% if runs_dict.7 and current_page.publisher_is_draft %}
                            <div class="course-detail__row course-detail__runs course-detail__runs--to_be_scheduled">
                                <h3 class="course-detail__title">
                                    {% trans "To be scheduled" context "Course runs to be scheduled (plural)" %}
                                </h3>
                                {% include "courses/cms/fragment_course_runs_list.html" with course_runs=runs_dict.7 %}
                            </div>
                        {% endif %}
                        {% endblock runs_to_be_scheduled %}

                        {% block runs_upcoming %}
                        {% if runs_dict.3 %}
                            <div class="course-detail__row course-detail__runs course-detail__runs--upcoming">
                                <h3 class="course-detail__title">
                                    {% trans "Upcoming" context "Upcoming course runs (plural)" %}
                                </h3>
                                {% include "courses/cms/fragment_course_runs_list.html" with course_runs=runs_dict.3 %}
                            </div>
                        {% endif %}
                        {% endblock runs_upcoming %}

                        {% block runs_ongoing %}
                        {% if runs_dict.4 or runs_dict.5 %}
                            <div class="course-detail__row course-detail__runs course-detail__runs--ongoing">
                                <h3 class="course-detail__title">
                                    {% trans "Ongoing" context "Ongoing course runs (plural)" %}
                                </h3>
                                {% include "courses/cms/fragment_course_runs_list.html" with course_runs=runs_dict.4|add:runs_dict.5 %}
                            </div>
                        {% endif %}
                        {% endblock runs_ongoing %}

                        {% block runs_archived %}
                        {% if runs_dict.6 %}
                            <div class="course-detail__row course-detail__runs course-detail__runs--archived">
                                <h3 class="course-detail__title">
                                    {% trans "Archived" context "Archived course runs (plural)" %}
                                </h3>
                                {% include "courses/cms/fragment_course_runs_list.html" with course_runs=runs_dict.6 %}
                            </div>
                        {% endif %}
                        {% endblock runs_archived %}

                    {% endwith %}
                </div>
            {% endblock runs %}

        </div>
    </div>

    {% block fragment_relations %}
    <div class="course-detail__relations">
        {% block programs %}
            {% with programs=course.get_programs %}
                {% if programs %}
                    {% autopaginate programs GLIMPSE_PAGINATION_PROGRAMS %}
                    <div id="page{{ page_suffix }}" class="course-detail__programs course-detail__block">
                        <div class="course-detail__row">
                            <section class="course-glimpse-list">
                                <h2 class="course-detail__title">
                                    {% blocktrans count counter=programs|length %}
                                        This course is part of a program
                                    {% plural %}
                                        This course is part of programs
                                    {% endblocktrans %}
                                </h2>
                                <div class="section__items section__items--programs">
                                    {% for program in page_obj.object_list %}
                                        {% include "courses/cms/fragment_program_glimpse.html" with program=program %}
                                    {% endfor %}
                                </div>
                                {% if paginator.num_pages > 1 %}
                                    {% paginate using "richie/pagination.html" %}
                                {% endif %}
                            </section>
                        </div>
                    </div>
                {% endif %}
            {% endwith %}
        {% endblock programs %}

        {% block team %}
            {% if current_page.publisher_is_draft or not current_page|is_empty_placeholder:"course_team" %}
            <div class="course-detail__team course-detail__block course-detail__block--lightest">
                <section class="section course-detail__row course-detail__team">
                    <h2 class="course-detail__title">
                        {% blocktrans context "course_detail__title" %}Course team{% endblocktrans %}
                    </h2>
                    {% with header_level=3 %}
                        <div class="section__items section__items--team">
                            {% placeholder "course_team" page or %}
                                <p>{% trans 'Who are the teachers in the course team?' %}</p>
                            {% endplaceholder %}
                        </div>
                    {% endwith %}
                </section>
            </div>
            {% endif %}
        {% endblock team %}

        {% block organizations %}
            {% if current_page.publisher_is_draft or not current_page|is_empty_placeholder:"course_organizations" %}
            <div class="course-detail__organizations course-detail__block">
                <section class="section course-detail__row course-detail__organizations">
                    <h2 class="course-detail__title">
                        {% blocktrans context "course_detail__title" %}Organizations{% endblocktrans %}
                    </h2>
                    <div class="section__items section__items--organizations">
                        {% placeholder "course_organizations" or %}
                            <p class="course-detail__empty">
                                {% trans "What are the organizations publishing this course?" %}
                            </p>
                        {% endplaceholder %}
                    </div>
                </section>
            </div>
            {% endif %}
        {% endblock organizations %}

        {% block information %}
            {% if current_page.publisher_is_draft or not current_page|is_empty_placeholder:"course_information" %}
                <div class="course-detail__row course-detail__information">
                    {% placeholder "course_information" %}
                </div>
            {% endif %}
        {% endblock information %}

        {% block licenses %}
            <div class="course-detail__license course-detail__block course-detail__block--divider">
                <section class="course-detail__row">
                    <h2 class="course-detail__title">{% blocktrans context "course_detail__title" %}License{% endblocktrans %}</h2>

                    <div class="course-detail__item">
                        <h3 class="course-detail__label">{% trans 'License for the course content' %}</h3>
                        {% with header_level=4 %}
                            {% placeholder "course_license_content" page or %}
                                <p>{% trans 'What is the license for the course content?' %}</p>
                            {% endplaceholder %}
                        {% endwith %}
                    </div>

                    <div class="course-detail__item">
                        <h3 class="course-detail__label">{% trans 'License for the content created by course participants' %}</h3>
                        {% with header_level=4 is_license_property=False %}
                            {% placeholder "course_license_participation" page or %}
                                <p>{% trans 'What is the license for the content created by course participants?' %}</p>
                            {% endplaceholder %}
                        {% endwith %}
                    </div>
                </section>
            </div>
        {% endblock licenses %}
    </div>
    {% endblock fragment_relations %}

    {% else %}
        {% include "courses/cms/fragment_error_detail_template_banner.html" with model="course" %}
    {% endif %}
</div>
{% endwith %}
{% endspaceless %}{% endblock content %}
