cms/templates/settings.html - release-ulmo - githubmirror/edx-platform

cms/templates/settings.html
723 строки41 KB
Deborah Kaplan
feat!: removes deprecated v1 certificate behavior (#35562)
02 окт 2024, 19:06
02 окт 2024, 19:068c923be
<%page expression_filter="h"/>
<%inherit file="base.html" />
<%def name="online_help_token()"><% return "schedule" %></%def>
<%block name="title">${_("Schedule & Details Settings")}</%block>
<%block name="bodyclass">is-signedin course schedule view-settings feature-upload</%block>

<%namespace name='static' file='static_content.html'/>
<%!
  from django.utils.translation import gettext as _
  from common.djangoapps.student.auth import has_studio_advanced_settings_access
  from cms.djangoapps.contentstore import utils
  from lms.djangoapps.certificates.api import can_show_certificate_available_date_field
  from openedx.core.djangolib.js_utils import (
      dump_js_escaped_json, js_escaped_string
  )
  from openedx.core.djangolib.markup import HTML, Text
  from six.moves.urllib.parse import quote
  from six.moves.urllib import parse as urllib
%>

<%block name="header_extras">
% for template_name in ["basic-modal", "modal-button", "upload-dialog", "license-selector", "course-settings-learning-fields", "course-instructor-details"]:
  <script type="text/template" id="${template_name}-tpl">
    <%static:include path="js/${template_name}.underscore" />
  </script>
% endfor
</%block>

<%block name="jsextra">
  <link rel="stylesheet" type="text/css" href="${static.url('js/vendor/timepicker/jquery.timepicker.css')}" />

  <script type="text/javascript">
window.CMS = window.CMS || {};
CMS.URL = CMS.URL || {};
CMS.URL.UPLOAD_ASSET = '${upload_asset_url | n, js_escaped_string}'
  </script>
</%block>

<%block name="requirejs">
    require(["js/factories/settings"], function(SettingsFactory) {
        SettingsFactory(
            "${details_url | n, js_escaped_string}",
            ${show_min_grade_warning | n, dump_js_escaped_json},
            ${can_show_certificate_available_date_field(context_course) | n, dump_js_escaped_json},
            "${upgrade_deadline | n, js_escaped_string}",
        );
    });
</%block>

<%block name="content">
<div class="wrapper-mast wrapper">
  <header class="mast has-subtitle">
    <h1 class="page-header">
      <small class="subtitle">${_("Settings")}</small>
      <span class="sr">&gt; </span>${_("Schedule & Details")}
    </h1>
  </header>
</div>

<div class="wrapper-content wrapper">
  <div class="content">
    <div class="content-primary">
      <form id="settings_details" class="settings-details" method="post" action="">
        <div class="group-settings basic">
          <header>
            <h2 class="title-2">${_("Basic Information")}</h2>
            <span class="tip">${_("The nuts and bolts of your course")}</span>
          </header>

          <ol class="list-input">
            <li class="field text is-not-editable" id="field-course-organization">
              <label for="course-organization">${_("Organization")}</label>
              <input title="${_('This field is disabled: this information cannot be changed.')}" type="text"
                class="long" id="course-organization" readonly />
            </li>

            <li class="field text is-not-editable" id="field-course-number">
              <label for="course-number">${_("Course Number")}</label>
              <input title="${_('This field is disabled: this information cannot be changed.')}" type="text"
                class="short" id="course-number" readonly>
            </li>

            <li class="field text is-not-editable" id="field-course-name">
              <label for="course-name">${_("Course Run")}</label>
              <input title="${_('This field is disabled: this information cannot be changed.')}" type="text"
                class="long" id="course-name" readonly />
            </li>
          </ol>

          % if not marketing_enabled:
          <div class="note note-promotion note-promotion-courseURL has-actions">
            <h3 class="title">${_("Course Summary Page")} <span class="tip">${_("(for student enrollment and access)")}</span></h3>
            <div class="copy">
              <%
                link_for_about_page = lms_link_for_about_page
              %>
              <p><a class="link-courseURL" rel="external" href="${link_for_about_page}">${link_for_about_page}</a></p>
            </div>

            <ul class="list-actions">
              <li class="action-item">
                <%
                  email_subject = urllib.quote(_("Enroll in {course_display_name}").format(
                      course_display_name = context_course.display_name_with_default
                  ).encode("utf-8"))
                  email_body = urllib.quote(_('The course "{course_display_name}", provided by {platform_name}, is open for enrollment. Please navigate to this course at {link_for_about_page} to enroll.').format(
                      course_display_name = context_course.display_name_with_default,
                      platform_name = settings.PLATFORM_NAME,
                      link_for_about_page = link_for_about_page
                  ).encode("utf-8"))
                %>
                <a title="${_('Send a note to students via email')}"
                    href="mailto:someone@domain.com?Subject=${email_subject}&body=${email_body}" class="action action-primary">
                    <span class="icon fa fa-envelope-o icon-inline" aria-hidden="true"></span>${_("Invite your students")}</a>
              </li>
            </ul>
          </div>
          % endif

          % if marketing_enabled:
          <div class="notice notice-incontext notice-workflow">
            <h3 class="title">${_("Promoting Your Course with {platform_name}").format(platform_name=settings.PLATFORM_NAME)}</h3>
            <div class="copy">
              <p>${_(
                'Your course summary page will not be viewable until your course '
                'has been announced. To provide content for the page and preview '
                'it, follow the instructions provided by your Program Manager.')}
                ${_(
                'Please note that changes here may take up to a business day to '
                'appear on your course summary page.')}
              </p>
            </div>
          </div>
          % endif
        </div>
        <hr class="divide" />

        % if credit_eligibility_enabled and is_credit_course:
          <div class="group-settings basic">
            <header>
              <h2 class="title-2">${_("Course Credit Requirements")}</h2>
              <span class="tip">${_("Steps required to earn course credit")}</span>
            </header>
            <span class="header-help tip">A requirement appears in this list when you publish the unit that contains the requirement.</span>

              % if credit_requirements:
                <ol class="list-input">
                  % if 'grade' in credit_requirements:
                    <li class="field text is-not-editable" id="credit-minimum-passing-grade">
                      <label>${_("Minimum Grade")}</label>
                        % for requirement in credit_requirements['grade']:
                          <label for="${requirement['name']}" class="sr">${_("Minimum Grade")}</label>
                          <input title="${_('This field is disabled: this information cannot be changed.')}" type="text"
                              class="long" id="${requirement['name']}" value="${'{0:.0f}%'.format(float(requirement['criteria']['min_grade'] or 0)*100)}" readonly />
                        % endfor
                    </li>
                  % endif

                  % if 'proctored_exam' in credit_requirements:
                    <li class="field text is-not-editable" id="credit-proctoring-requirements">
                      <label>${_("Successful Proctored Exam")}</label>
                        % for requirement in credit_requirements['proctored_exam']:
                          <label for="${requirement['name']}" class="sr">${_('Proctored Exam {number}').format(number=loop.index+1)}</label>
                          <input title="${_('This field is disabled: this information cannot be changed.')}" type="text"
                              class="long" id="${requirement['name']}" value="${requirement['display_name']}" readonly />
                        % endfor
                    </li>
                  % endif

                  % if 'reverification' in credit_requirements:
                    <li class="field text is-not-editable" id="credit-reverification-requirements">
                      <label>${_("ID Verification")}</label>
                        % for requirement in credit_requirements['reverification']:
                          <label for="${requirement['name']}" class="sr">${_('In-Course Reverification {number}').format(number=loop.index+1)}</label>
                          <input title="${_('This field is disabled: this information cannot be changed.')}" type="text"
                              class="long" id="${requirement['name']}" value="${requirement['display_name']}" readonly />
                        % endfor
                    </li>
                  % endif
                </ol>
              % else:
                <p>No credit requirements found.</p>
              % endif
          </div>
          <hr class="divide" />
        % endif

        <div class="group-settings pacing">
          <fieldset role="radiogroup">
            <legend>
              <header>
                <h2 class="title-2">${_("Course Pacing")}</h2>
                <span class="tip">${_("Set the pacing for this course")}</span>
              </header>
            </legend>
            <span class="msg" id="course-pace-toggle-tip"></span>

            <ol class="list-input">
                <li class="field">
                  <input type="radio" class="field-radio" name="self-paced" id="course-pace-instructor-paced" value="false" aria-labelledby="course-pace-instructor-label" />
                  <label id="course-pace-instructor-label" class="course-pace-label" for="course-pace-instructor-paced">${_("Instructor-Paced")}</label>
                  <span class="tip">${_("Instructor-paced courses progress at the pace that the course author sets. You can configure release dates for course content and due dates for assignments.")}</span>
                </li>
                <li class="field">
                  <input type="radio" class="field-radio" name="self-paced" id="course-pace-self-paced" value="true" aria-labelledby="course-pace-self-paced-label"/>
                  <label id="course-pace-self-paced-label" class="course-pace-label" for="course-pace-self-paced">${_("Self-Paced")}</label>
                  <span class="tip">${_("Self-paced courses offer suggested due dates for assignments or exams based on the learner’s enrollment date and the expected course duration. These courses offer learners flexibility to modify the assignment dates as needed.")}</span>
                </li>
            </ol>
          </fieldset>
        </div>

        <hr class="divide" />

        <div id="schedule" class="group-settings schedule">
          <header>
            <h2 class="title-2">${_('Course Schedule')}</h2>
            <span class="tip">${_('Dates that control when your course can be viewed')}</span>
          </header>

          <ol class="list-input">
            <li class="field-group field-group-course-start" id="course-start">
              <div class="field date" id="field-course-start-date">
                <label for="course-start-date">${_("Course Start Date")}</label>
                <input type="text" class="start-date date start datepicker" id="course-start-date" placeholder="MM/DD/YYYY" autocomplete="off" />
                <span class="icon icon-inline fa fa-calendar-check-o datepicker-icon" aria-hidden="true"></span>
                <span class="tip tip-stacked">${_("First day the course begins")}</span>
              </div>

              <div class="field time" id="field-course-start-time">
                <label for="course-start-time">${_("Course Start Time")}</label>
                <input type="text" class="time start timepicker" id="course-start-time" value="" placeholder="HH:MM" autocomplete="off" />
                <span class="tip tip-stacked timezone">${_("(UTC)")}</span>
              </div>
            </li>

            <li class="field-group field-group-course-end" id="course-end">
              <div class="field date" id="field-course-end-date">
                <label for="course-end-date">${_("Course End Date")}</label>
                <input type="text" class="end-date date end" id="course-end-date" placeholder="MM/DD/YYYY" autocomplete="off" />
                <span class="icon icon-inline fa fa-calendar-check-o datepicker-icon" aria-hidden="true"></span>
                <span class="tip tip-stacked">${_("Last day your course is active")}</span>
              </div>

              <div class="field time" id="field-course-end-time">
                <label for="course-end-time">${_("Course End Time")}</label>
                <input type="text" class="time end" id="course-end-time" value="" placeholder="HH:MM" autocomplete="off" />
                <span class="tip tip-stacked timezone">${_("(UTC)")}</span>
              </div>
            </li>
          </ol>

          % if can_show_certificate_available_date_field(context_course):
          <ol class="list-input">
            <li class="field-group field-group-certificate-available" id="certificate-available">
              <div class="field date" id="field-certificates-display-behavior">
                <label for="certificates-display-behavior">${_("Certificates Display Behavior")}</label>
                <select id="certificates-display-behavior">
                  <option value="early_no_info">${_("Immediately upon passing")}</option>
                  <option value="end">${_("End date of course")}</option>
                  <option value="end_with_date">${_("A date after the course end date")}</option>
                </select>
                <span class="tip tip-stacked">${_("Certificates are awarded at the end of a course run")}</span>

                <!-- Collapsible -->
                <div class="collapsible">
                  <div id="certificate-display-behavior-collapsible-trigger" class="collapsible-trigger" role="button" tabindex="0" aria-expanded="false">
                    <span>
                      <span class="icon icon-inline fa fa-info-circle" aria-hidden="true"></span>
                      ${_("Read more about this setting")}
                    </span>
                  </div>
                  <div id="certificate-display-behavior-collapsible-content" class="collapsible-content collapsed">
                    <p>${_("In all configurations of this setting, certificates are generated for learners as soon as they achieve the passing threshold in the course (which can occur before a final assignment based on course design)")}</p>
                    <div>
                      <div class="collapsible-description-heading">${_("Immediately upon passing")}</div>
                      <div class="collapsible-description-description">${_("Learners can access their certificate as soon as they achieve a passing grade above the course grade threshold. Note: learners can achieve a passing grade before encountering all assignments in some course configurations.")}</div>
                    </div>
                    <div>
                      <div class="collapsible-description-heading">${_("On course end date")}</div>
                      <div class="collapsible-description-description">${_("Learners with passing grades can access their certificate once the end date of the course has elapsed.")}</div>
                    </div>
                    <div>
                      <div class="collapsible-description-heading">${_("A date after the course end date")}</div>
                      <div class="collapsible-description-description">${_("Learners with passing grades can access their certificate after the date that you set has elapsed.")}</div>
                    </div>
                  </div>
                </div>
              </div>

              <div class="field date hidden" id="field-certificate-available-date" >
                <label for="certificate-available-date">${_("Certificates Available Date")}</label>
                <input type="text" class="certificate-available-date date start datepicker" id="certificate-available-date" placeholder="MM/DD/YYYY" autocomplete="off" />
                <span class="icon icon-inline fa fa-calendar-check-o datepicker-icon" aria-hidden="true"></span>
              </div>
            </li>
          </ol>
          % endif

          <ol class="list-input">
            <li class="field-group field-group-enrollment-start" id="enrollment-start">
              <div class="field date" id="field-enrollment-start-date">
                <label for="course-enrollment-start-date">${_("Enrollment Start Date")}</label>
                <input type="text" class="start-date date start" id="course-enrollment-start-date" placeholder="MM/DD/YYYY" autocomplete="off" />
                <span class="icon icon-inline fa fa-calendar-check-o datepicker-icon" aria-hidden="true"></span>
                <span class="tip tip-stacked">${_("First day students can enroll")}</span>
              </div>

              <div class="field time" id="field-enrollment-start-time">
                <label for="course-enrollment-start-time">${_("Enrollment Start Time")}</label>
                <input type="text" class="time start" id="course-enrollment-start-time" value="" placeholder="HH:MM" autocomplete="off" />
                <span class="tip tip-stacked timezone">${_("(UTC)")}</span>
              </div>
            </li>
            <%
              enrollment_end_readonly = HTML("readonly aria-readonly=\"true\"") if not enrollment_end_editable else ""
              enrollment_end_editable_class = "is-not-editable" if not enrollment_end_editable else ""
            %>
            <li class="field-group field-group-enrollment-end" id="enrollment-end">
              <div class="field date ${enrollment_end_editable_class}" id="field-enrollment-end-date">
                <label for="course-enrollment-end-date">${_("Enrollment End Date")}</label>
                <input type="text" class="end-date date end" id="course-enrollment-end-date" placeholder="MM/DD/YYYY" autocomplete="off" ${enrollment_end_readonly} />
                <span class="icon icon-inline fa fa-calendar-check-o datepicker-icon" aria-hidden="true"></span>
                <span class="tip tip-stacked">
                  ${_("Last day students can enroll.")}
                % if not enrollment_end_editable:
                  ${_("Contact your {platform_name} partner manager to update these settings.").format(platform_name=settings.PLATFORM_NAME)}
                % endif
                </span>
              </div>

              <div class="field time ${enrollment_end_editable_class}" id="field-enrollment-end-time">
                <label for="course-enrollment-end-time">${_("Enrollment End Time")}</label>
                <input type="text" class="time end" id="course-enrollment-end-time" value="" placeholder="HH:MM" autocomplete="off" ${enrollment_end_readonly} />
                <span class="tip tip-stacked timezone">${_("(UTC)")}</span>
              </div>
            </li>
          </ol>

          % if upgrade_deadline:
          <ol class="list-input">
            <li class="field-group field-group-upgrade-deadline" id="upgrade-deadline">
              <div class="field date is-not-editable" id="field-upgrade-deadline-date">
                <label for="course-upgrade-deadline-date">${_("Upgrade Deadline Date")}</label>
                <input type="text" class="date upgrade-deadline" id="course-upgrade-deadline-date" placeholder="MM/DD/YYYY" autocomplete="off" readonly aria-readonly="true" />
                <span class="tip tip-stacked">
                  ${_("Last day students can upgrade to a verified enrollment.")}
                  ${_("Contact your {platform_name} partner manager to update these settings.").format(platform_name=settings.PLATFORM_NAME)}
                </span>
              </div>

              <div class="field time is-not-editable" id="field-upgrade-deadline-time">
                <label for="course-upgrade-deadline-time">${_("Upgrade Deadline Time")}</label>
                <input type="text" class="time upgrade-deadline" id="course-upgrade-deadline-time" placeholder="HH:MM" autocomplete="off" readonly aria-readonly="true" />
                <span class="tip tip-stacked timezone">${_("(UTC)")}</span>
              </div>
            </li>
          </ol>
          % endif
        </div>

        % if about_page_editable:
        <div class="group-settings course_details">
          <header>
            <h2 class="title-2">${_('Course Details')}</h2>
            <span class="tip">${_('Provide useful information about your course')}</span>
          </header>
          <ol class="list-input">
            <li class="field" id="field-course-language">
              <label for="course-language">${_("Course Language")}</label>
              <select id="course-language">
                <option value="" selected> - </option>
                % for lang, label in language_options:
                  <option value="${lang}">${label}</option>
                % endfor
              </select>
              <span class="tip tip-stacked">${_("Identify the course language here. This is used to assist users find courses that are taught in a specific language. It is also used to localize the 'From:' field in bulk emails.")}</span>
            </li>
          </ol>
        </div>
        % endif

        <hr class="divide" />
            <div class="group-settings marketing">

              % if about_page_editable:
              <header>
                <h2 class="title-2">${_("Introducing Your Course")}</h2>
                <span class="tip">${_("Information for prospective students")}</span>
              </header>
              % endif

              <ol class="list-input">

                % if enable_extended_course_details:
                <li class="field text" id="field-course-title">
                  <label for="course-title">${_("Course Title")}</label>
                  <input type="text" id="course-title" data-display-name="${context_course.display_name}">
                  <span class="tip tip-stacked">${_("Displayed as title on the course details page. Limit to 50 characters.")}</span>
                </li>
                <li class="field text" id="field-course-subtitle">
                  <label for="course-subtitle">${_("Course Subtitle")}</label>
                  <input type="text" id="course-subtitle">
                  <span class="tip tip-stacked">${_("Displayed as subtitle on the course details page. Limit to 150 characters.")}</span>
                </li>
                <li class="field text" id="field-course-duration">
                  <label for="course-duration">${_("Course Duration")}</label>
                  <input type="text" id="course-duration">
                  <span class="tip tip-stacked">${_("Displayed on the course details page. Limit to 50 characters.")}</span>
                </li>
                <li class="field text" id="field-course-description">
                  <label for="course-description">${_("Course Description")}</label>
                  <textarea class="text" id="course-description"></textarea>
                  <span class="tip tip-stacked">${_("Displayed on the course details page. Limit to 1000 characters.")}</span>
                </li>
                % endif

                % if short_description_editable:
                <li class="field text" id="field-course-short-description">
                  <label for="course-short-description">${_("Course Short Description")}</label>
                  <textarea class="text" id="course-short-description"></textarea>
                  <span class="tip tip-stacked">${_("Appears on the course catalog page when students roll over the course name. Limit to ~150 characters")}</span>
                </li>
                % endif

                % if about_page_editable:
                <li class="field text" id="field-course-overview">
                  <label for="course-overview">${_("Course Overview")}</label>
                  <textarea class="tinymce text-editor" id="course-overview"></textarea>
                  <label class="sr" for="course-overview-cm-textarea">
                    ${_('HTML Code Editor')}
                  </label>
                  <span class="tip tip-stacked">${
                    Text(_("Introductions, prerequisites, FAQs that are used on {a_link_start}your course summary page{a_link_end} (formatted in HTML)")).format(
                      a_link_start=HTML("<a class='link-courseURL' rel='external' href='{lms_link_for_about_page}'>").format(lms_link_for_about_page=lms_link_for_about_page),
                      a_link_end=HTML("</a>")
                    )}</span>
                </li>
                  % if sidebar_html_enabled:
                  <li class="field text" id="field-course-about-sidebar-html">
                      <label for="course-about-sidebar-html">${_("Course About Sidebar HTML")}
                          <textarea class="tinymce text-editor" id="course-about-sidebar-html" aria-describedby="tip-course-about-sidebar-html"></textarea>
                      </label>
                      <span class="tip tip-stacked" id="tip-course-about-sidebar-html">${
                      Text(_("Custom sidebar content for {a_link_start}your course summary page{a_link_end} (formatted in HTML)")).format(
                        a_link_start=HTML("<a class='link-courseURL' rel='external' href='{lms_link_for_about_page}'>").format(lms_link_for_about_page=lms_link_for_about_page),
                        a_link_end=HTML("</a>")
                      )}</span>
                  </li>
                  % endif
                % endif

                % if about_page_editable:
                <li class="field image" id="field-course-image">
                  <label for="course-image-url">${_("Course Card Image")}</label>
                  <div class="current current-course-image">
                    % if context_course.course_image:
                    <span class="wrapper-course-image">
                      <img class="course-image" id="course-image" src="${course_image_url}" alt="${_('Course Card Image')}"/>
                    </span>

                    <span class="msg msg-help">
                    ${Text(_("You can manage this image along with all of your other {a_link_start}files and uploads{a_link_end}")).format(
                      a_link_start=HTML("<a href='{upload_asset_url}'>").format(upload_asset_url=upload_asset_url),
                      a_link_end=HTML("</a>")
                      )}
                    </span>

                    % else:
                    <span class="wrapper-course-image">
                      <img class="course-image placeholder" id="course-image" src="${course_image_url}" alt="${_('Course Card Image')}"/>
                    </span>
                    <span class="msg msg-empty">${_("Your course currently does not have an image. Please upload one (JPEG or PNG format, and minimum suggested dimensions are 375px wide by 200px tall)")}</span>
                    % endif
                  </div>

                  <div class="wrapper-input">
                    <div class="input">
                      ## Translators: This is the placeholder text for a field that requests the URL for a course image
                      <input type="text" dir="ltr" class="long new-course-image-url" id="course-image-url" value="" placeholder="${_("Your course image URL")}" autocomplete="off" />
                      <span class="tip tip-stacked">${_("Please provide a valid path and name to your course image (Note: only JPEG or PNG format supported)")}</span>
                    </div>
                    <button type="button" class="action action-upload-image" id="upload-course-image">${_("Upload Course Card Image")}</button>
                  </div>
                </li>
                % endif

                % if enable_extended_course_details:
                <li class="field image" id="field-banner-image">
                  <label for="banner-image-url">${_("Course Banner Image")}</label>
                  <div class="current current-course-image">
                    % if context_course.banner_image:
                    <span class="wrapper-course-image">
                      <img class="course-image" id="banner-image" src="${banner_image_url}" alt="${_('Course Banner Image')}"/>
                    </span>

                    <span class="msg msg-help">
                    ${Text(_("You can manage this image along with all of your other {a_link_start}files and uploads{a_link_end}")).format(
                      a_link_start=HTML("<a href='{upload_asset_url}'>").format(upload_asset_url=upload_asset_url),
                      a_link_end=HTML("</a>")
                      )}
                    </span>

                    % else:
                    <span class="wrapper-course-image">
                      <img class="course-image placeholder" id="banner-image" src="${banner_image_url}" alt="${_('Course Banner Image')}"/>
                    </span>
                    <span class="msg msg-empty">${_("Your course currently does not have an image. Please upload one (JPEG or PNG format, and minimum suggested dimensions are 1440px wide by 400px tall)")}</span>
                    % endif
                  </div>

                  <div class="wrapper-input">
                    <div class="input">
                      ## Translators: This is the placeholder text for a field that requests the URL for a course banner image
                      <input type="text" dir="ltr" class="long new-course-image-url" id="banner-image-url" value="" placeholder="${_("Your banner image URL")}" autocomplete="off" />
                      <span class="tip tip-stacked">${_("Please provide a valid path and name to your banner image (Note: only JPEG or PNG format supported)")}</span>
                    </div>
                    <button type="button" class="action action-upload-image" id="upload-banner-image">${_("Upload Course Banner Image")}</button>
                  </div>
                </li>

                <li class="field image" id="field-video-thumbnail-image">
                  <label for="video-thumbnail-image-url">${_("Course Video Thumbnail Image")}</label>
                  <div class="current current-course-image">
                    % if context_course.video_thumbnail_image:
                    <span class="wrapper-course-image">
                      <img class="course-image" id="video-thumbnail-image" src="${video_thumbnail_image_url}" alt="${_('Video Thumbnail Image')}"/>
                    </span>

                    <span class="msg msg-help">
                    ${Text(_("You can manage this image along with all of your other {a_link_start}files and uploads{a_link_end}")).format(
                      a_link_start=HTML("<a href='{upload_asset_url}'>").format(upload_asset_url=upload_asset_url),
                      a_link_end=HTML("</a>")
                      )}
                    </span>

                    % else:
                    <span class="wrapper-course-image">
                      <img class="course-image placeholder" id="video-thumbnail-image" src="${video_thumbnail_image_url}" alt="${_('Video Thumbnail Image')}"/>
                    </span>
                    <span class="msg msg-empty">${_("Your course currently does not have a video thumbnail image. Please upload one (JPEG or PNG format, and minimum suggested dimensions are 375px wide by 200px tall)")}</span>
                    % endif
                  </div>

                  <div class="wrapper-input">
                    <div class="input">
                      ## Translators: This is the placeholder text for a field that requests the URL for a course video thumbnail image
                      <input type="text" dir="ltr" class="long new-course-image-url" id="video-thumbnail-image-url" value="" placeholder="${_("Your video thumbnail image URL")}" autocomplete="off" />
                      <span class="tip tip-stacked">${_("Please provide a valid path and name to your video thumbnail image (Note: only JPEG or PNG format supported)")}</span>
                    </div>
                    <button type="button" class="action action-upload-image" id="upload-video-thumbnail-image">${_("Upload Video Thumbnail Image")}</button>
                  </div>
                </li>
                % endif

                % if about_page_editable:
                <li class="field video" id="field-course-introduction-video">
                  <label for="course-introduction-video">${_("Course Introduction Video")}</label>
                  <div class="input input-existing">
                    <div class="current current-course-introduction-video">
                      <iframe width="618" height="350" title="${_('Course Introduction Video')}" src="" frameborder="0" allowfullscreen></iframe>
                    </div>
                    <div class="actions">
                      <a href="#" class="remove-item remove-course-introduction-video remove-video-data"><span class="delete-icon"></span>${_("Delete Current Video")}</a>
                    </div>
                  </div>

                  <div class="input">
                    ## Translators: This is the placeholder text for a field that requests a YouTube video ID for a course video
                    <input type="text"  dir="ltr" class="long new-course-introduction-video add-video-data" id="course-introduction-video" value="" placeholder="${_("your YouTube video's ID")}" autocomplete="off" />
                    <span class="tip tip-stacked">${_("Enter your YouTube video's ID (along with any restriction parameters)")}</span>
                  </div>
                </li>
                  % endif
              </ol>
            </div>

          % if enable_extended_course_details:
            <hr class="divide" />
            <div class="group-settings course-learning-info">
              <header>
                <h2 class="title-2">${_("Learning Outcomes")}</h2>
                <span class="tip">${_("Add the learning outcomes for this course")}</span>
              </header>
              <ol class="list-input enum">
                <li class="course-settings-learning-fields"></li>
              </ol>
              <div class="actions">
                <button type="button" class="action action-primary button new-button add-course-learning-info">
                  <span class="icon fa fa-plus icon-inline" aria-hidden="true"></span>${_("Add Learning Outcome")}
                </button>
              </div>
            </div>

            <hr class="divide" />
            <div class="group-settings instructor-types">
              <header>
                <h2 class="title-2">${_("Instructors")}</h2>
                <span class="tip">${_("Add details about the instructors for this course")}</span>
              </header>
              <ol class="list-input enum">
                <li class="course-instructor-details-fields"></li>
              </ol>
              <div class="actions">
                <button type="button" class="action action-primary button new-button add-course-instructor-info">
                  <span class="icon fa fa-plus icon-inline" aria-hidden="true"></span>${_("Add Instructor")}
                </button>
              </div>
            </div>
          % endif

          % if about_page_editable or is_prerequisite_courses_enabled or is_entrance_exams_enabled:
            <hr class="divide" />

            <div class="group-settings requirements">
              <header>
                <h2 class="title-2">${_("Requirements")}</h2>
                <span class="tip">${_("Expectations of the students taking this course")}</span>
              </header>

              <ol class="list-input">
                % if about_page_editable:
                <li class="field text" id="field-course-effort">
                  <label for="course-effort">${_("Hours of Effort per Week")}</label>
                  <input type="text" class="short time" id="course-effort" placeholder="HH:MM" />
                  <span class="tip tip-inline">${_("Time spent on all course work")}</span>
                </li>
                % endif
                % if is_prerequisite_courses_enabled:
                <li class="field field-select" id="field-pre-requisite-course">
                    <label for="pre-requisite-course">${_("Prerequisite Course")}</label>
                    <select class="input" id="pre-requisite-course">
                        <option value="">${_("None")}</option>
                        % for course_info in sorted(possible_pre_requisite_courses, key=lambda s: s['display_name'].lower() if s['display_name'] is not None else ''):
                        <option value="${course_info['course_key']}">${course_info['display_name']}</option>
                        % endfor
                    </select>
                    <span class="tip tip-inline">${_("Course that students must complete before beginning this course")}</span>
                    <button type="submit" class="sr" name="submit" value="submit">${_("set pre-requisite course")}</button>
                </li>
                % endif
                % if is_entrance_exams_enabled:
                <li>
                    <h3 id="heading-entrance-exam">${_("Entrance Exam")}</h3>
                    <div class="show-data">
                        <div class="heading">
                            <input type="checkbox" id="entrance-exam-enabled" />
                            <label for="entrance-exam-enabled">${_("Require students to pass an exam before beginning the course.")}</label>
                        </div>
                         <div class="div-grade-requirements" hidden="hidden">
                          <p><span class="tip tip-inline">
                            ${Text(_("You can now view and author your course entrance exam from the {link_start}Course Outline{link_end}.")).format(
                              link_start=HTML("<a href='{course_handler_url}'>").format(course_handler_url=course_handler_url),
                              link_end=HTML("</a>")
                            )}</span></p>
                          <p><h3>${_("Grade Requirements")}</h3></p>
                          <p><div><input type="text" id="entrance-exam-minimum-score-pct" aria-describedby="min-score-format"><span id="min-score-format" class="tip tip-inline">${_(" %")}</span></div></p>
                          <p><span class="tip tip-inline">${_("The score student must meet in order to successfully complete the entrance exam. ")}</span></p>
                        </div>
                    </div>
                </li>
                % endif
              </ol>
            </div>
          % endif

          % if settings.FEATURES.get("LICENSING", False):
            <hr class="divide" />

            <div class="group-settings license">
              <header>
                <h2 class="title-2">${_("Course Content License")}</h2>
                ## Translators: At the course settings, the editor is able to select the default course content license.
                ## The course content will have this license set, some assets can override the license with their own.
                ## In the form, the license selector for course content is described using the following string:
                <span class="tip">${_("Select the default license for course content")}</span>
              </header>

              <ol class="list-input">
                <li class="field text" id="field-course-license">
                  <div id="course-license-selector"></div>
                </li>
              </ol>
            </div>
          % endif
      </form>
    </div>
    <div class="content-supplementary" role="complementary">
     <div class="bit">
        <h3 class="title-3">${_("How are these settings used?")}</h3>
        <p>${_("Your course's schedule determines when students can enroll in and begin a course.")}</p>

        <p>${_("Other information from this page appears on the About page for your course. This information includes the course overview, course image, introduction video, and estimated time requirements. Students use About pages to choose new courses to take.")}</p>
     </div>

     <div class="bit">
     % if context_course:
          <%
            url_encoded_course_id = quote(str(context_course.id).encode('utf-8'), safe='')
            course_team_url = utils.reverse_course_url('course_team_handler', context_course.id)
            grading_config_url = utils.reverse_course_url('grading_handler', context_course.id)
            advanced_config_url = utils.reverse_course_url('advanced_settings_handler', context_course.id)
          %>
        <h3 class="title-3">${_("Other Course Settings")}</h3>
        <nav class="nav-related" aria-label="${_('Other Course Settings')}">
          <ul>
            <li class="nav-item"><a href="${grading_config_url}">${_("Grading")}</a></li>
            <li class="nav-item"><a href="${course_team_url}">${_("Course Team")}</a></li>
            <li class="nav-item"><a href="${utils.reverse_course_url('group_configurations_list_handler', context_course.id)}">${_("Group Configurations")}</a></li>
            % if has_studio_advanced_settings_access(request.user):
            <li class="nav-item"><a href="${advanced_config_url}">${_("Advanced Settings")}</a></li>
            % endif
            % if mfe_proctored_exam_settings_url:
              <li class="nav-item"><a href="${mfe_proctored_exam_settings_url}">${_("Proctored Exam Settings")}</a></li>
            % endif
          </ul>
        </nav>
     % endif
     </div>
    </div>
  </div>
</div>
</%block>