{% extends "lms/templates/lms_base.html" %}
{% block title %}
    {{ assignment.title }}
{% endblock %}

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

{% macro Header() %}
<header class="sticky mb-5">
    <div class="container form-width">
        <div class="edit-header">
            <div>
                <div class="vertically-center">
                    <div class="page-title">
                        {{ assignment.title }}
                    </div>
                    {% if assignment.grade_assignment and submission.status %}
                    {% set color = "green" if submission.status == "Pass" else "red" if submission.status == "Fail" else "orange" %}
                    <div class="indicator-pill {{ color }} ml-2">
                        {{ submission.status }}
                    </div>
                    {% endif %}
                </div>
                <div class="vertically-center small">
                    <a class="dark-links" href="/batches">
                        {{ _("All Batches") }}
                    </a>
                    <img class="icon icon-sm mr-0" src="/assets/lms/icons/chevron-right.svg">
                    <span class="breadcrumb-destination">{{ _("Assignment Submission") }}</span>
                </div>
            </div>

            {% if not assignment.show_answer or (assignment.show_answer and not submission) %}
            <div class="align-self-center">
                <button class="btn btn-primary btn-sm btn-save-assignment"
                    data-assignment="{{ assignment.name }}" data-type="{{ assignment.type }}"
                    {% if submission.name %} data-submission="{{ submission.name }}" {% endif %}>
                    {{ _("Save") }}
                </button>
            </div>
            {% endif %}
        </div>
    </div>
</header>
{% endmacro %}

{% macro SubmissionForm(assignment) %}
<article class="field-parent">
    {% if assignment.grade_assignment and submission.name %}
        <div class="alert alert-info">
            {{ _("You've successfully submitted the assignment. Once the moderator grades your submission, you'll find the details here. Feel free to make edits to your submission if needed.") }}
        </div>
        {% if is_moderator %}
        <div class="field-group">
            <div class="bold-heading">
                {{ _("Student Name") }}
            </div>
            {{ submission.member_name }}
        </div>
        {% endif %}
    {% endif %}

    <div class="field-group">
        <div class="bold-heading">
            {{ _("Question")}}
        </div>
        {{ assignment.question }}
    </div>

    {% if assignment.type not in ["URL", "Text"] %}
    <div class="field-group">
        <div class="bold-heading">
            {{ _("Submit")}}
        </div>
        <div class="field-description">
            {{ _("Upload assignment as {0}").format(assignment.type) }}
        </div>


        <div class="btn btn-default btn-sm btn-upload mt-2 {% if submission.assignment_attachment %} hide {% endif %}" data-type="{{ assignment.type }}">
            {{ _("Browse").format(assignment.type) }}
        </div>
        <div class="field-input flex justify-between align-center overflow-auto
            {% if not submission.assignment_attachment %} hide {% endif %}" id="assignment-preview">
            <a class="clickable" {% if submission.assignment_attachment %} href="{{ submission.assignment_attachment }}" {% endif %}>
                {% if submission.assignment_attachment %} {{ submission.assignment_attachment }} {% endif %}
            </a>
        </div>
        <span class="btn btn-default btn-sm btn-close {% if not submission %} hide {% endif %} mt-2">
            {{ _("Clear") }}
        </span>
    </div>
    {% else %}

    <div class="field-group">
        <div class="bold-heading">
            {{ _("Submission")}}
        </div>
        <div class="field-description">
            {% if assignment.type == "URL" %}
            {{ _("Enter a {0}").format(assignment.type) }}
            {% else %}
            {{ _("Enter your response") }}
            {% endif %}
        </div>
        {% if assignment.type == "URL" %}
            <input type="text" class="field-input assignment-answer" placeholder="https://"
                {% if submission.answer %} value="{{ submission.answer }}" {% endif %}>
        {% else %}
            <div class="assignment-text"></div>
            {% if submission.answer %}
            <div class="assignment-text-data hide">
                {{ submission.answer }}
            </div>
            {% endif %}
        {% endif %}
    </div>
    {% endif %}

    {% if assignment.show_answer and submission %}
    <div class="field-group">
        <div class="bold-heading">
            {{ _("Response by Instructor:") }}
        </div>
        <div>
            {{ assignment.answer }}
        </div>
    </div>
    {% endif %}

    {% if assignment.grade_assignment and is_moderator %}
        <div class="field-group">
            <div class="field-label">
                {{ _("Status") }}
            </div>
            <div class="field-input flex align-center">
                <select class="form-control" id="status">
                    {% set statuses = ["Not Graded", "Pass", "Fail"] %}
                    {% for status in statuses %}
                    <option value="{{ status }}" {% if submission.status == status %} selected {% endif %}>
                        {{ status }}
                    </option>
                    {% endfor %}
                </select>
                <div class="select-icon">
                    <svg class="icon  icon-sm">
                        <use class="" href="#icon-select"></use>
                    </svg>
                </div>
            </div>
        </div>

        <div class="field-group">
            <div class="field-label">
                {{ _("Comments by Mentor") }}
            </div>
            <textarea id="comments" type="text" class="field-input" height="300px"
                >{% if submission.comments %}{{ submission.comments }}{% endif %}</textarea>
        </div>
    {% endif %}

    {% if submission and submission.member == frappe.session.user and submission.comments %}
    <div class="field-group">
        <div class="field-label">
            {{ _("Comments by Mentor") }}
        </div>
        <div>
            {{ submission.comments }}
        </div>
    </div>
    {% endif  %}

</article>
{% endmacro %}