## mako

<%page expression_filter="h"/>
<%namespace name='static' file='../static_content.html'/>

<%!
import json

from django.conf import settings
from django.utils.translation import ugettext as _
from django.template.defaultfilters import escapejs
from django.core.urlresolvers import reverse

from django_comment_client.permissions import has_permission
from openedx.core.djangolib.js_utils import dump_js_escaped_json, js_escaped_string
from openedx.core.djangolib.markup import HTML
from openedx.features.course_experience import UNIFIED_COURSE_TAB_FLAG, SHOW_REVIEWS_TOOL_FLAG
%>

<%block name="content">
<div class="course-view container" id="course-container">
    <header class="page-header has-secondary">
        <div class="page-header-main">
            <nav aria-label="${_('Course Outline')}" class="sr-is-focusable" tabindex="-1">
                <h2 class="hd hd-3 page-title">${course.display_name_with_default}</h2>
            </nav>
        </div>
        <div class="page-header-secondary">
            % if settings.FEATURES.get('ENABLE_COURSEWARE_SEARCH'):
                <div class="page-header-search">
                    <form class="search-form" role="search" action="${reverse('openedx.course_search.course_search_results', args=[course_key])}">
                        <label class="field-label sr-only" for="search" id="search-hint">${_('Search the course')}</label>
                        <input
                                class="field-input input-text search-input"
                                type="search"
                                name="query"
                                id="search"
                                placeholder="${_('Search the course')}"
                        />
                        <button class="btn btn-small search-button" type="submit">${_('Search')}</button>
                    </form>
                </div>
            % endif
            <div class="form-actions">
                % if resume_course_url:
                    <a class="btn btn-brand action-resume-course" href="${resume_course_url}">
                        % if has_visited_course:
                            <span data-action-type="resume">${_("Resume Course")}</span>
                        % else:
                            <span data-action-type="start">${_("Start Course")}</span>
                        % endif
                    </a>
                % endif
            </div>
        </div>
    </header>
    <div class="page-content">
        <div class="layout layout-1t2t">
            <main class="layout-col layout-col-b">

                % if upgrade_url and upgrade_price:
                    <div class="section">
                        <div class="vc-message tex2jax_ignore" role="group" aria-labelledby="vc-title" tabindex="-1" style="display: none;">

                            <h3 class="vc-title vc-fade vc-polite-only">Pursue a verified certificate</h3>

                            <button class="vc-toggle vc-fade vc-polite-only btn-link" type="button" aria-controls="moreinfo"
                                    aria-expanded="true" aria-label="${_("Show/Hide")}">
                                ${_("Show less")}
                            </button>

                            <div class="vc-hero vc-fade">
                                <img src="${static.url('course_experience/images/verified-cert.png')}"
                                     alt="${_("Sample verified certificate with your name, the course title, the logo of the institution and the signatures of the instructors for this course.")}"/>
                            </div>

                            <ul class="vc-selling-points vc-fade">
                                <li class="vc-selling-point">${_("Official proof of completion")}</li>
                                <li class="vc-selling-point">${_("Easily shareable certificate")}</li>
                                <li class="vc-selling-point">${_("Proven motivator to complete the course")}</li>
                                <li class="vc-selling-point">${_("Certificate purchases help us continue to offer free courses")}</li>
                            </ul>

                            <div class="vc-cta vc-fade vc-polite-only">
                                <a class="btn-upgrade"
                                   href="${ upgrade_url }"
                                   data-creative="hero_matthew_smith"
                                   data-position="hero">${_("Upgrade ({price})").format(price=upgrade_price)}</a>
                            </div>
                        </div>
                    </div>
                % endif

                % if course_home_message_fragment:
                    ${HTML(course_home_message_fragment.body_html())}
                % endif

                % if update_message_fragment and UNIFIED_COURSE_TAB_FLAG.is_enabled(course.id):
                    <div class="section section-update-message">
                        ${HTML(update_message_fragment.body_html())}
                    </div>
                % endif

                % if outline_fragment:
                    ${HTML(outline_fragment.body_html())}
                % endif
            </main>
            <aside class="course-sidebar layout-col layout-col-a">
                % if course_tools:
                    <div class="section section-tools">
                        <h3 class="hd-6">${_("Course Tools")}</h3>
                        <ul class="list-unstyled">
                            % for course_tool in course_tools:
                                <li>
                                    <a class="course-tool-link" data-analytics-id="${course_tool.analytics_id()}" href="${course_tool.url(course_key)}">
                                        <span class="icon ${course_tool.icon_classes()}" aria-hidden="true"></span>
                                        ${course_tool.title()}
                                    </a>
                                </li>
                            % endfor
                        </ul>
                    </div>
                % endif
                % if dates_fragment:
                    <div class="section section-dates">
                        ${HTML(dates_fragment.body_html())}
                    </div>
                % endif
                % if handouts_html:
                    <div class="section section-handouts">
                        <h3 class="hd-6">${_("Course Handouts")}</h3>
                        ${HTML(handouts_html)}
                    </div>
                % endif
            </aside>
        </div>
    </div>
    % if course_sock_fragment:
        ${HTML(course_sock_fragment.body_html())}
    % endif
</div>
</%block>

<%static:webpack entry="CourseHome">
    new CourseHome({
        courseRunKey: "${course_key | n, js_escaped_string}",
        resumeCourseLink: ".action-resume-course",
        courseToolLink: ".course-tool-link",
    });
</%static:webpack>

<%static:webpack entry="Enrollment">
    new CourseEnrollment('.enroll-btn', '${course_key | n, js_escaped_string}');
</%static:webpack>
