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

{% block stylesheets %}
<style>



</style>
{% endblock %}


{% block body %}

<div class="container-fluid">

          <!-- Body -->
    <div class="header-body">
        <div class="row align-items-end">
            <div class="col">

                <!-- Pretitle -->
                <h6 class="header-pretitle">
                  {{date}}
                </h6>

                <!-- Title -->
                <h2 class="header-title">
                  Impayés
                </h2>

            </div>
            <div class="col-auto">

                <ul class="nav">
                    {# SELECTOR #}
                    {% for date in selector %}
                    <li class="nav-item">
                    <small>  <a class="nav-link switch nb-1" aria-current="page"  href="{{ path('app_impayes', {insertion: date.insertion|date('Y-m-d')}) }}">{{ date.periode }}</a> </small>
                    </li>
                    {% endfor %}
                </ul>

            </div>
        </div> <!-- / .row -->
    </div> <!-- / .header-body -->
</div>
<br>

<div class="container-fluid">

    <div class="row">
        <div class="col-12 col-lg-6 col-xl">
            <!-- Value  -->
            <div class="card">
                <div class="card-body">
                    <div class="row align-items-center">
                        <div class="col text-center">
                            <!-- Title -->
                            <span class="text-uppercase text-muted mb-2">
                            <small>Contrats en impayé</small>
                            </span>
                            <br>
                            <!-- Heading -->
                            <span class="h4 mb-0">
                            {{ total[1] | number_format(0, ',', ' ') }}
                            </span>
                        </div>
                    </div> <!-- / .row -->
                </div>
            </div>
        </div>
        <div class="col-12 col-lg-6 col-xl">
            <!-- Value  -->
            <div class="card">
                <div class="card-body">
                    <div class="row align-items-center">
                        <div class="col text-center">
                            <!-- Title -->
                            <span class="text-uppercase text-muted mb-2">
                            <small>Montant Appel</small>
                            </span>
                            <br>
                            <!-- Heading -->
                            <span class="h4 mb-0">
                            {{ callAmount[1] | number_format(0, ',', ' ') }} €
                            </span>
                        </div>
                    </div> <!-- / .row -->
                </div>
            </div>
        </div>
        <div class="col-12 col-lg-6 col-xl">
            <!-- Value  -->
            <div class="card">
                <div class="card-body">
                    <div class="row align-items-center">
                        <div class="col text-center">
                            <!-- Title -->
                            <span class="text-uppercase text-muted mb-2">
                            <small>Montant créance</small>
                            </span>
                            <br>
                            <!-- Heading -->
                            <span class="h4 mb-0">
                            {{ overdueAmount[1] | number_format(0, ',', ' ') }} €
                            </span>
                        </div>
                    </div> <!-- / .row -->
                </div>
            </div>
        </div>
        <div class="col-12 col-lg-6 col-xl">
            <!-- Value  -->
            <div class="card">
                <div class="card-body">
                    <div class="row align-items-center">
                        <div class="col text-center">
                            <!-- Title -->
                            <span class="text-uppercase text-muted mb-2">
                            <small>Montant créance restante</small>
                            </span>
                            <br>
                            <!-- Heading -->
                            <span class="h4 mb-0">
                            {{ remOverdueAmount[1] | number_format(0, ',', ' ') }} €
                            </span>
                        </div>
                    </div> <!-- / .row -->
                </div>
            </div>
        </div>
    </div>


    <br>
    <div class="row">
      <div class="col text-center">
          <a class="btn btn-dark btn-lg" role="button" href="{{ path('app_excel_impayes', {insertion: dated}) }}">Télécharger la liste des impayés</a>
      </div>
    </div>
</div>

{% endblock %}