{# Tableau de bord utilisateur #}

{% extends "base.j2" %}
{% block styles %}
{{super()}}
<link type="text/css" rel="stylesheet" href="{{scu.STATIC_DIR}}/libjs/qtip/jquery.qtip-3.0.3.min.css" />
<link rel="stylesheet" type="text/css" href="{{scu.STATIC_DIR}}/DataTables/datatables.min.css" />
<style>
.ub-formsemestres {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}
.ub-formsemestre {
  flex-basis: 256px; /* largeur boite par défaut */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: #fdcf52;
  border-radius: 18px;
  margin-left: 10px;
  margin-right: 10px;
  margin-bottom: 10px;
  min-width: 128px;
  max-width: fit-content;
  --color-links: rgb(153, 51, 51);
}
.ub-sem-titre {
  font-weight: bold;
  font-size: 110%;
  padding: 8px 16px;
}
.ub-sem-titre a.stdlink, .ub-sem-titre a.stdlink:visited {
  color: black;
  text-decoration: none;
}
.ub-sem-titre a.stdlink:hover {
  color: var(--color-links);
  text-decoration: underline;
}
.ub-sem-modimpls {
  background-color: rgb(210, 210, 210);
  border-bottom-left-radius: 18px;
  border-bottom-right-radius: 18px;
  font-weight: normal;
  font-style: normal;
  margin-top: 0px;
  margin-bottom: 0px;
  padding: 8px 16px;
}
.ub-formsemestre .code {
  display: inline-block;
  margin-right: 8px;
  min-width: 48px;
}

.ub-formsemestre a.formsemestre_status_link:hover {
  color: var(--color-links);
  text-decoration: underline;
}
.ub-formsemestre a.formsemestre_status_link, .ub-formsemestre a.formsemestre_status_link:visited{
  color: black;
  text-decoration: none;
}

div.scobox.saisies-notes {
  background-color: rgb(243, 255, 255);
}
</style>
{% endblock %}

{% block app_content %}

<div class="tab-content">
    <h2>{{user.get_nomcomplet()}}</h2>

    {% for dept_id in formsemestres_by_dept %}
        <h3>Modules dans le <a class="stdlink" href="{{
            url_for('scolar.index_html', scodoc_dept=depts[dept_id].acronym)}}"
            >département {{ dept_names[dept_id] }}</a></h3>
        <div class="ub-formsemestres">
        {% for formsemestre in formsemestres_by_dept[dept_id] %}
            <div class="ub-formsemestre">
                <div class="ub-sem-titre">{{formsemestre.html_link_status()|safe}}</div>
                <div class="ub-sem-modimpls">
                {% for modimpl in modimpls_by_formsemestre[formsemestre.id] %}
                    <div>
                        <span class="code"><a class="stdlink" href="{{
                            url_for('notes.moduleimpl_status',
                                scodoc_dept=formsemestre.departement.acronym, moduleimpl_id=modimpl.id)
                        }}">{{modimpl.module.code}}</a>
                        </span>
                        <span><a class="formsemestre_status_link" href="{{
                            url_for('notes.moduleimpl_status',
                                scodoc_dept=formsemestre.departement.acronym, moduleimpl_id=modimpl.id)
                        }}">{{modimpl.module.titre_str()}}</a>
                        </span>
                        <span><a class="stdlink" href="{{
                            url_for(
                            'assiduites.signal_assiduites_group',
                            scodoc_dept=formsemestre.departement.acronym,
                            formsemestre_id=formsemestre.id,
                            moduleimpl_id=modimpl.id,
                            )}}"><img height="28px" src="{{scu.STATIC_DIR}}/icons/absences.svg"
                                title="saisir absences" alt="saisir absences"/>
                            </a>
                        </span>
                    </div>
                {% else %}
                    <div class="empty">pas de modules</div>
                {% endfor %}
                </div>
            </div>
        {% endfor %}
        </div>
    {% endfor %}

  <div class="scobox saisies-notes">
  {% if current_user.is_administrator() or current_user.id == user.id %}
    <div class="scobox-title">
      Dernières saisies de notes par {{user.get_prenomnom()}}
    </div>
    <table id="saisies-notes" class="display" style="width:100%">
        <thead>
            <tr>
                <th>Date</th>
                <th>Évaluation</th>
                <th>Étudiant</th>
                <th>Note</th>
            </tr>
        </thead>
        <tbody>
            <!-- Data will be loaded dynamically via JavaScript -->
        </tbody>
    </table>
  {% else %}
    <div class="help">
      Vous n'avez pas les droits pour voir les notes de cet utilisateur.
    </div>
  {% endif %}
  </div>
</div>


{% endblock app_content %}


{% block scripts %}
  {{ super() }}
  <script src="{{scu.STATIC_DIR}}/js/etud_info.js"></script>
  <script src="{{scu.STATIC_DIR}}/DataTables/datatables.min.js"></script>
  <script>
  $(document).ready(function() {
    $('#saisies-notes').DataTable({
        "processing": true,
        "serverSide": true,
        "ajax": {
          "url": "{{ url_for('apiweb.operations_user_notes',
            scodoc_dept=current_user.dept or g.scodoc_dept or fallback_dept.acronym,
            uid=user.id) }}",
          "type": "GET"
        },
        "columns": [
          { "data": "date_dmy", "orderable": false },
          { "data": "evaluation_link", "orderable": false },
          { "data": "etudiant_link", "orderable": false },
          { "data": "value", "orderable": false }
        ],
        "language": {
            search: "Chercher (date, titre, étudiant) :", // Change the "Search:" label
            lengthMenu: "Show _MENU_ records per page"
        }
    });
  });
  </script>
{% endblock %}