<%inherit file="base.html" />
<%def name="online_help_token()"><% return "schedule" %></%def>
<%block name="title">${_("Schedule &amp; 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 ugettext as _
  from contentstore import utils
  import urllib
%>

<%block name="header_extras">
% for template_name in ["basic-modal", "modal-button", "upload-dialog"]:
  <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}';
  </script>
</%block>
<%block name="requirejs">
    require(["js/factories/settings"], function(SettingsFactory) {
        SettingsFactory("${details_url}");
    });
</%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">
  <section class="content">
    <article class="content-primary" role="main">
      <form id="settings_details" class="settings-details" method="post" action="">
        <section 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 about_page_editable:
          <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 = ("https:" if is_secure else "http:") + 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">
                    <i class="icon fa fa-envelope-o icon-inline"></i>${_("Invite your students")}</a>
              </li>
            </ul>
          </div>
          % endif

          % if not about_page_editable:
          <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.')
              }</p>
            </div>
          </div>
          % endif
        </section>

        <hr class="divide" />

        <section 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="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="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>

          <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="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>

            <li class="field-group field-group-enrollment-end" id="enrollment-end">
              <div class="field date" 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" />
                <span class="tip tip-stacked">${_("Last day students can enroll")}</span>
              </div>

              <div class="field time" 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" />
                <span class="tip tip-stacked timezone">${_("(UTC)")}</span>
              </div>
            </li>
          </ol>

          % if not about_page_editable:
          <div class="notice notice-incontext notice-workflow">
            <h3 class="title">${_("These Dates Are Not Used When Promoting Your Course")}</h3>
            <div class="copy">
              <p>${_(
                'These dates impact <strong>when your courseware can be viewed</strong>, '
                'but they are <strong>not the dates shown on your course summary page</strong>. '
                'To provide the course start and registration dates as shown on your course '
                'summary page, follow the instructions provided by your Program Manager.'
              )}</p>
            </div>
          </div>
          % endif
        </section>
        <hr class="divide" />
            <section class="group-settings marketing">
              <header>
                <h2 class="title-2">${_("Introducing Your Course")}</h2>
                <span class="tip">${_("Information for prospective students")}</span>
              </header>
              <ol class="list-input">
                % if short_description_editable:
                <li class="field text" id="field-course-short-description">
                  <label for="course-overview">${_("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>
                  <%def name='overview_text()'><%
                    a_link_start = '<a class="link-courseURL" rel="external" href="'
                    a_link_end = '">' + _("your course summary page") + '</a>'
                    a_link = a_link_start + lms_link_for_about_page + a_link_end
                    text = _("Introductions, prerequisites, FAQs that are used on %s (formatted in HTML)") % a_link
                    %>${text}</%def>
                  <span class="tip tip-stacked">${overview_text()}</span>
                </li>
                % endif

                <li class="field image" id="field-course-image">
                  <label>${_("Course 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 Image')}"/>
                    </span>

                    <span class="msg msg-help">
                    ${_("You can manage this image along with all of your other <a href='{}'>files &amp; uploads</a>").format(upload_asset_url)}
                    </span>

                    % else:
                    <span class="wrapper-course-image">
                      <img class="course-image placeholder" id="course-image" src="${course_image_url}" alt="${_('Course 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">${_("Upload Course Image")}</button>
                  </div>
                </li>

                % if about_page_editable:
                <li class="field video" id="field-course-introduction-video">
                  <label for="course-overview">${_("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>
            </section>

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

            <section 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">
                <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>
                % if settings.FEATURES.get('ENABLE_PREREQUISITE_COURSES'):
                <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 settings.FEATURES.get('ENTRANCE_EXAMS'):
                <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">${_("You can now view and author your course entrance exam from the {link_start}Course Outline{link_end}.").format(link_start="<a href='{}'>".format(course_handler_url), link_end="</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>
            </section>
          % endif
      </form>
    </article>
    <aside 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:
          <%
            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>
            <li class="nav-item"><a href="${advanced_config_url}">${_("Advanced Settings")}</a></li>
          </ul>
        </nav>
     % endif
     </div>
    </aside>
  </section>
</div>
</%block>
