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

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

{% block page_content %}
    <div>
        <h1 class="hd-1 emphasized">{% trans "New Course Run" %}</h1>
        <div class="copy-base">
            <p>
                {% url 'publisher:publisher_course_detail' parent_course.id as course_url %}
                {% with link_start='<a href="' link_middle='">' link_end='</a>' %}
                {% blocktrans %}
                    The fields below will only affect this new course run. If you feel the need edit information from the parent course then you may do so on the {{ link_start }}{{ course_url }}{{ link_middle }}parent course for this run{{ link_end }}.
                {% endblocktrans %}
                {% endwith %}
            </p>
        </div>

        {% include 'alert_messages.html' %}

        <form class="form" method="post" enctype="multipart/form-data">{% csrf_token %}
            <div class="layout-full layout publisher-layout">
                <h2 class="layout-title">{% trans "Studio instance information" %}</h2>

                <div class="card course-form">
                    <div class="course-information">
                        <div class="copy-base">
                            <p>
                                {% blocktrans %}
                                    The information in this section is required to create a course studio instance. You must fill all required information but are welcome to come back and enter the rest of the information when you are ready to announce the course, or you can do it all at once if you are ready to do so.
                                {% endblocktrans%}
                            </p>
                        </div>
                        <fieldset class="form-group grid-container grid-manual">
                            <div class="field-title">{% trans "COURSE TITLE" %}</div>
                            <div class="row">
                                <div class="col col-6 help-text">
                                    <div class="row">
                                        <ul class="tabs">
                                            <li class="course-tabs active" data-tab="tab-practices">
                                                {% trans "Best Practices" %}
                                            </li>
                                            <li class="course-tabs" data-tab="tab-example">
                                                {% trans "Examples" %}
                                            </li>
                                        </ul>
                                    </div>
                                    <div id="tab-practices" class="content active">
                                        <p>{% trans "Maximum 70 characters. Recommended 50 or fewer characters." %}</p>
                                        <p>{% trans "An effective course title:" %}</p>
                                        <ul>
                                            <li>{% trans "Clearly indicates the course subject matter." %}</li>
                                            <li>{% trans "Follows search engine optimization (SEO) guidelines." %}</li>
                                            <li>{% trans "Targets a global audience." %}</li>
                                        </ul>
                                        <p>{% trans "If the course is part of a sequence, include both sequence and course information as \"Sequence: Course\"." %}</p>
                                    </div>
                                    <div id="tab-example" class="content">
                                        <p></p>
                                        <strong>{% trans "Single Courses" %}</strong>
                                        <ul>
                                            <li>{% trans "English Grammar and Essay Writing" %}</li>
                                        </ul>
                                        <strong>{% trans "Sequence Courses:" %}</strong>
                                        <ul>
                                            <li>{% trans "Statistics: Inference" %}</li>
                                            <li>{% trans "Statistics: Probability" %}</li>
                                        </ul>
                                    </div>
                                </div>
                                <div class="col col-6">

                                    <label class="field-label ">
                                        <label class="field-label">
                                            {% trans "Course Title" %}
                                    </label>
                                    </label>
                                    <span class="field-readonly">{{ parent_course.title }}</span>
                                    <div class="hidden">{{ course_form.title }}</div>
                                    <div class="hidden">{{ course_form.organization }}</div>

                                    <div class="field-admin margin-top20">
                                        <label class="field-label">
                                            {% trans "Institution Course Admin" %}
                                            {% if course_form.team_admin.field.required %}
                                                <span class="required">* {% trans "required" %}</span>
                                            {% endif %}
                                    </label>
                                        <div id="field-team-admin" {% if is_team_admin_hidden %}class="hidden"{% endif %}>
                                            {{ course_form.team_admin }}
                                </div>
                            </div>
                                    {% if parent_course.course_team_admin %}
                                        <div class="field-admin-name margin-top20 {% if course_form.team_admin.errors %}hidden{% endif %}">
                                            <span class="field-readonly">{{ parent_course.course_team_admin.full_name }}</span>
                                            <input id="team-admin-id" type="hidden" value="{{ parent_course.course_team_admin.id }}">
                                            <div>
                                                <a id="change-admin" href="#">{% trans "Change" %}</a>
                                            </div>
                                        </div>
                                    {% endif %}
                                </div>
                            </div>

                            <div class="field-title">{% trans "COURSE START DATE" %}</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" %}</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 NUMBER" %}</div>
                            <div class="row">
                            <div class="col col-6 help-text">
                                <div class="row">
                                    <ul class="tabs">
                                        <li class="course-tabs active" data-tab="tab-practices">
                                            {% trans "Best Practices" %}
                                        </li>
                                        <li class="course-tabs" data-tab="tab-example">
                                            {% trans "Examples" %}
                                        </li>
                                    </ul>
                                </div>
                                <div id="tab-practices" class="content active">
                                    <ul>
                                        <li>{% trans "Maximum 10 characters. Characters can be letters, numbers, or periods." %}</li>
                                        <li>{% trans "If a course consists of several modules, the course number can have an ending such as .1x or .2x." %}</li>
                                    </ul>
                                </div>
                                <div id="tab-example" class="content">
                                    <ul>
                                        <li>{% trans "CS002x" %}</li>
                                        <li>{% trans "BIO1.1x; BIO1.2x etc." %}</li>
                                    </ul>
                                </div>
                            </div>
                            <div class="col col-6">
                                <label class="field-label ">{{ course_form.number.label_tag }}  <span class="required">*</span></label>
                                {% if edit_mode %}{{ course_form.number.value }}{% endif %}
                                 {{ course_form.number }}
                            </div>
                        </div>

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

            <div class="layout-full layout publisher-layout">
                <h2 class="layout-title">{% trans "About page information" %}</h2>

                <div class="card course-form">
                    <div class="course-information">
                        <fieldset class="form-group grid-container grid-manual">

                            <div class="field-title">{% trans "COURSE END DATE" %}</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>

                            <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 not seat_form.price.value %}hidden{% endif %}">
                                            <label class="field-label ">{{ seat_form.price.label_tag }}</label>
                                            {{ seat_form.price }}
                                        </div>
                                    </div>
                                    {% if seat_form.price.errors %}
                                        <div class="field-message has-error">
                                                    <span class="field-message-content">
                                                        {{ seat_form.price.errors|escape }}
                                                    </span>
                                        </div>
                                    {% endif %}
                                </div>
                            </div>

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

            <div class="layout-full layout publisher-layout">
                <div class="card course-form">
                    <div class="course-information">
                        <fieldset class="form-group grid-container grid-manual">
                                <button class="btn-brand btn-base" type="submit">{% trans "Save Draft" %}</button>
                        </fieldset>
                    </div>
                </div>
            </div>
        </form>
    </div>
{% endblock %}

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