{% extends "layout.html" %}
{% block head %}
{{ super() }}
{# Add htmx #}
<script src="https://unpkg.com/htmx.org@1.5.0"></script>
{% endblock %}

{% block column %}
{{ super() }}
<h3>{{ _("Information") }}</h3>
<table class="table table-sm">
    <tr>
        <td>Submission author(s)</td>
        <td>{% for author in authors %}
            <p>{{ author }}</p>
            {% endfor %}
        </td>
    </tr>
    <tr>
        <td>Task</td>
        <td>{{ task.get_name(user_manager.session_language()) }}</td>
    </tr>
    <tr>
        <td>Submitted</td>
        <td>{{ submitted_on }}</td>
    </tr>
    {% if submission.custom.coding_style_grades %}
    <tr>
        <td>Mean style grade</td>
        <td>{{grades.get_mean(config)}} / 100</td>
    </tr>
    {% endif %}
</table>
{% if submission.custom.coding_style_grades %}
<div class="col">
<button type="button"
        class="btn btn-danger"
        hx-delete="/admin/codingstyle/submission/{{submission._id}}"
        hx-swap="none"
        hx-confirm="Are you sure you want to remove coding style grades from the submission?">
Delete feedback
</button>
</div>
{% endif %}
{% endblock %}

{% block navbar %}
<nav aria-label="breadcrumb">
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="{{get_homepath()}}/course/{{course.get_id()}}">{{
                course.get_name(user_manager.session_language()) }}</a></li>
        <li class="breadcrumb-item">
            <a href="{{get_homepath()}}/admin/{{course.get_id()}}" title="{{ _('Administration') }}"
                data-toggle="tooltip" data-placement="bottom">
                <i class="fa fa-user-secret"></i>
            </a>
        </li>
        <li class="breadcrumb-item">
            <a href="{{get_homepath()}}/admin/{{course.get_id()}}/students" title="{{ _('Students') }}"
                data-toggle="tooltip" data-placement="bottom">
                <i class="fa fa-user"></i>
            </a>
        </li>
        <li class="breadcrumb-item"><a href="{{get_homepath()}}/admin/{{course.get_id()}}/student/{{username}}">{{
                user_realname }}</a>
        </li>
        <li class="breadcrumb-item"><a
                href="{{get_homepath()}}/admin/{{course.get_id()}}/submissions?users={{username}}&tasks={{task.get_id()}}">{{
                task.get_name(user_manager.session_language()) }}</a></li>
        <li class="breadcrumb-item"><a href="{{get_homepath()}}/submission/{{submission._id}}">{{ submission['_id'] |
                string }}<span class="sr-only">{{ _("(current)")
                    }}</span></a></li>
        <li class="breadcrumb-item active"><a href="#">Coding Style<span
                    class="sr-only">(current)</span></a></li>
    </ol>
</nav>
{% endblock %}

<!-- Display grading categories -->
{% block content %}

{%- if success is not none -%}
    {%- if success == '1' -%}
    <div class="alert alert-success" role="alert">
        Successfully updated submission.
    </div>
    {% else %}
    <div class="alert alert-danger" role="alert">
        Failed to update submission.
    </div>
    {% endif %}
{%- endif %}

<div class="container-fluid">
    <div class="row">
        <div class="col">
            <h1 class="card-title"> Coding Style Grading</h1>
        </div>
    </div>
    <div class="row">
        <div class="col">
            <p>Add grades to each category and optionally give feedback.</p>
        </div>
    </div>

    <hr/>

    <form action="/admin/codingstyle/submission/{{submission._id}}" method="POST">
        {% for id, grade in grades.grades.items() %}

        <!-- Create new row every second index -->
        <!-- Is there a better way to do this? -->
        {% if loop.index0 % 2 == 0 -%}
            <div class="row m-1 mt-5">
        {% endif %}

        <div class="col-md-5 p-4 mr-5 border">
            <div class="col-md-12 pt-1">
                <!-- Grading Category Name Row -->
                <div class="row">
                    <div class="col-md-11">
                        <h3>{%- if id in config.enabled -%}
                                {#- Prefer showing up-to-date name -#}

                                {{ config.enabled[id].name }}

                            {%- else -%}
                                {#- Fall back on name stored in existing grade -#}

                                {% set disabled = True %}
                                {{ grade.name }} (disabled)

                            {%- endif -%}
                        </h3>
                    </div>

                    <div class="col-md-1">
                        {%- if disabled -%}

                        {#- Show button to remove disabled category -#}
                            <button
                                type="button"
                                hx-put="/admin/codingstyle/submission/{{submission._id}}?remove={{id}}"
                                style=" border:none; background-color:white;"
                                hx-swap="none"
                                hx-confirm="Are you sure you want to remove the inactive grading category '{{ grade.name }}' from the submission's coding style grades?"
                                data-toggle="tooltip"
                                data-placement="top"
                                title="Remove grade from submission"
                            >
                                <i class="fa fa-window-close" style="color:lightcoral;">
                                </i>
                            </button>
                        {%- endif -%}
                    </div>
                </div>

                <!-- Grading Category Description row -->
                <div class="row">
                    <div class="col-md-12">
                        <p>
                            {%- if id in config.enabled -%}
                                {{ config.enabled[id].description }}
                            {%- else -%}
                                {{ grade.description }}
                            {%- endif -%}
                        </p>
                    </div>
                </div>
                <!-- Grade input-->
                <div class="form-group w-25">
                    <label for="{{id}}_grade">Grade:</label>
                    <input
                        class="form-control input-sm"
                        type="number"
                        id="{{id}}_grade"
                        name="{{id}}_grade"
                        min="0"
                        max="100"
                        value={{grade.grade}}
                        {% if disabled %} readonly {% endif %}
                    >
                </div>

                <!-- Feedback text area -->
                <div class="form-group">
                    <label for="{{id}}_feedback">Feedback:</label>
                    <textarea
                        class="form-control"
                        id="{{id}}_feedback"
                        name="{{id}}_feedback"
                        rows="4"
                        cols="50"
                        {% if disabled %} readonly {%- endif -%}
                    >{{ grade.feedback }}</textarea>
                    {%- if disabled -%}
                        <small>NOTE: This category has been disabled and will not contribute to the submission's grade.</small>
                    {% endif %}
                </div>
            </div>
        </div>

        {% if loop.index % 2 == 0 or loop.last -%}
            </div>
        {%- endif -%}

        {% endfor %}

        <!-- Display mean grade + submit button -->
        <div class="row">
            <div class="col-md-12 p-4">
                {% if grades %}
                <h4>Average:</h4>
                <p>{{grades.get_mean(config)}}</p>
                {% endif %}
                <input class="btn btn-primary" type="submit" value="Submit">
            </div>
        </div>
    </form>

</div>
{% endblock %}