<section class="content">
{% load unicorn %}
{% unicorn_scripts %}
<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">
                <!-- general form elements -->
                <!-- /.card -->
                <div class="row">
                    <div class="col-md-12 not-lib" style="color:#179acf;font-size:26px;font-weight:bold;align:left;width:100%;margin-bottom:25px;margin-top:-35px;"
                    >
                        <span>({{ue.code}}) : {{ue.libelle}}</span>
                    </div>
                </div>
                <div class="card">
                    <div class="card-header text-white" style="background: #21618C"><h3 class="card-title">Nouvelle evaluation</h3></div>
                    <div class="my-2 row">
                        {% if messages %}
                        <ul class="messages">
                            {% for message in messages %}
                            <li {% if message.tags %} class="{{ message.tags }} text-danger"{% endif %}>{{ message }}</li>
                            {% endfor %}
                        </ul>
                        {% endif %}
                    </div>
                    <div class="mt-2 row">

                        <div class="dropdown my-2 col-1 pt-4 ml-2">
                            <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                Import/Export
                            </button>
                            <div class="dropdown-menu px-2" aria-labelledby="dropdownMenuButton">
                                <a class="dropdown-item btn bg-primary" href="{% url 'EspaceEnseignant:import' ecueId %}">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" class="bi bi-arrow-down-right-circle mb-1 mr-1" viewBox="0 0 16 16">
                                        <path fill-rule="evenodd" d="M1 8a7 7 0 1 0 14 0A7 7 0 0 0 1 8zm15 0A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.854 5.146a.5.5 0 1 0-.708.708L9.243 9.95H6.475a.5.5 0 1 0 0 1h3.975a.5.5 0 0 0 .5-.5V6.475a.5.5 0 1 0-1 0v2.768L5.854 5.146z"/>
                                    </svg>
                                    <span class="h3">Importer notes</span>
                                </a>
                                <div class="dropdown-divider"></div>
                                <a class="dropdown-item btn bg-info" href="{% url 'EspaceEnseignant:export' ecueId sessionId 0 %}">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" class="bi bi-printer mb-1" viewBox="0 0 16 16">
                                        <path d="M2.5 8a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1z"/>
                                        <path d="M5 1a2 2 0 0 0-2 2v2H2a2 2 0 0 0-2 2v3a2 2 0 0 0 2 2h1v1a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2v-1h1a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-1V3a2 2 0 0 0-2-2H5zM4 3a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v2H4V3zm1 5a2 2 0 0 0-2 2v1H2a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1h-1v-1a2 2 0 0 0-2-2H5zm7 2v3a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-3a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1z"/>
                                    </svg>
                                    <span class="h3">Exporter notes</span>
                                </a>
                            </div>
                        </div>

                        {% comment %} <div class="ml-2 my-2 col-1">
                            <a class="btn btn-secondary" href="{% url 'EspaceEnseignant:import' ecueId %}">Importer notes</a>
                        </div> {% endcomment %}
                        <div class="my-2 col-3 offset-1">
                            <label>Type evaluation</label>
                            <select u:model="typeEvaluationId" class="form-control">
                                {% for typeEvaluation in typeEvaluations %}
                                    <option value="{{typeEvaluation.id}}">{{typeEvaluation.libelle}}</option>
                                {% endfor %}    
                            </select>
                        </div>

                        {% if typeEvaluationId == '1' %}
                            <div class="my-2 col-3">
                                <label>Session</label>
                                <select u:model="sessionId" class="form-control">
                                    {% for session in sessions %}
                                        <option value="{{session.id}}">{{session.libelle}}</option>
                                    {% endfor %}    
                                </select>
                            </div>
                        {% endif %}

                        {% if not disabled %}
                            <div class="my-2 col-3">
                                <label>Evaluation</label>
                                <div class="d-flex">
                                    <input type="text" class="form-control" autocompletd placeholder="cr&eacuteer une nouvelle evaluation" u:model.lazy="evaluation">
                                    <button class="btn btn-primary" u:click="saveEvaluation">Valider</button>
                                </div>
                            </div>
                        {% endif %}
                    </div>
                </div>
                <div class="card card-primary">
                    <div class="card-header text-white" style="background: #21618C"><h3 class="card-title">AJOUTER DES NOTES</h3></div>
                </div>


