{% extends 'publisher/base.html' %}
{% load i18n %}
{% load static %}

{% block title %}
    {% trans "New Course Run" %}
{% endblock title %}

{% block page_content %}
<div xmlns="http://www.w3.org/1999/html">
        <h1 class="hd-1 emphasized">{% trans "New Course Run" %}</h1>
        <div class="copy-base">
            <p>
                {% blocktrans %}
                    When you create a course run, Publisher immediately creates a page for the course run in Publisher, and the edX team creates a Studio URL for the course run. You will receive an email message when edX has created the Studio URL.
                {% endblocktrans %}
            </p>
        </div>

        {% include 'alert_messages.html' %}

        <form class="form" method="post" enctype="multipart/form-data">{% csrf_token %}

            {% if course_form %}
                <div class="layout-full layout">
                    <div class="course-form">
                        <div class="course-information">
                            <fieldset class="form-group grid-container grid-manual">
                                <div class="field-title">{% trans "FIND COURSE" %} <span class="required float-right">* Required</span></div>
                                <div class="row">
                                    <div class="col col-6 help-text">
                                        <p>
                                            {% trans "Enter the name of the course for which you want to create a course run." %}
                                        </p>
                                        <p class="margin-top20">
                                            {% url 'publisher:publisher_courses_new' as new_course_url %}
                                            {% blocktrans with link_start='<a href="' link_middle='">' link_end='</a>' %}
                                                If your course cannot be found, make sure the course name is correct, or {{ link_start }}{{ new_course_url }}{{ link_middle }}create a new course{{ link_end }}.
                                            {% endblocktrans%}
                                        </p>
                                    </div>
                                    <div class="col col-6">
                                        <label class="field-label ">
                                            {{ course_form.course.label }}
                                            <span class="required">*</span>
                                        </label>
                                        {{ course_form.course }}
                                        {% if course_form.course.errors %}
                                            <div class="error-text">{{ course_form.course.errors.as_text }}</div>
                                        {% endif %}
                                    </div>
                                </div>
                            </fieldset>
                        </div>
                    </div>
                </div>
            {% endif %}

            <div class="layout-full layout js-courserun-form">
                <div class="course-form">
                    <div class="course-information">
                        <fieldset class="form-group grid-container grid-manual">

                            <div class="field-title">{% trans "COURSE START DATE" %} <span class="required float-right">* Required</span></div>
                            <div class="row">
                                <div class="col col-6 help-text">
                                    <ul>
                                        <li>
                                            {% trans "Start on a Tuesday, Wednesday, or Thursday." %}
                                        </li>
                                        <li>
                                            {% trans "Avoid major U.S. holidays." %}
                                        </li>
                                        <li>
                                            {% trans "Specify a month, day, and year. If you are unsure of the exact date, specify a day that is close to the estimated start date. For example, if your course will start near the end of March, specify March 31." %}
                                        </li>
                                    </ul>
                                </div>
                                <div class="col col-6">
                                    <label class="field-label ">{{ run_form.start.label_tag }}  <span class="required">*</span></label>
                                    {{ run_form.start }}
                                </div>
                            </div>

                            <div class="field-title">{% trans "PACING TYPE" %}<span class="required float-right">* Required</span></div>
                            <div class="row">
                                <div class="col col-6 help-text">
                                    <p>{% trans "Instructor-paced courses include individual assignments that have specific due dates before the course end date." %} </p>
                                    <p>{% trans "Self-paced courses do not have individual assignments that have specific due dates before the course end date. All assignments are due on the course end date." %}</p>
                                </div>
                                <div class="col col-6">
                                    <label class="field-label">{{ run_form.pacing_type.label_tag }}  <span class="required">*</span></label>
                                    <div class="checkbox-inline">{{ run_form.pacing_type }}</div>
                                </div>
                            </div>

                            <div class="field-title">{% trans "COURSE END DATE" %} <span class="required float-right">* Required</span></div>
                            <div class="row">
                                <div class="col col-6 help-text">
                                    {% trans "Specify a month, day, and year. If you are unsure of the exact date, specify a day that is close to the estimated end date. For example, if your course will end near the end of March, specify March 31." %}
                                </div>
                                <div class="col col-6">
                                    <label class="field-label ">{{ run_form.end.label_tag }}  <span class="required">*</span></label>
                                    {{ run_form.end }}
                                </div>
                            </div>

                        </fieldset>
                    </div>
                </div>
            </div>

            <div class="layout-full layout js-seat-form{% if hide_seat_form %} hidden{% endif %}">
                <div class="course-form">
                    <div class="course-information">
                        <fieldset class="form-group grid-container grid-manual">

                            <div class="field-title">{% trans "CERTIFICATE TYPE AND PRICE" %}</div>
                            <div class="row">
                                <div class="col col-6 help-text">
                                    {% trans "If the course offers a verified or professional education certificate, select the certificate type and enter the price for the certificate." %}
                                </div>
                                <div class="col col-6">
                                    <div class="row">
                                        <div class="col col-6">
                                            <label class="field-label ">{{ seat_form.type.label_tag }}
                                            </label> {{ seat_form.type }}
                                        </div>
                                        <div id="seatPriceBlock" class="col col-6 {% if seat_form.type.value == 'audit' or not seat_form.price.value %}hidden{% endif %}">
                                            <label class="field-label ">{{ seat_form.price.label_tag }}</label>
                                            {{ seat_form.price }}
                                            <div class="{% if seat_form.type.value != 'credit' or not seat_form.credit_price.value %}hidden{% endif %}" id="creditPrice">
                                                <label class="field-label">{{ seat_form.credit_price.label }}</label>
                                                {{ seat_form.credit_price }}
                                            </div>
                                        </div>
                                    </div>
                                    {% if seat_form.price.errors %}
                                        <div class="field-message has-error js-seat-form-errors">
                                                    <span class="field-message-content">
                                                        {{ seat_form.price.errors|escape }}
                                                    </span>
                                        </div>
                                    {% endif %}
                                </div>
                            </div>

                        </fieldset>
                    </div>
                </div>
            </div>

            <div class="course-form">
                <div class="course-information action-buttons">
                    <a href="{{ cancel_url }}">{% trans "Cancel" %}</a>
                    <button class="btn-brand btn-base btn-save" type="submit">
                            {% trans "Create New Course Run" %}
                    </button>
                </div>
            </div>
        </form>
    </div>
{% endblock %}

{% block extra_js %}
    <script src="{% static 'js/publisher/course-tabs.js' %}"></script>
    <script src="{% static 'js/publisher/seat-type-change.js' %}"></script>
    <script src="{% static 'js/publisher/toggle-seat-form.js' %}"></script>
{% endblock %}

{% block js_without_compress %}
    {{ course_form.media }}
{% endblock %}
