{% extends 'publisher/base.html' %}

{% load i18n %}
{% load staticfiles %}

{% block title %}
    {% trans "Course Form" %}
{% endblock title %}

{% block page_content %}
<div>
<h1 class="hd-1 emphasized">
    {% if edit_mode %}
        {% trans "Edit Course" %}
    {% else %}
        {% trans "Create New Course" %}
    {% endif %}
</h1>

<div class="alert-messages">
{% if messages %}
    {% for message in messages %}
    <div class="alert alert-{{ message.tags }}" role="alert" aria-labelledby="alert-title-{{ message.tags }}" tabindex="-1">
        <div><p class="alert-copy">{{ message }}</p></div>
    </div>
    {% endfor %}
{% endif %}
<p>
    {% blocktrans with strong_start='<strong>' strong_end='</strong>' trimmed %}
        To create a parent course, enter the following information about the course and select {{ strong_start }}Create New Course{{  strong_end }}.
    {% endblocktrans %}
    <strong class="required">{% trans "All of the following information is required." %}</strong>
</p>
<form class="form" method="post" action="" enctype="multipart/form-data">
{% csrf_token %}
<div class="layout-full publisher-layout layout">

    <h2 class="layout-title">{% trans "Studio Instance" %}</h2>

    <div class="card course-form">
        <div class="course-information">
            <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>
                            <p>“{% trans "English Grammar and Essay Writing" %}”</p>
                            <p>“{% trans "Project Management Life Cycle" %}”</p>
                            <br />
                            <strong>{% trans "Sequence Courses:" %}</strong>
                            <p>“{% trans "Introduction to Statistics" %}”</p>
                            <p>“{% trans "Statistics: Inference" %}”</p>
                            <p>“{% trans "Statistics: Probability" %}”</p>
                        </div>
                    </div>
                    <div class="col col-6">
                        {% if edit_mode %}
                             <label class="field-label">{{ course_form.organization.label_tag }} </label>
                             <div class="field-value">
                                 {{ organization_name }}{{ course_form.organization }}</div>
                        {% else %}
                            {% if course_form.organization.field.queryset.all.count > 1 %}
                              <label class="field-label">{{ course_form.organization.label_tag }} </label>
                              {{ course_form.organization }}
                            {% else %}
                              {% with course_form.organization.field.queryset|first as organization %}
                                <label id="organization-name" class="field-label"
                                       data-org_id="{{ organization.id }}">{{ course_form.organization.label_tag }} 
                                </label>
                                <span class="read-only-field">{{ organization.name }}</span>
                                <input id="id_organization" name="organization" type="hidden" value="{{ organization.id }}">
                              {% endwith %}
                            {% endif %}
                        {% endif %}
                        <label class="field-label">
                          {{ course_form.team_admin.label_tag }} <span class="required">*</span>
                        </label>

                            <div class="field-value">
                                {% if edit_mode %}{{ team_admin_name }}{% endif %}</div>
                            {{ course_form.team_admin }}

                        <label class="field-label ">
                            {{ course_form.title.label }}  <span class="required">*</span>
                        </label> 
                            {% if edit_mode %}<div class="field-value">{{ course_form.title.value }}</div>{% endif %}
                            {{ course_form.title }}
                    </div>
                </div>

                <div class="field-title">{% trans "COURSE START DATE" %}</div>
                <div class="row">
                    <div class="col col-6 help-text">
                        <p>{% trans "Best Practices" %}</p>
                        <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 "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 "COURSE PACING" %}</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">
                        <p>{% trans "Maximum 10 characters. Characters can be letters, numbers, or periods." %}</p>
                        <p>{% trans "If a course consists of several modules, the course number can have an ending such as .1x or .2x." %}</p>
                    </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>

                {% if edit_mode %}
                    <div class="field-title">{% trans "STUDIO INSTANCE" %}</div>
                    <div class="row">
                        <div class="col col-6 help-text">
                            <p>{% trans "This is the course studio URL." %}</p>
                        </div>
                        <div class="col col-6">
                            <label class="field-label ">{{ run_form.lms_course_id.label_tag }}  <span class="required">*</span></label>
                            {% if is_internal_user %}
                                {{ run_form.lms_course_id }}
                            {% else %}
                                <div class="studio-url">
                                    <span class="studio-url-heading">{% trans "STUDIO URL" %} - </span>
                                    {% if course_run.studio_url %}
                                        <a class="studio-link" href="{{ course_run.studio_url }}" target="_blank">{{ course_run.lms_course_id }}</a>
                                    {% else %}
                                        {% trans "Not yet created" %}
                                    {% endif %}
                                </div>
                            {% endif %}
                        </div>
                    </div>
                {% endif %}
            </fieldset>
        </div>
    </div>