<!------------End Test------------->
                <div class="table p-2">
                    <table class="table table-striped">
                        <tr>
                            <th>NCE</th>
                            <th>Nom</th>
                            <th>Prénoms</th>
                            {% for evaluation in listEvaluations %}
                                <th>
                                    {{evaluation.libelle}}
                                    {% if not disabled %}
                                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash3 text-danger shadow" viewBox="0 0 16 16" u:click="deleteEvaluation({{evaluation.id}})">
                                            <path d="M6.5 1h3a.5.5 0 0 1 .5.5v1H6v-1a.5.5 0 0 1 .5-.5ZM11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3A1.5 1.5 0 0 0 5 1.5v1H2.506a.58.58 0 0 0-.01 0H1.5a.5.5 0 0 0 0 1h.538l.853 10.66A2 2 0 0 0 4.885 16h6.23a2 2 0 0 0 1.994-1.84l.853-10.66h.538a.5.5 0 0 0 0-1h-.995a.59.59 0 0 0-.01 0H11Zm1.958 1-.846 10.58a1 1 0 0 1-.997.92h-6.23a1 1 0 0 1-.997-.92L3.042 3.5h9.916Zm-7.487 1a.5.5 0 0 1 .528.47l.5 8.5a.5.5 0 0 1-.998.06L5 5.03a.5.5 0 0 1 .47-.53Zm5.058 0a.5.5 0 0 1 .47.53l-.5 8.5a.5.5 0 1 1-.998-.06l.5-8.5a.5.5 0 0 1 .528-.47ZM8 4.5a.5.5 0 0 1 .5.5v8.5a.5.5 0 0 1-1 0V5a.5.5 0 0 1 .5-.5Z"/>
                                        </svg>
                                    {% endif %}
                                </th>
                            {% endfor %}
                        </tr>
                        {% for etudiantUe in etudiantUes %}
                            <tr class="antr">
                                <td class="antd">{{etudiantUe.etudiant.nce}}</td>
                                <td>{{etudiantUe.etudiant.nom}}</td>
                                <td>{{etudiantUe.etudiant.prenoms}}</td>
                                {% for evaluation in listEvaluations %}
                                    {% comment %} {% csrf_token %} {% endcomment %}
                                    {% comment %} {% unicorn 'note-row' parent=view key=etudiantUe.etudiant.id etudiant=etudiantUe.etudiant evaluation=evaluation %} {% endcomment %}
                                     <td>
                                        <input type="text" size="4" 
                                            u:model.defer="notes.{{etudiantUe.etudiant.id}}.{{evaluation.id}}"
                                            {% if disabled %}disabled{% endif %}
                                            >
                                    </td>
                                {% endfor %}
                            </tr>
                        {% empty%}
                            <tr>
                                <td class="h4" colspan="3">La liste est vide ....</td>
                            </tr>
                        {% endfor %}
                        
                    </table>
                    <div class="d-flex" style="float:right;">
                        {% if not disabled %}
                            <button class="btn btn-primary" type="submit" u:click="enregistrer">Enregistrer</button>
                            {% comment %} <button class="btn btn-primary" type="submit" onclick="Unicorn.call('note-row', 'save');">Enregistrer</button> {% endcomment %}
                            <button class="btn btn-primary mx-3" type="submit" u:click="valider">Valider</button>
                        {% endif %}
                        {% if notes %}
                        <a href="{% url 'EspaceEnseignant:deliberation' ecueId %}" class='btn btn-primary'>
                            <i class="fa fa-exclamation-triangle"></i>&nbsp; Délibérer
                        </a>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>


<script>
    function notification(type, msg){
        Swal.fire( type + " !", msg, type)
    }

</script>

</div>