{% extends "base.html.twig" %}


{% set pagename = 'Defining Grades' | trans %}
{% set addBtnTitle = 'Add New Grade Category?' | trans %}
{% set addBtnLink = path('app_settings_grade_category') %}

{% block BeforeAnyCSSFile %}
    {% for file in encore_entry_css_files('select2__init') %}
        <link rel="stylesheet" href="{{ assetsBasePath~file }}">
    {% endfor %}
{% endblock %}

{% block MainContent %}
    <span class="routeFetchSingleItem" data-path="{{ path('app_settings_singleGradeHtml') }}"></span>
    <span class="gradeRoute" data-path="{{ path('app_settings_assign_grade') }}"></span>
    <span class="gradeDefinition" data-path="{{ path('app_settings_getGradeDefinitionOnBaseOfGradeCategory') }}"></span>
    <form method="post" id="gradesList">
        {# Require fields #}
        <div class="kt-portlet">
            <div class="kt-portlet__body">
                {# List of Grade Category#}
                <div class="row">
                    <div class="col-lg-4 col-md-4 col-sm-6 col-xs-6">
                        <label class="col-form-label">{{ 'Grade Category'|trans }}
                            {% if gradeCategories | length < 1 %}`
                                <small><a target="_blank"
                                          href="{{ path('app_settings_grade_category') }}">{{ 'add?' | trans }}</a>
                                </small>
                            {% endif %}
                        </label>
                        <select class="form-control simpleSelect2 gradeChangeDropDown" name="gradeCat">
                            <option value="">{{ 'Select Grade Category' | trans }}</option>
                            {% for gradeCat in gradeCategories %}
                                <option value="{{ gradeCat.id }}">{{ gradeCat.getGradeCategoryName }}</option>
                            {% endfor %}
                        </select>
                        <a target="_blank"
                           href="{{ path('app_settings_grade_category') }}">{{ 'Add New Grade Category?' }}</a>
                    </div>
                </div>
                <hr>
                <span class="gradeItems">
                    {% include 'app_settings/grades/gradeSingleItem.html.twig' with {"studentGrades":studentGrades} %}
                </span>
            </div>

            {# submit button #}
            <div class="kt-portlet__foot">
                <div class="kt-form__actions">
                    <button type="submit" class="btn-primary btn saveGrade">
                        {{ 'Define Grade' | trans }}
                    </button>
                </div>
            </div>
        </div>

    </form>
{% endblock %}

{% block ExtraJsFIles %}
    {% for file in encore_entry_js_files('studentGrade') %}
        <script src="{{ assetsBasePath ~ file }}" type="text/javascript"></script>{% endfor %}
{% endblock %}

{% block documentation %}
    <h5><b>Defining Grades?</b></h5>

    <p>From here we can define Grades Categories, Suppose we have created two Grades Categories,
    </p>
    <ul>
        <li>5th Class Grade</li>
        <li>10th Class Grade</li>
    </ul>

    <h5><b>How to Define Grade?</b></h5>
    <p>
        At the top of active screen, we're having <b>Grade Category</b> Dropdown <br>
        Please select the Grade, that you need to define.
    </p>

    <p>When we Editing/Defining a Grade, we've three Columns:</p>
    <ul>
        <li>
            <b>Grade Name</b> - What is the Grade name eg. A+, A- and etc
        </li>
        <li>
            <b>Grade Apply on What Range of Marks</b> - Grades will apply when selected marks are equal or Greater than.
        </li>
        <li>
            <b>Grade Description</b> - A little comment for the Grade, e.g Excellent, good and etc.
        </li>
    </ul>

    <p>Select the Multiple Grades, as much as you require Click <b>Define Grade</b> button to Save Records</p>

{% endblock %}