{% extends 'main_app/base_enseignant.html' %}
{% load static %}
{% block page_title %}{{page_title}}{% endblock page_title %}
{% block content %}
<section class="content">
    <div class="container-fluid">
        <!-- Small boxes (Stat box) -->

        <div class="row">
            <div class="col-lg-4 col-6">
                <!-- small box -->
                <div class="small-box ens-dash-item" style="background:#a6dff2;">
                    <div class="inner">
                        <h3>000</h3>

                        <p>UEs Enseignées</p>
                    </div>
                    <div class="icon">
                    </div>
                    {# <a href="#" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a> #}
                </div>
            </div>
            <!-- ./col -->
            <div class="col-lg-4 col-6">
                <!-- small box -->
                <div class="small-box" style="background:#a6dff2;">
                    <div class="inner">
                        <h3>000<sup style="font-size: 20px">%</sup></h3>

                        <p>Volume Horaire Total</p>
                    </div>
                    <div class="icon">
                    </div>
                    {# <a href="#" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a> #}
                </div>
            </div>
            <!-- ./col -->
            <div class="col-lg-4 col-6">
                <!-- small box -->
                <div class="small-box" style="background:#a6dff2;">
                    <div class="inner">
                        <h3>000<sup style="font-size: 20px">%</sup></h3>

                        <p>Taux d'Avancement</p>
                    </div>
                    <div class="icon">
                    </div>
                    {# <a href="#" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a> #}
                </div>
            </div>
            <!-- ./col -->

        </div>
        <div class="row">
            <div class="col-lg-10 offset-1">

                <!-- DONUT CHART -->
                <div class="card card-secondary">
                  <div class="card-header" style="background:#128342;">
                    <h3 class="card-title" >Liste des UEs</h3>

                    <div class="card-tools">
                      <button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i>
                      </button>
                      <button type="button" class="btn btn-tool" data-card-widget="remove"><i class="fas fa-times"></i></button>
                    </div>
                  </div>
                  <div class="card-body">
                      <table class="table table-bordered">
                          <thead>
                            <th style="width:100px;">Code UE</th>
                            <th>Libellé</th>
                          </thead>
                          <tbody>
                            <tr>
                                <td>gg</td>
                                <td class="lue"><a href="#" style="text-decoration:underline;" data-toggle="modal" data-target="#modal-details">Proba-Stats</a></td>
                            </tr>
                          </tbody>
                      </table>
                  </div>
                  <!-- /.card-body -->
                </div>
                <!-- /.card -->
            </div>

            </div>
            </div>
        </section>
 <!-- Modal Detail -->
    <div class="modal fade" id="modal-details">
        <div class="modal-dialog modal-md">
          <div class="modal-content">
            <div class="modal-header">
              <h4 class="modal-title">Ajouter des Notes ?</h4>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div class="modal-body">
                <table class="table table-bordered">
                    <thead>
                        <th>Nombre d'Heures</th>
                        <th>CM</th>
                        <th>TD</th>
                        <th>TP</th>
                    </thead>
                    <tbody>
                        <tr>
                            <td>12</td>
                            <td>12</td>
                            <td>12</td>
                            <td>12</td>
                        </tr>
                    </tbody>
                </table>
                <button type="button" class="btn btn-primary">Ajouter des Notes</button>
            </div>

          </div>
          <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
      </div>
{% endblock content %}

{% block custom_js %}
{% endblock custom_js %}