{# Tableau de bord utilisateur #}

{% extends "sco_page.j2" %}

{% block app_content %}
<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;
}
</style>

<div class="tab-content">
    <h2>Votre tableau de bord, {{user.get_nomcomplet()}}</h2>

    <h3>Vos modules</h3>
    <div class="ub-formsemestres">
    {% for formsemestre in formsemestres %}
        <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>
                </div>
            {% else %}
                <div class="empty">pas de modules</div>
            {% endfor %}
            </div>
        </div>
    {% endfor %}
    </div>
</div>

{% endblock app_content %}