{% 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 "To add or edit information about this course, make changes on this page and then select" %}
                <strong>{% trans "Update Course." %}</strong>
                {% trans "All required fields must be complete before this course can be sent for review." %}
            </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>
                                            <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 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">
                                        <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 ">{{ form.number.label_tag }}</label>
                                        {{ form.number }}
                                    </div>
                                </div>
                            </fieldset>
                        </div>

                        <div class="{% if publisher_hide_features_for_pilot %}hidden{% endif %}">
                        <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">
                                        <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 "An effective short description:" %}</p>
                                        <ul>
                                            <li>{% trans "Contains 25–50 words." %}</li>
                                            <li>{% trans "Functions as a tagline." %}</li>
                                            <li>{% trans "Conveys compelling reasons to take the course." %}</li>
                                            <li>{% trans "Follows SEO guidelines." %}</li>
                                            <li>{% trans "Targets a global audience." %}</li>
                                        </ul>
                                    </div>
                                    <div id="tab-example" class="content">
                                        <p>{% trans "The first MOOC to teach positive psychology. Learn science-based principles and practices for a happy, meaningful life." %}</p>
                                    </div>
                                    </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">
                            <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 "An effective long description:" %}</p>
                                <ul>
                                    <li>{% trans "Contains 150–300 words." %}</li>
                                    <li>{% trans "Is easy to skim." %}</li>
                                    <li>{% trans "Uses bullet points instead of dense text paragraphs." %}</li>
                                    <li>{% trans "Follows SEO guidelines." %}</li>
                                    <li>{% trans "Targets a global audience." %}</li>
                                </ul>
                                <p>{% trans "The first four lines are visible when the About page opens. Learners can select \"See More\" to view the full description." %}</p>
                            </div>
                            <div id="tab-example" class="content">
                                <p>{% trans "Want to learn computer programming, but unsure where to begin? This is the course for you! Scratch is the computer programming language that makes it easy and fun to create interactive stories, games and animations and share them online." %}</p>
                                <p>{% trans "This course is an introduction to computer science using the programming language Scratch, developed by MIT. Starting with the basics of using Scratch, the course will stretch your mind and challenge you. You will learn how to create amazing games, animated images and songs in just minutes with a simple “drag and drop” interface." %}</p>
                                <p>{% trans "No previous programming knowledge needed. Join us as you start your computer science journey." %}</p>
                                <strong>{% trans "Skills-based example:" %}</strong>
                                <span>{% trans "Taught by instructors with decades of experience on Wall Street, this M&A course will equip analysts and associates with the skills they need to rise to employment in the M&A field. Additionally, directors and managers who have transitioned, or hope to transition, to M&A from other areas such as equities or fixed income can use this course to eliminate skill gaps." %}</span>
                            </div>
                        </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">
                                        <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 "The skills and knowledge learners will acquire in this course." %}</li>
                                                <li>{% trans "Format each item as a bullet with four to ten words." %}</li>
                                            </ul>
                                        </div>
                                        <div id="tab-example" class="content">
                                            <ul>
                                                <li>{% trans "Basic R Programming" %}</li>
                                                <li>{% trans "An applied understanding of linear and logistic regression" %}</li>
                                                <li>{% trans "Application of text analytics" %}</li>
                                                <li>{% trans "Linear and integer optimization" %}</li>
                                            </ul>
                                        </div>
                                    </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">
                                        <p>{% trans "The subject of the course." %}</p>
                                        <p>{% trans "You can select up to two subjects in addition to the primary subject. Only the primary subject appears on the About page." %}</p>
                                    </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 "An eye-catching, colorful image that captures the essence of your course." %}
                                        <br/>
                                        <strong>{% trans "Course Image Guidelines:" %}</strong>
                                        <ul>
                                            <li>{% trans "The image size must be 2120 x 1192 pixels." %}</li>
                                            <li>{% trans "Each course in a sequence must have a unique image." %}</li>
                                            <li>{% trans "The image cannot include text or headlines." %}</li>
                                            <li>{% trans "You must have permission to use the image. Possible image sources include Flickr creative commons, Stock Vault, Stock XCHNG, and iStock Photo." %}</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">
                                        <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 200 characters." %}</li>
                                                <li>{% trans "Specific knowledge learners must have to be successful in the course. If the course has no prerequisites, enter \"None\"." %}</li>
                                            </ul>

                                        </div>
                                        <div id="tab-example" class="content">
                                            <ul>
                                                <li>{% trans "Secondary school (high school) algebra; basic mathematics concepts" %}</li>
                                                <li>{% trans "Graduate-level understanding of Keynesian economics" %}</li>
                                                <li>{% trans "Basic algebra" %}</li>
                                            </ul>
                                        </div>
                                    </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">
                                        <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 "A review of content covered in your course, organized by week or module." %}</li>
                                                <li>{% trans "Focus on topics and content." %}</li>
                                                <li>{% trans "Do not include detailed information about course logistics, such as grading, communication policies, and reading lists." %}</li>
                                                <li>{% trans "Format items as either paragraphs or a bulleted list." %}</li>
                                            </ul>
                                        </div>
                                        <div id="tab-example" class="content">
                                            <ul>
                                                <li>{% trans "Week 1: From Calculator to Computer" %} <br/>
                                                    {%trans "Introduction to basic programming concepts, such as values and expressions, as well as making decisions when implementing algorithms and developing programs." %}
                                                </li>
                                                <li>{% trans "Week 2: State Transformation" %} <br/>
                                                    {%trans "Introduction to state transformation, including representation of data and programs as well as conditional repetition." %}
                                                </li>
                                            </ul>
                                        </div>
                                    </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; a learner with some to all of a secondary school degree could complete the course." %}</li>
                                            <li>{% trans "Intermediate - Basic prerequisites; learners need a secondary school degree or some university courses." %}</li>
                                            <li>{% trans "Advanced - Significant prerequisites; the course is geared to third or fourth year university students or master's degree students." %}</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>

                <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>
    <script src="{% static 'js/publisher/course-tabs.js' %}"></script>
    <script src="{% static 'js/publisher/organizations.js' %}"></script>
{% endblock %}