{% extends "base.html" %}
{% load staticfiles %}
{% load django_tables2 %}
{% load compress %}

{% block page_import %}
    <script src="{% static "javascripts/tables/genericTableHandler.js" %}"></script>
    <script src="{% static "consumerTableHandler.js" %}"></script>
    <script src="{% static "consumerFormHandler.js"%}"></script>
    <script src="{% static "consumers.js" %}"></script>

    <script src="{% static "vendor/jquery-datatables/media/js/jquery.dataTables.min.js" %}"></script>
    <script src="{% static "vendor/jquery-datatables-bs3/assets/js/datatables.js" %}"></script>

    <link rel="stylesheet" href="{% static "vendor/jquery-datatables-bs3/assets/css/datatables.css" %}"/>
{% endblock %}

{% block page_name %}
    Consommateurs
{% endblock %}

{% block page_content %}

    <div class="row">
        <div class="col-md-6">
            {% include "components/graphs/block_all_graphs.html" %}
        </div>
        <div class="col-md-6">
            <section class="panel" data-intro="Des informations rapides sont disponibles sur les consommateurs de la zone">
                <header class="panel-heading">
                    <div class="panel-actions form-inline">
                        <a href="#" class="fa fa-caret-down" data-toggle="tooltip" title="Minimiser""></a>
                    </div>
                    <h2 class="panel-title">{{ zone_name }}</h2>
                </header>
                <div class="panel-body">
                    <!-- Network users count -->
                    <div class="widget-summary">
                        <div class="widget-summary-col widget-summary-col-icon">
                            <div class="summary-icon-sm bg-primary">
                                <i class="fa fa-home"></i>
                            </div>
                        </div>
                        <div class="widget-summary-col">
                            <div class="summary">
                                <h4 class="title">Nous avons</h4>
                                <div class="info">{{ consumer_groups }} foyers consommant de l'eau</div>
                            </div>
                        </div>
                    </div>
                    <!-- Network outlets count -->
                    <div class="widget-summary">
                        <div class="widget-summary-col widget-summary-col-icon">
                            <div class="summary-icon-sm bg-primary">
                                <i class="fa fa-users"></i>
                            </div>
                        </div>
                        <div class="widget-summary-col">
                            <div class="summary">
                                <h4 class="title">Nous avons</h4>
                                <div class="info">{{ consumer_individuals }} consommateurs individuels</div>
                            </div>
                        </div>
                    </div>
                    <!-- Network outputted water count -->
                    <div class="widget-summary">
                        <div class="widget-summary-col widget-summary-col-icon">
                            <div class="summary-icon-sm bg-primary">
                                <i class="fa fa-money-bill"></i>
                            </div>
                        </div>
                        <div class="widget-summary-col">
                            <div class="summary">
                                <h4 class="title">Pour la période en cours ({{ current_period }})</h4>
                                <div class="info">{{ unpaid_bills }} foyers n'ont pas payé</div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </div>
    </div>

    <section class="panel" data-intro="Vous pouvez consulter et modifier les consommateurs de votre zone.">
        <header class="panel-heading">
            <!-- Table block control actions -->
            <div class="panel-actions form-inline">
                <a id="call-consumer-modal" href="#modal-consumer" onclick="setupModalConsumerAdd()" class="modal-with-form fa fa-plus" data-toggle="tooltip" title="Ajouter"></a>
                <a id="print-consumer" href="#" class="fa fa-print clickable" data-toggle="tooltip" title="Imprimer la table"></a>
                <a id="consumer-options" class="fas fa-cog clickable" data-toggle="tooltip" title="Options"></a>
                <a href="#" class="fa fa-caret-down" data-toggle="tooltip" title="Minimiser""></a>
            </div>
            <h2 class="panel-title">Consommateurs</h2>
        </header>
        <div class="panel-body">
            {% include "consumer_table.html" %}
        </div>
    </section>

    {% include "consumer_modal.html" %}

{% endblock %}