</div>

{% if edit_mode %}
    <div id="about-page" class="layout-full publisher-layout layout {% if publisher_hide_features_for_pilot %}hidden{% endif %}">
        <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 "PROGRAM ASSOCIATION" %}</div>
                    <div class="row">
                        <div class="col col-6 help-text">
                            <ul>
                                <li>{% trans "Is this course a part of any programs?" %}</li>
                                <li>{% trans "Select the type or types of programs." %}</li>
                                <li>{% trans "Add the name of the program this course will be a part of." %}</li>
                            </ul>
                        </div>
                        <div class="col col-6">
                            <div class="row">
                                <div class="col col-5">
                                    <label class="field-label ">{{ run_form.is_micromasters.label_tag }}</label>
                                    {{ run_form.is_micromasters}}
                                </div>
                                <div class="col col-7 {% if run_form.micromasters_name %} hidden {% endif %}" id="micromasters_name_group">
                                    <label class="field-label ">{{ run_form.micromasters_name.label_tag }}</label>
                                    {{ run_form.micromasters_name }}
                                </div>
                                {% if run_form.micromasters_name.errors %}
                                <div class="field-message has-error">
                                    <span class="field-message-content">
                                        {{ run_form.micromasters_name.errors|escape }}
                                    </span>
                                </div>
                                {% endif %}
                            </div>
                            <div class="row">
                                <div class="col col-5">
                                    <label class="field-label ">{{ run_form.is_xseries.label_tag }}</label>
                                    {{ run_form.is_xseries}}
                                </div>
                                <div class="col col-7 {% if run_form.xseries_name %} hidden {% endif %}" id="xseries_name_group">
                                    <label class="field-label ">{{ run_form.xseries_name.label_tag }}</label>
                                    {{ run_form.xseries_name}}
                                </div>
                                {% if run_form.xseries_name.errors %}
                                <div class="field-message has-error">
                                    <span class="field-message-content">
                                        {{ run_form.xseries_name.errors|escape }}
                                    </span>
                                </div>
                                {% endif %}
                            </div>
                        </div>

                    </div>

                    <div class="field-title">{% trans "CERTIFICATE TYPE AND PRICE" %}</div>
                    <div class="row">
                        <div class="col col-6 help-text">
                            {% trans "If Verified or Professional Education, indicate certificate price in US dollars (minimum of $49)" %}
                        </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>


                    <div class="field-title">{% trans "BRIEF DESCRIPTION" %}</div>
                    <div class="row">
                        <div class="col col-6 help-text">
                            <ul>
                                <li>{% trans "Reads as a tag line - a short, engaging description for students browsing course listings" %}
                                </li>
                                <li>{% trans "Conveys why someone should take the course" %}</li>
                                <li>{% trans "SEO optimized and targeted to a global audience" %}</li>
                            </ul>
                        </div>
                        <div class="col col-6">
                            <label class="field-label ">{{ course_form.short_description.label_tag }}</label>
                            {{ course_form.short_description }}
                            <p>{% trans "140 character limit, including spaces." %}</p>
                        </div>
                    </div>

                    <div class="field-title">{% trans "FULL DESCRIPTION" %}</div>
                    <div class="row">
                        <div class="col col-6 help-text">
                            {% trans "Summarized description of course content" %}
                            <ul>
                                <li>{% trans "Describe why a learner should take this course" %}</li>
                                <li>{% trans "SEO optimized and targeted to a global audience" %}</li>
                                <li>{% trans "Text should be easily scannable, using bullet points to highlight instead of long, dense text paragraphs" %}
                                </li>
                                <li>
                                    {% trans "Note: the first 4-5 lines will be visible to the learner immediately upon clicking the page;" %}
                                    {% trans 'additional text will be hidden yet available via "See More" clickable text under the first 4-5 lines' %}
                                </li>
                            </ul>
                        </div>
                        <div class="col col-6">
                            <label class="field-label ">{{ course_form.full_description.label_tag }}</label>
                            {{ course_form.full_description }}
                            <p>{% trans "2500 character limit, including spaces." %}</p>
                        </div>
                    </div>


                    <div class="field-title">{% trans "EXPECTED LEARNINGS" %}</div>
                    <div class="row">
                        <div class="col col-6 help-text">
                            <ul>
                                <li>{% trans 'Answer to the question: "What will you learn from this course?"' %}</li>
                                <li>{% trans "bulleted items, approximately 4-10 words per bullet" %}</li>
                            </ul>
                        </div>
                        <div class="col col-6">
                            <label class="field-label ">{{ course_form.expected_learnings.label_tag }}</label>
                            {{ course_form.expected_learnings }}
                        </div>
                    </div>

                    <div class="field-title">{% trans "COURSE STAFF" %}</div>
                    <div class="row">
                        <div class="col col-6 help-text">
                            <ul>
                              <li>{% trans "If there is more than one instructor, please indicate the order in which the instructors should be listed" %}</li>
                              <li>{% trans "Limited to the primary instructors a learner will encounter in videos " %}</li>
                            </ul>
                        </div>
                        <div class="col col-6 instructor-select">
                            <label class="field-label ">{{ run_form.staff.label_tag }}</label>
                            {{ run_form.staff }}
                            <div class="selected-instructor">
                              {% if publisher_add_instructor_feature %}
                                <button type="button" id="add-new-instructor">{% trans "Add New" %}<br>{% trans "Instructor" %}</button>
                              {% endif %}
                            </div>
                        </div>
                    </div>

                    <div class="field-title">{% trans "SUBJECT FIELD" %}</div>
                    <div class="row">
                        <div class="col col-6 help-text">
                            {% trans "Only one primary subject will appear on the About Page; please select one primary subject and a maximum of two additional subject areas for search." %}
                        </div>
                        <div class="col col-6">
                            <label class="field-label ">{{ course_form.primary_subject.label_tag }}</label>
                            {{ course_form.primary_subject }}
                        </div>
                    </div>

                    <div class="row">
                        <div class="col col-6 help-text">&nbsp;
                        </div>
                        <div class="col col-6">
                            <label class="field-label ">{{ course_form.secondary_subject.label_tag }}</label>
                            {{ course_form.secondary_subject }}
                        </div>
                    </div>

                    <div class="row">
                        <div class="col col-6 help-text">&nbsp;
                        </div>
                        <div class="col col-6">
                            <label class="field-label ">{{ course_form.tertiary_subject.label_tag }}</label>
                            {{ course_form.tertiary_subject }}
                        </div>
                    </div>

                    <div class="field-title">{% trans "COURSE IMAGE" %}</div>
                    <div class="row">
                        <div class="col col-6 help-text">
                            {% trans "Select an eye-catching, colorful image that captures the content and essence of your course" %}
                            <ul>
                                <li>{% trans "Do not include text or headlines" %}</li>
                                <li>{% trans "Choose an image that you have permission to use." %}
                                    {% trans "This can be a stock photo (try Flickr creative commons, " %}
                                    {% trans "Stock Vault, Stock XCHNG, iStock Photo) or an image custom designed for your course" %}
                                </li>
                                <li>{% trans "Sequenced courses should each have a unique image" %}</li>
                                <li>{% trans "Size: 2120 x 1192 pixels" %}</li>
                            </ul>
                        </div>
                        <div class="col col-6">
                            <label class="field-label ">{{ course_form.image.label_tag }}</label>
                            <div class="course-image-field">{{ course_form.image }}</div>
                        </div>
                    </div>

                    <div class="field-title">{% trans "PREREQUISITES" %}</div>
                    <div class="row">
                        <div class="col col-6 help-text">
                            <ul>
                                <li>{% trans "List concepts and level (basic, advanced, undergraduate, graduate) students should be familiar with" %}
                                </li>
                                <li>{% trans 'If there are no prerequisites, please list "None."' %}</li>
                                <li>{% trans "200 character limit, including spaces" %}</li>
                            </ul>
                        </div>
                        <div class="col col-6">
                            <label class="field-label ">{{ course_form.prerequisites.label_tag }}</label>
                            {{ course_form.prerequisites }}
                            <p>{% trans "200 character limit, including spaces." %}</p>
                        </div>
                    </div>

                    <div class="field-title">{% trans "SYLLABUS" %}</div>
                    <div class="row">
                        <div class="col col-6 help-text">
                            <ul>
                                <!-- Help text will go here when we have it.-->
                            </ul>
                        </div>
                        <div class="col col-6">
                            <label class="field-label ">{{ course_form.syllabus.label_tag }}</label>
                            {{ course_form.syllabus }}
                        </div>
                    </div>

                    <div class="field-title">{% trans "ESTIMATED EFFORT" %}</div>
                    <div class="row">
                        <div class="col col-6">
                            <ul>
                                <li>{% trans "Number of hours per week the learner should expect to spend on the course to be successful" %}
                                </li>
                                <li>{% trans "Should be realistic, and can be a range" %}</li>
                            </ul>
                        </div>
                        <div class="col col-6">
                            <div class="row">
                                <div class="col col-6">
                                    <label class="field-label ">{% trans "Min Effort" %}</label>
                                    {{ run_form.min_effort }}
                                </div>
                                <div class="col col-6">
                                    <label class="field-label ">{% trans "Max Effort" %}</label>
                                    {{ run_form.min_effort }}
                                </div>
                            </div>
                        </div>


                    </div>

                    <div class="field-title">{% trans "LANGUAGE(S)" %}</div>
                    <div class="row">
                        <div class="col col-6 help-text">
                            <ul>
                                <li>
                                    {% trans "Course content (navigation and course content excluding videos)" %}
                                </li>
                                <li>
                                    {% trans "Videos (language spoken in course videos)" %}
                                </li>
                                <li>
                                    {% trans "Video transcript (video caption language)" %}
                                </li>
                            </ul>
                        </div>
                        <div class="col col-6">
                            <label class="field-label ">{{ run_form.language.label_tag }}</label>
                            {{ run_form.language}}

                            <label class="field-label ">{{ run_form.transcript_languages.label_tag }}</label>
                            {{ run_form.transcript_languages}}

                            <label class="field-label ">{{ run_form.video_language.label_tag }}</label>
                            {{ run_form.video_language}}

                        </div>
                    </div>


                    <div class="field-title">{% trans "LENGTH" %}</div>
                    <div class="row">
                        <div class="col col-6 help-text">
                            <ul>
                                <li>{% trans "Length of course, in number of weeks" %}</li>
                                <li>{% trans "If the time between start/end dates is not exact, ex: 8.5 weeks, " %}
                                    {% trans "indicate whether the course should be listed as 8 weeks or 9 weeks." %}
                                </li>
                            </ul>
                        </div>
                        <div class="col col-6">
                            <label class="field-label ">{{ run_form.length.label_tag }}</label>
                            {{ run_form.length}}
                        </div>
                    </div>

                    <div class="field-title">{% trans "LEVEL TYPE" %}</div>
                    <div class="row">
                        <div class="col col-6 help-text">
                            <ul>
                                <li>{% trans "Introductory - No prerequisites; an individual with some to all of a secondary school degree could complete" %}
                                </li>
                                <li>
                                    {% trans "Intermediate - Basic prerequisites; a secondary school degree likely required to be successful as well as some university" %}
                                </li>
                                <li>
                                    {% trans "Advanced - Significant number of prerequisites required; course geared to 3rd or 4th year university student or a masters degree student" %}
                                </li>
                            </ul>
                        </div>
                        <div class="col col-6 help-text">
                            <label class="field-label ">{{ course_form.level_type.label_tag }}</label>
                            {{ course_form.level_type }}
                        </div>
                    </div>
                </fieldset>
            </div>
        </div>
    </div>
{% endif %}
<div class="layout-full layout">

    <p>{% trans "After you submit this information, an edX project coordinator creates an instance for the course as well as a course run in Studio. When the Studio instance is ready, you will receive an email notification. You can then enter course content in Studio." %}</p>
    <p>{% trans "If you have additional information for your course About page, you can enter it on the next page. You can edit this information at any time before edX publishes the course About page." %}</p>
</div>
<div class="course-form">
    <div class="course-information action-buttons">
        <a href="{% url 'publisher:publisher_courses' %}">{% trans "Cancel" %}</a>
        <button class="btn-brand btn-base" type="submit">
            {% if edit_mode %}
                {% trans "Edit Course" %}
            {% else %}
                {% trans "Create New Course" %}
            {% endif %}
        </button>
    </div>
</div>

</form>
</div>
</div>
{% if publisher_add_instructor_feature %}
    {% include "publisher/_add_instructor_popup.html" %}
{% endif %}
{% endblock %}

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