{% extends "lms/templates/lms_base.html" %}
{% block title %}
    {{  course.title if course and course.title else _("New Course") }}
{% endblock %}

{% block page_content %}
<main class="common-page-style">
    {{ Header() }}
    <div class="container form-width">
        {{ CreateCourse() }}
    </div>
</main>
{% endblock %}


{% macro Header() %}
<header class="sticky">
    <div class="container form-width">

        <div class="edit-header">
            <div class="page-title"> {{ _("Course Details") }} </div>

            <div class="align-self-center">
                {% if course.name %}
                <a class="btn btn-default btn-sm mr-2" href="/courses/{{ course.name }}">
                    {{ _("Back to Course") }}
                </a>

                <a class="btn btn-default btn-sm mr-2" href="/courses/{{ course.name }}/outline">
                    {{ _("Course Outline") }}
                </a>
                {% endif %}

                <button class="btn btn-primary btn-sm btn-save-course">
                    {{ _("Save") }}
                </button>
            </div>
        </div>

    </div>
</header>
{% endmacro %}


{% macro CreateCourse() %}
<div class="field-parent">
    <div class="field-group">
        <div>
            <div class="field-label reqd">
                {{ _("Title") }}
            </div>
            <div class="field-description">
                {{ _("Something Short and Concise") }}
            </div>
        </div>
        <div class="">
            <input id="title" type="text" class="field-input" {% if course.title %} data-course="{{ course.name }}" value="{{ course.title }}" {% endif %}>
        </div>
    </div>

    <div class="field-group">
        <div>
            <div class="field-label reqd">
                {{ _("Short Introduction") }}
            </div>
            <div class="field-description">
                {{ _("A one line brief description") }}
            </div>
        </div>
        <div class="">
            <input id="intro" type="text" class="field-input" {% if course.short_introduction %} value="{{ course.short_introduction }}" {% endif %}>
        </div>
    </div>

    <div class="field-group">
        <div>
            <div class="field-label reqd">
                {{ _("Course Description") }}
            </div>
            <div class="field-description">
                {{ _("Add a detailed description to provide more information about your course.") }}
            </div>
        </div>
        <div id="description" class=""></div>
        {% if course.description %}
        <div id="description-data" class="hide">
            {{ course.description }}
        </div>
        {% endif %}
    </div>

    <div class="field-group">
        <div>
            <div class="field-label">
                {{ _("Preview Video ID") }}
            </div>
            <div class="field-description">
                {{ _("Enter the Preview Video ID. The ID is the part of the URL after <code>watch?v=</code>. For example, if the URL is <code>https://www.youtube.com/watch?v=QH2-TGUlwu4</code>, the ID is <code>QH2-TGUlwu4</code>") }}
            </div>
        </div>
        <div class="">
            <input id="video-link" type="text" class="field-input" {% if course.video_link %} value="{{ course.video_link }}" {% endif %}>
        </div>
    </div>

    <div class="field-group">
        <div>
            <div class="field-label">
                {{ _("Tags") }}
            </div>
            <div class="field-description">
                {{ _("Tags act as search keywords. They also appear on the Course Card and Course Detail page") }}
            </div>
        </div>
        <div class="tags field-input">
            {% for tag in get_tags(course.name) %}
                <button class="btn btn-secondary btn-sm mr-2 text-uppercase">
                    {{ tag }}
                    <span class="btn-remove">
                        <svg class="icon icon-sm">
                            <use class="" href="#icon-close"></use>
                        </svg>
                    </span>
                </button>
            {% endfor %}
            <input type="text" class="invisible-input" id="tags-input">
        </div>
    </div>

    {% if is_moderator %}
    <div class="field-group vertically-center">
        <label for="published" class="vertically-center mb-0">
            <input type="checkbox" id="published" {% if course.published %} checked {% endif %}>
            {{ _("Published") }}
        </label>
        <label for="upcoming" class="vertically-center mb-0 ml-20">
            <input type="checkbox" id="upcoming" {% if course.upcoming %} checked {% endif %}>
            {{ _("Upcoming") }}
        </label>
    </div>
    {% endif %}

    <div class="field-group">
        <div>
            <div class="field-label">
                {{ _("Course Image") }}
            </div>
            <div class="field-description">
                {{ _("Image will appear on the Course Card") }}
            </div>
        </div>
        <div class="">
            <button class="btn btn-secondary btn-sm btn-upload mt-2">
                {{ _("Upload Image") }}
            </button>
        </div>
        <img {% if course.image %} class="image-preview" src="{{ course.image }}" {% endif %}>
    </div>

    <div class="field-group">
        <label for="paid_course" class="vertically-center mb-0">
            <input type="checkbox" id="paid-course" {% if course.paid_course %} checked {% endif %}>
            {{ _("Paid Course") }}
        </label>
    </div>

    <div class="field-group price-field {% if not course.paid_course %} hide {% endif %}">
        <div class="field-label {% if course.paid_course %} reqd {% endif %}">
            {{ _("Course Price") }}
        </div>
        <div class="field-description">
            {{ _("The price of this course.") }}
        </div>
        <div class="">
            <input id="course-price" type="number" class="field-input" {% if course.course_price %} value="{{ course.course_price }}" {% endif %}>
        </div>
    </div>

     <div class="field-group price-field {% if not course.paid_course %} hide {% endif %}">
        <div class="field-label {% if course.paid_course %} reqd {% endif %}">
            {{ _("Currency") }}
        </div>
        <div class="field-description">
            {{ _("The currency in which users will pay for this course.") }}
        </div>

        <select class="field-input" id="currency">
            <option></option>
            {% for currency in currencies %}
            <option value="{{ currency }}" {% if currency == course.currency %} selected {% endif %}>
                {{ currency}}
            </option>
            {% endfor %}
        </select>
    </div>

    <div class="field-group">
        <div class="field-label">
            {{ _("Instructor") }}
        </div>
        <div class="mt-2">
            {{ widgets.Avatar(member=member, avatar_class="avatar-medium") }}
            <span class="ml-2">
                {{ member.full_name }}
            </span>
        </div>
    </div>

</div>
{% endmacro %}


{%- block script %}
    {{ super() }}
    {{ include_script('controls.bundle.js') }}
{% endblock %}