{% extends "lms/templates/lms_base.html" %}
{% block title %}
    {{ assignment.title if assignment.name else _("Assignment Details") }}
{% endblock %}

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

{% macro Header() %}
<header class="sticky">
    <div class="container form-width">
        <div class="edit-header">
            <div>
                <div class="page-title">
                    {{ _("Assignment Details") }}
                </div>
                <div class="vertically-center small">
                    <a class="dark-links" href="/assignments">
                        {{ _("Assignment List") }}
                    </a>
                    <img class="icon icon-sm mr-0" src="/assets/lms/icons/chevron-right.svg">
                    <span class="breadcrumb-destination">{{ assignment.title if assignment.title else _("New Assignment") }}</span>
                </div>
            </div>

            <div class="align-self-center">
                <button class="btn btn-primary btn-sm btn-save-assignment" {% if assignment.name %} data-assignment="{{ assignment.name }}" {% endif %}>
                    {{ _("Save") }}
                </button>
            </div>

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

{% macro AssignmentForm(assignment) %}
<article>
    <div class="field-parent">
        <div class="field-group">
            <div class="field-label reqd"> {{ _("Title") }} </div>
            <div class="field-description">
                {{ _("Give the assignment a title.") }}
            </div>
            <input type="text" id="title" class="field-input" {% if assignment.name %} value="{{ assignment.title }}" data-name="{{ assignment.name }}" {% endif %}>
        </div>

        <div class="field-group">
            <div class="field-label reqd"> {{ "Type" }} </div>
            <div class="field-description">
                {{ _("Select the format in which students will have to submit the assignment.") }}
            </div>
            <div class="field-input flex align-center">
                <select class="form-control" id="type">
                    {% set types = ["Document", "PDF", "Image"] %}
                    {% for type in types %}
                    <option value="{{ type }}" {% if assignment.type == type %} selected {% endif %}>
                        {{ type }}
                    </option>
                    {% endfor %}
                </select>
                <div class="select-icon">
                    <svg class="icon  icon-sm" style="">
                        <use class="" href="#icon-select"></use>
                    </svg>
                </div>
            </div>

        </div>

        <div class="field-group">
            <div class="field-label reqd">
                {{ _("Question") }}
            </div>
            <div class="field-description">
                {{ _("Enter an assignment question.") }}
            </div>
            <div id="question" class=""></div>
            {% if assignment.question %}
            <div id="question-data" class="hide">
                {{ assignment.question }}
            </div>
            {% endif %}
        </div>
    </div>
</article>
{% endmacro %}


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