{% set title, page_active, page_categorie = 'Frais d\'étude', '', '' %}

{% extends 'base.html.twig' %}

{% block title %}Hello AppController!{% endblock %}

{% block body %}

    <div class="content-wrapper">
    <!-- Content Header (Page header) -->
        <div class="content-header">
            <div class="container-fluid">
                <div class="row mb-2">
                    <div class="col-sm-12">
                        <h1 class="m-0 text-dark">Frais d'études <span class="text-primary">3G3(3ème Année Commerce)</span></h1>
                    </div><!-- /.col -->
                </div><!-- /.row -->
            </div>
        </div>
        <div class="content">
            <div class="container-fluid">
                <div class="card">
                    <div class="card-body">
                        <div class="row">
                            <h5 class="text-primary pb-2">Situation général</h5>
                        </div>
                        <div class="row">
                            <div class="col-12 col-sm-6 col-md-3">
                            <div class="info-box">
                            <span class="info-box-icon bg-success elevation-1">0</span>

                            <div class="info-box-content d-flex align-items-center">
                                <span class="info-box-text">Payé(s)</span>
                            </div>
                            <!-- /.info-box-content -->
                            </div>
                            <!-- /.info-box -->
                            </div>
                            <!-- /.col -->
                            <div class="col-12 col-sm-6 col-md-3">
                                <div class="info-box mb-3">
                                <span class="info-box-icon bg-primary elevation-1">0</span>

                                <div class="info-box-content d-flex align-items-center">
                                    <span class="info-box-text">Avance(s)</span>
                                </div>
                                <!-- /.info-box-content -->
                                </div>
                                <!-- /.info-box -->
                            </div>
                            <!-- /.col -->

                            <!-- fix for small devices only -->
                            <div class="clearfix hidden-md-up"></div>

                            <div class="col-12 col-sm-6 col-md-3">
                                <div class="info-box mb-3">
                                <span class="info-box-icon bg-secondary elevation-1">0</span>

                                <div class="info-box-content d-flex align-items-center">
                                    <span class="info-box-text">Non payé(s)</span>
                                </div>
                                <!-- /.info-box-content -->
                                </div>
                                <!-- /.info-box -->
                            </div>
                            <div class="col-12 col-sm-6 col-md-3">
                                <div class="info-box mb-3">
                                <span class="info-box-icon bg-danger elevation-1">0</span>

                                <div class="info-box-content d-flex align-items-center">
                                    <span class="info-box-text">Retard(s)</span>
                                </div>
                                <!-- /.info-box-content -->
                                </div>
                                <!-- /.info-box -->
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card">
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-sm">
                                <thead>
                                        <th scope="col">N°</th>
                                        <th scope="col">Nom</th>
                                        <th scope="col">Nov.</th>
                                        <th scope="col">Dec.</th>
                                        <th scope="col">Jan.</th>
                                        <th scope="col">Fev.</th>
                                        <th scope="col">Mars.</th>
                                        <th scope="col">Avr.</th>
                                        <th scope="col">Mai.</th>
                                        <th scope="col">Juin.</th>
                                        <th scope="col"></th>
                                    </tr>
                                </thead>
                                <tbody class="table-bordered text-center">
                                        <th scope="row">1</th>
                                        <td>Jean</td>
                                        <td class="text-success"><i class="fas fa-check-square"></i></td>
                                        <td>AV</td>
                                        <td class="text-danger"><i class="fas fa-exclamation-circle"></i></td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td class="text-center"><button class="btn btn-default btn-sm">voir</button></td>
                                    </tr>
                                    <tr>
                                        <th scope="row">2</th>
                                        <td>Jacob</td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td class="text-center"><button class="btn btn-default btn-sm">voir</button></td>
                                    </tr>
                                    <tr>
                                        <th scope="row">3</th>
                                        <td>Larry the Bird</td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td class="text-center"><button class="btn btn-default btn-sm">voir</button></td>
                                    </tr>
                                </tbody>
                            </table>    
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

{% endblock %}