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

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

{% block page_content %}
<div>
<h1 class="hd-1 emphasized">
    {% trans "Create New Course" %}
</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 %}
<form class="form" method="post" action="" enctype="multipart/form-data">
{% csrf_token %}
<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 "COURSE TITLE" %} <span class="required float-right">* Required</span></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">
                            {% 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 %}
                        <label class="field-label">
                          {{ course_form.team_admin.label_tag }} <span class="required">*</span>
                        </label>
                            {{ course_form.team_admin }}

                        <label class="field-label ">
                            {{ course_form.title.label }}  <span class="required">*</span>
                        </label>
                            {{ course_form.title }}
                        {% if course_form.title.errors %}
                            <div class="field-message-content">
                                {{ course_form.title.errors|escape }}
                            </div>
                        {% endif %}
                    </div>
                </div>

                <div class="field-title">{% trans "COURSE NUMBER" %} <span class="required float-right">* Required</span></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 50 characters. Characters can be letters, numbers, periods, underscores or hyphens." %}</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>
                         {{ course_form.number }}
                        {% if course_form.number.errors %}
                            <div class="field-message-content">
                                {{ course_form.number.errors|escape }}
                            </div>
                        {% endif %}
                    </div>
                </div>

                {% if entitlement_form %}
                <div class="field-title">{% trans "CERTIFICATE TYPE AND PRICE" %}</span></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 ">{{ entitlement_form.mode.label_tag }}</label>
                                {{ entitlement_form.mode }}
                            </div>
                            <div id="modePriceBlock" class="col col-6 {% if entitlement_form.mode.value not in entitlement_form.PAID_MODES %}hidden{% endif %}">
                                <label class="field-label ">{{ entitlement_form.price.label_tag }} <span class="required">*</span></label>
                                {{ entitlement_form.price }}
                            </div>
                        </div>
                    {% if entitlement_form.price.errors %}
                        <div class="field-message has-error js-seat-form-errors">
                            <span class="field-message-content">
                                {{ entitlement_form.price.errors|escape }}
                            </span>
                        </div>
                    {% endif %}
                    </div>
                </div>
                {% endif %}
            </fieldset>
        </div>
    </div>
</div>
<div class="course-form">
    <div class="course-information action-buttons">
        <div class="field">
            <label class="field-label label-inline">
                {{ course_form.add_new_run }}
                <span class="field-input-label">
                    {% trans "I want to add a run to this course at this time" %}
                </span>
            </label>
        </div>
        <div class="action-buttons">
            <a href="{% url 'publisher:publisher_courses' %}">{% trans "Cancel" %}</a>
            <button class="btn-brand btn-base btn-save" type="submit">
                {% trans "Create New Course" %}
            </button>
        </div>
    </div>
</div>

</form>
</div>
</div>
{% endblock %}

{% block extra_js %}
     <script src="{% static 'js/publisher/course-tabs.js' %}"></script>
     <script src="{% static 'js/publisher/organizations.js' %}"></script>
     <script src="{% static 'js/publisher/instructors.js' %}"></script>
     <script src="{% static 'js/publisher/entitlement-type-change.js' %}"></script>
     <script src="{% static 'js/publisher/image-validation.js' %}"></script>
     <script src="{% static 'js/publisher/program-types.js' %}"></script>
     <script src="{% static 'js/publisher/modal-screen.js' %}"></script>
     <script src="{% static 'js/publisher/course-image.js' %}"></script>
{% endblock %}