{% load static %}
{% load custom_tag %}
<!DOCTYPE>
<html>
    <head>
        <title>DOSSIER-{{etudiant.nce}}</title>
        <style type="text/css">
            .minist{
                text-align:center;
                vertical-align:top;
                width:150px;
            }
            .tit{
                font-weight:bold;
                font-size:28px;
                margin: -5px 2px;
                text-align:center;
            }
            .tit-2{
                font-weight:bold;
                font-size:22px;
                margin: -5px 2px;
                text-align:center;
            }
            .table{
                border:1px solid #000000;
                border-collapse:collapse;
                float:right;
            }
            .cell{
                width:30px;
                height:30px;
                text-align:center;
                font-size:18px;
                font-weight:bold;
                padding-top: 5px;
            }
            .cell-2{
                width:15px;
                height:15px;
                text-align:center;
                padding-top: 5px;
            }
            .bg-black{
                background-color:#000000;
            }
            .info{
                font-size:12px;
            }
            .inf-label{
                font-size:12px;
                padding-bottom:-5px;
            }
            .inf-content{
                font-size:16px;
            }
            .cntn{
                font-weight:bold;
            }
            .inf-content td{
                width:700px;
                border-bottom:1px dotted #E5E8E8;
                padding-bottom:-3px;
            }
            .inf-ctn{
                margin:10px 0px;
            }
            .hr {
              height:5px;
              background-color:#000000;
              width:600px;
              font-size:9px;
              line-heught:2px;
            }
            .par-tit{
                font-size:26px;
                font-weight:bold;
                text-align:center;
                margin: 5px 0px 0px 0px;
            }
            .pacrs td{
                height:100px;
                font-size:16px;
            }

            @page{
                size: a4 portrait;
                margin: 5px 25px;
            }

        </style>
    </head>
    <body>

         <!-- <img src="static/assets/img/usp-pdf-header.png"> -->
          <div>

              <table>
                  <tr>
                      <td class="minist">
                          <br/><img src="static/inscription/assets/img/logousp.png" width="120" height="100">
                      </td>
                      <td><br/>
                          <p class="tit">UNIVERSITE DE SAN-PEDRO</p>
                          <p class="tit-2">SCOLARITE CENTRALE</p>
                          <p class="tit">DOSSIER D'INSCRIPTION</p>
                          <br/>
                      </td>
                      <td class="minist" rowspan="2">
                          <br/>
                          {% if etudiant.avatar %}
                          <img src="media/{{etudiant.avatar}}" width="110" height="150" style="border:3px solid #000000;">
                          {% else %}
                          <img src="static/inscription/assets/img/user-default2.png" width="110" height="150" style="border:3px solid #000000;">
                          {% endif %}
                      </td>
                  </tr>
                  <tr>
                      <td colspan="2">
                          <table>
                              <tr>
                                  <td width="110"><span style="font-size:12px;float:left;">N<sup>o</sup> de carte d'étudiant(e):</span></td>
                                  <td>
                              <table class="table">
                              <tr>
                                  {% if etudiant.nce %}
                                      {% for nb in etudiant.nce %}
                                      <td class="cell">{{nb}}</td>
                                      {% endfor %}
                                  {% else %}
                                  <td class="cell"></td>
                                  <td class="cell"></td>
                                  <td class="cell"></td>
                                  <td class="cell"></td>
                                  <td class="cell"></td>
                                  <td class="cell"></td>
                                  <td class="cell"></td>
                                  <td class="cell"></td>
                                  <td class="cell"></td>
                                  <td class="cell"></td>
                                  <td class="cell"></td>
                                  <td class="cell"></td>
                                  {% endif %}
                              </tr>
                          </table>
                                  </td>
                              </tr>
                          </table>
                          <br/>
                      </td>
                  </tr>
              </table>
             <!-- CIVILITE-->
              <table style="font-size:14px;vertical-align:middle;margin-top:-10px;">
                  <tr>
                      <td>
                          <table width="250">
                              <tr>
                                  <td style="text-align:center;">Civilité:</td>
                                  <td width="50">
                                      <table width="35">
                                          <tr>
                                              <td style="padding-top:3px;">M.</td>
                                              <td>
                                                  <table border="1">
                                                     <tr><td class="cell-2 {% if etudiant.civilite == 'M' %}bg-black{% endif %}"></td></tr>
                                                  </table>
                                              </td>
                                          </tr>
                                      </table>
                                  </td>
                                  <td width="50">
                                      <table width="50">
                                          <tr>
                                              <td style="padding-top:3px;margin-right:2px;">Mme </td>
                                              <td>
                                                  <table border="1">
                                                     <tr><td class="cell-2 {% if etudiant.civilite == 'Mme' %}bg-black{% endif %}"></td></tr>
                                                  </table>
                                              </td>
                                          </tr>
                                      </table>
                                  </td>
                                  <td width="50">
                                      <table width="45">
                                          <tr>
                                              <td style="padding-top:3px;">Mlle </td>
                                              <td>
                                                  <table border="1">
                                                     <tr><td class="cell-2 {% if etudiant.civilite == 'Mlle' %}bg-black{% endif %}"></td></tr>
                                                  </table>
                                              </td>
                                          </tr>
                                      </table>
                                  </td>
                              </tr>
                          </table>
                      </td>
                  </tr>
              </table>

            <!-- INFOS PERSO -->
            <div class="inf-ctn">
                <table>
                    <tr>
                        <td width="30" class="inf-label"><span>Nom :</span></td>
                        <td>
                            <table class="inf-content" >
                                  <tr><td><span class="cntn">{{etudiant.nom}} </span></td></tr>
                            </table>
                        </td>
                    </tr>
                </table>
            </div>

              <div class="inf-ctn">
                  <table>
                    <tr>
                        <td width="50" class="inf-label"><span>Prénoms :</span></td>
                        <td>
                            <table class="inf-content" >
                                  <tr><td><span class="cntn">{{etudiant.prenoms}} </span></td></tr>
                            </table>
                        </td>
                    </tr>
                  </table>
              </div>

              <div class="inf-ctn">
                  <table>
                    <tr>
                        <td width="43" class="inf-label"><span>Né(e) le :</span></td>
                        <td>
                            <table class="inf-content" >
                                  <tr><td><span class="cntn">{% if not etudiant.datenaiss %}<span style="color:#fff;">hh</span>{% else %} {{etudiant.datenaiss|date:'d/m/Y'}}{% endif %} </span> à <span class="cntn">{% if not etudiant.lieunaiss %}{% else %} {{etudiant.lieunaiss}}{% endif %} </span></td></tr>
                            </table>
                        </td>
                    </tr>
                  </table>
              </div>

              <div class="inf-ctn">
                  <table>
                    <tr>
                        <td width="50" class="inf-label"><span>Nationalité :</span></td>
                        <td width="220">
                            <table class="inf-content">
                                  <tr><td><span class="cntn">{% if not etudiant.nationalite %}<span style="color:#fff;">hh</span> {% else %} {{etudiant.nationalite}}{% endif %} </span></td></tr>
                            </table>
                        </td>
                        <td width="43" class="inf-label"><span>Boursier :</span></td>
                        <td>
                            <table class="inf-content">
                                  <tr><td><span class="cntn">{% if not etudiant.boursier %}<span style="color:#fff;">hh</span>{% else %}{{etudiant.boursier}} {% endif %} </span></td></tr>
                            </table>
                        </td>
                    </tr>
                  </table>
              </div>

              <div class="inf-ctn">
                  <table>
                    <tr>
                        <td width="50" class="inf-label"><span>Profession :</span></td>
                        <td width="150">
                            <table class="inf-content">
                                  <tr><td><span class="cntn">{% if not etudiant.profession %}<span style="color:#fff;">hh</span>{% else %}{{etudiant.profession}} {% endif %}</span></td></tr>
                            </table>
                        </td>
                        <td width="85" class="inf-label"><span> Autres (à préciser) :</span></td>
                        <td>
                            <table class="inf-content">
                                  <tr><td><span class="cntn">{% if not etudiant.autre_profession %}<span style="color:#fff;">hh</span>{% else %}{{etudiant.autre_profession}} {% endif %}</span></td></tr>
                            </table>
                        </td>
                    </tr>
                  </table>
              </div>

              <div class="inf-ctn">
                  <table>
                    <tr>
                        <td width="100" class="inf-label"><span>Situation matrimoniale :</span></td>
                        <td width="130">
                            <table class="inf-content">
                                  <tr><td><span class="cntn">{% if not etudiant.sit_matri %}<span style="color:#fff;">hh</span>{% else %}{{etudiant.sit_matri}} {% endif %} </span></td></tr>
                            </table>
                        </td>
                        <td width="75" class="inf-label"><span> Groupe sanguin :</span></td>
                        <td>
                            <table class="inf-content">
                                  <tr><td><span class="cntn">{% if not etudiant.groupe_sanguin %}<span style="color:#fff;">hh</span>{% else %}{{etudiant.groupe_sanguin}} {% endif %} </span></td></tr>
                            </table>
                        </td>
                        <td width="75" class="inf-label"><span> Nombre d'enfant :</span></td>
                        <td>
                            <table class="inf-content">
                                  <tr><td><span class="cntn">{% if not etudiant.nb_enfant %}<span style="color:#fff;">hh</span>{% else %}{{etudiant.nb_enfant}} {% endif %} </span></td></tr>
                            </table>
                        </td>
                    </tr>
                  </table>
              </div>

              <div class="inf-ctn">
                  <table>
                    <tr>
                        <td width="97" class="inf-label"><span>Handicap (à préciser) :</span></td>
                        <td>
                            <table class="inf-content">
                                  <tr><td><span class="cntn">{% if not etudiant.handicap %}<span style="color:#fff;">hh</span>{% else %}{{etudiant.handicap}} {% endif %} </span></td></tr>
                            </table>
                        </td>
                    </tr>
                  </table>
              </div>

              <div class="inf-ctn">
                  <table>
                    <tr>
                        <td width="50" class="inf-label"><span>Cellulaire :</span></td>
                        <td width="150">
                            <table class="inf-content">
                                  <tr><td><span class="cntn">{% if not etudiant.phone %}<span style="color:#fff;">hh</span>{% else %}{{etudiant.phone}} {% endif %} </span></td></tr>
                            </table>
                        </td>
                        <td width="33" class="inf-label"><span> Email :</span></td>
                        <td>
                            <table class="inf-content">
                                  <tr><td><span class="cntn">{{etudiant.email}} </span></td></tr>
                            </table>
                        </td>
                    </tr>
                  </table>
              </div>

              <div class="inf-ctn">
                  <table>
                    <tr>
                        <td width="150" class="inf-label"><span>Quartier de résidence à San-Pédro :</span></td>
                        <td>
                            <table class="inf-content">
                                  <tr><td><span class="cntn">{% if not etudiant.quartier %}<span style="color:#fff;">hh</span>{% else %}{{etudiant.quartier}} {% endif %} </span></td></tr>
                            </table>
                        </td>
                    </tr>
                  </table>
              </div>

              <div class="inf-ctn">
                  <table>
                    <tr>
                        <td width="220" class="inf-label"><span>Adresse postale téléphonique des parents ou tuteurs  :</span></td>
                        <td>
                            <table class="inf-content">
                                  <tr>
                                      <td>
                                          <span class="cntn">{% if not etudiant.adresse_post %}<span style="color:#fff;">hh</span>{% else %}{{etudiant.adresse_post}} {% endif %} </span>/ Père
                                          (<span class="cntn">{% if not etudiant.contact_pere %}<span style="color:#fff;">hh</span>{% else %}{{etudiant.contact_pere}} {% endif %})  </span>&nbsp;&nbsp; / Tuteur
                                          (<span class="cntn">{% if not etudiant.contact_tuteur %}<span style="color:#fff;">hh</span>{% else %}{{etudiant.contact_tuteur}} {% endif %})  </span>
                                      </td>
                                  </tr>
                            </table>
                        </td>
                    </tr>
                  </table>
              </div>

              <div class="inf-ctn">
                  <table>
                    <tr>
                        <td width="104" class="inf-label"><span>Situation géographique :</span></td>
                        <td width="180">
                            <table class="inf-content">
                                  <tr><td><span class="cntn">{% if not etudiant.quartier %}<span style="color:#fff;">hh</span>{% else %}{{etudiant.quartier}} {% endif %} </span></td></tr>
                            </table>
                        </td>
                        <td width="36" class="inf-label"><span> Tuteur :</span></td>
                        <td>
                            <table class="inf-content">
                                  <tr><td><span class="cntn">{% if not etudiant.nom_tuteur %}<span style="color:#fff;">hh</span>{% else %}{{etudiant.nom_tuteur}} {% endif %}  </span></td></tr>
                            </table>
                        </td>
                    </tr>
                  </table>
              </div>
              <div class="inf-ctn">
                  <table>
                    <tr>
                        <td width="240" class="inf-label"><span>Personne à contacter en cas d'urgence (nom et cellulaire) :</span></td>
                        <td>
                            <table class="inf-content">
                                <tr><td><span class="cntn">{% if not etudiant.contact_urgence %}<span style="color:#fff;">hh</span>{% else %}{{etudiant.contact_urgence}} {% endif %} </span></td></tr>
                            </table>
                        </td>
                    </tr>
                  </table>
              </div>
              <!-- SEPARATEUR -->
              <center>
              <table>
                  <tr>
                      <td></td>
                      <td class="hr"></td>
                      <td></td>
                  </tr>
              </table>
              </center>
              <!-- CURSUS UNIVERSITAIRE -->
              <p class="par-tit">PARTIE RESERVEE A L'ADMINISTRATION</p>
              <table border="2" style="font-size:14px;" class="pacrs">
                  <tr>
                      <th>ANNEE ACADEMAIQUE</th>
                      <th>UFR OU ECOLE</th>
                      <th>PARCOURS</th>
                      <th>SPECIALITE</th>
                      <th width="170" style="padding:5px;">OBSERVATION<br/>(Admis(e)/Ajourné(e)/Dérogé)(é))</th>
                  </tr>
                  {% for an in annee %}
                  <tr>
                      <td height="100" style="text-align:center">{{an}}</td>
                      <td style="padding:3px;">
                          <strong>{{etudiant.ufr.code}}</strong>:
                          {{etudiant.ufr}}
                      </td>
                      <td></td>
                      <td></td>
                      <td style="text-align:center;">
                          {{etudiant|decision_annuelle_etudiant_by_annee:an}}
                      </td>
                  </tr>
                  {% endfor %}
              </table>

          </div>
    </body>
</html>