<div class="mx-2">
    <button type="submit" class='btn btn-primary' data-toggle="modal" data-target="#modal-details"><i class="fa fa-eye"></i>&nbsp; détails</button>
    <!-- Modal Detail -->
    <div class="modal fade" id="modal-details">
        <div class="modal-dialog modal-lg">
          <div class="modal-content">
            <div class="modal-header">
              <h4 class="modal-title">Détails de l'UE</h4>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div class="modal-body">
                <div class="table p-2">
                <table class="table table-striped">
                    <tr>
                        <th>ECUE {{ue}}</th>
                        <th>LIBELLE</th>
                        <th>CC</th>
                        <th>EXAMEN</th>
                        <th>MOYENNE</th>
                    </tr>
                    {% for ecue in ecues %}
                        <tr class="antr">
                            <td class="antd">{{ecue.code}}</td>
                            <td>{{ecue.libelle}}</td>
                            <td>{{moy_cc}}/20</td>
                            <td>{{moy_ex}}/20</td>
                            <td>12/20</td>
                        </tr>
                    {% endfor %}
                </table>
                <div style="padding:15px;text-align:center;border:1px solid #3498DB">
                    MOYENNE: <strong>12/20</strong>
                </div>
            </div>
            </div>
            <div class="modal-footer justify-content-between">
              <button type="button" class="btn btn-primary" data-dismiss="modal">Fermer</button>
            </div>
          </div>
          <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
      </div>
</div>
