{% 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>
</table>
{% 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">
    <h1 class="card-title"> Coding Style Grading for Submission {{ submission._id }} </h1>
    <p>Show submission and author info here?</p>
    <hr/>
    <div class="form-group">
    <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">
    {% endif %}
    <div class="col-md-5 p-4 mr-5 mb-5 border rounded">
        <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>
            {% if disabled %}
            {# Show button to remove disabled category #}
            <div class="col-md-1">
                <button 
                    type="button" 
                    hx-put="/admin/codingstyle/submission/{{submission._id}}?remove={{id}}" 
                    style=" border:none; background-color:white;"
                    hx-swap="none"
                >
                    <i class="fa fa-window-close" style="color:lightcoral;">
                    </i>
                </button>
            </div>
            {% endif %}
        </div>
        <p>
            {% if id in config.enabled %}
                {{ config.enabled[id].description }}
            {% else %}
                {{ grade.description }}
            {% endif %}
        </p>

        <!-- Display grade input -->
            
            <label for="{{id}}_grade">Grade:</label>
            <br>
            <div class="row">
                <div class="col-md-2">
                    <input class="form-control" type="number" id="{{id}}_grade" name="{{id}}_grade" min="0" max="100" value={{grade.grade}} {% if disabled %} readonly {% endif %}>
                </div>
            </div>
            <br>
            <label for="{{id}}_feedback">Feedback:</label>
            <br>
            <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 class="col-md-1"></div> -->
    {% if loop.index % 2 == 0 %}
        </div>
    {% endif %}
    {% endfor %}

    <!-- Display mean grade -->
    <div class="col-md-12">

    {% if grades %}
    <h4>Average:</h4>
    <p>{{grades.get_mean(config)}}</p>
    {% endif %}

    <input class="btn btn-primary" type="submit" value="Submit">
    </div>
    </form>
</div>
</div>
{% endblock %}


{#         <!-- Try to fetch name and description from running config if possible -->
    {% if config.enabled.get(id) %}
        </h1>{{ config.enabled[id].name }}</h1>
    {% else %}
        
    {% endif %} #}