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

{% block content %}
<main class="common-page-style">
    <div class="container">
        <div class="page-title"> {{ _("Course Details") }} </div>
        <div class="mt-10">
            <div>
                <div>
                    <div class="field-label">
                        {{ _("Title") }}
                    </div>
                    <div class="field-description">
                        {{ _("Something Short and Concise") }}
                    </div>
                </div>
                <div class="">
                    <input type="text" class="field-input" value="{{ course.title }}">
                </div>
            </div>

            <div>
                <div>
                    <div class="field-label">
                        {{ _("Preview Video") }}
                    </div>
                    <div class="field-description">
                        {{ _("A feature video that provides a preview of the course") }}
                    </div>
                </div>
                <div class="">
                    <input type="text" class="field-input" value="{{ course.video_link }}">
                </div>
            </div>

            <div>
                <div>
                    <div class="field-label">
                        {{ _("Short Introduction") }}
                    </div>
                    <div class="field-description">
                        {{ _("A one line breif description") }}
                    </div>
                </div>
                <div class="">
                    <input type="text" class="field-input" value="{{ course.short_introduction }}">
                </div>
            </div>

            <div>
                <div>
                    <div class="field-label">
                        {{ _("Tags") }}
                    </div>
                    <div class="field-description">
                        {{ _("Add suitable tags") }}
                    </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>

            <div>
                <div>
                    <div class="field-label">
                        {{ _("Course Image") }}
                    </div>
                    <div class="field-description">
                        {{ _("Add an appropriate image") }}
                    </div>
                </div>
                <div class="">
                    <input type="file" class="field-input" id="image">
                </div>
                <img {% if course.image %} class="image-preview" src="{{ course.image }}" {% endif %}>
            </div>

            <div>
                <div>
                    <div class="field-label">
                        {{ _("Course Description") }}
                    </div>
                    <div class="field-description">
                        {{ _("Add a detailed description") }}
                    </div>
                </div>
                <textarea id="course-description" class="field-input">{{ course.description }}</textarea>
            </div>

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

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

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

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