{% if students is defined%}
    <div class="col-md-1  table-responsive">
    </div>
    <div class="col-md-10  table-responsive">
       
        <table class="table table-bordered table-hover table-sortable" id="tab_logic">

            <thead>
                <tr>
                    <th style="width:10%;" class="text-center">Matricule</th>
                    <th style="width:30%;" class="text-center" >Nom et prénom</th>
                    <th style="width:30%;" class="text-center" >Note</th>
                    <th style="width:15%;" class="text-center" >Appréciation</th>
                </tr>
            </thead>
            <tbody>
                {% for student in students %}
                    <tr id='addr0' data-id="0" class="hidden">
                        <td data-name="name">
                            {{student.matricule}} 
                        </td>
                        <td data-name="name">
                            {{student.lastname}} {{student.firstname}}
                        </td>
                        <td data-name="desc">
                            <input type="number" step="0.01" id="{{student.matricule}}"  placeholder="0...20"
                              value="{{mark.value}}"     min="0" max="20" class="form-control value" name="{{student.matricule}}note"/>
                        </td>
                        <td data-name="desc">
                            <input type="text" value="{{mark.appreciation}}" placeholder="Appréciation" class="form-control appreciation" name="{{student.matricule}}appr"/>
                        </td>
                    </tr>
                {% endfor %}
            </tbody>

        </table>
    </div>
    <div class="col-md-1  table-responsive">
    </div>
{% endif %}
{% block javascripts %}

    <script type="text/javascript" src="{{ asset('assets/js/jquery.js') }}"></script>
    <script type="text/javascript" >


        $(function () {
            $("td input.value").change(function () {
                var note = $(this).val();
                note = parseInt(note);

                if (note >= 0 && note < 11) {
                    $(this).parent().next().children().val("NA");
                }
                if (note >= 11 && note < 14) {
                    $(this).parent().next().children().val("EA/IA");
                }
                if (note >= 14 && note < 17) {
                    $(this).parent().next().children().val("A");
                }
                if (note >= 17 && note <= 20) {
                    $(this).parent().next().children().val("E");
                }
                

            });
        });



    </script>
{% endblock javascripts %}