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

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

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

{% block page_content %}
    <div>
        <h1 class="hd-1 emphasized">{% trans "Edit 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 %}
            <p>
                {% trans "The information in the Studio Instance section is required before edX can create a Studio instance for the course run." %}
            </p>
            <p class="{% if publisher_hide_features_for_pilot %}hidden{% endif %}">
                {% trans "The information in the About Page section is not required before edX creates a Studio instance for the course run. You can return to this page and enter this information later. This information is required before edX announces the course." %}
            </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">
                        <p class="required">
                            {% trans "This information is required before edX can create a Studio instance for a course run." %}
                        </p>
                        <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 form.organization.field.queryset.all.count > 1 %}
                                          <label class="field-label">{{ form.organization.label_tag }} </label>
                                          {{ form.organization }}
                                        {% else %}
                                          {% with form.organization.field.queryset|first as organization %}
                                            <label id="organization-name" class="field-label"
                                                   data-org_id="{{ organization.id }}">{{ 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">
                                          {{ form.team_admin.label_tag }}
                                        </label> {{ form.team_admin }}


                                        <label class="field-label ">{{ form.title.label }}</label>
                                        {{ form.title }}
                                    </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 ">{{ form.number.label_tag }}</label>
                                        {{ form.number }}
                                    </div>
                                </div>

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


                <div 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 "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 ">{{ form.short_description.label_tag }}</label>
                                        {{ 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 ">{{ form.full_description.label_tag }}</label>
                                        {{ 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 ">{{ form.expected_learnings.label_tag }}</label>
                                        {{ form.expected_learnings }}
                                    </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 ">{{ form.primary_subject.label_tag }}</label>
                                        {{ 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 ">{{ form.secondary_subject.label_tag }}</label>
                                        {{ 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 ">{{ form.tertiary_subject.label_tag }}</label>
                                        {{ 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 ">{{ form.image.label_tag }}</label>
                                        <div class="course-image-field">
                                            {{ form.image }}
                                            {{ form.image.errors }}
                                        </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 ">{{ form.prerequisites.label_tag }}</label>
                                        {{ 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 ">{{ form.syllabus.label_tag }}</label>
                                        {{ form.syllabus }}
                                    </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 ">{{ form.level_type.label_tag }}</label>
                                        {{ form.level_type }}
                                    </div>
                                </div>
                            </fieldset>
                        </div>
                    </div>
                </div>

                <div class="layout-full layout">
                    <div class="course-edit-actions">
                        <a class="btn-cancel" href="{% url 'publisher:publisher_course_detail' course.id %}">
                            {% trans "Cancel" %}
                        </a>
                        <button class="btn-brand btn-base btn-save" type="submit">{% trans "UPDATE COURSE" %}</button>
                    </div>
                </div>

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

{% block extra_js %}
    <script src="{% static 'js/publisher/publisher.js' %}"></script>
{% endblock %}