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

{% block page_name %}
    <link href="{% static "water_network.css" %}">
    <script src="{% static "waterNetwork.js" %}"></script>
    Réseau de distribution
{% endblock %}

{% block page_content %}

    {% if user.is_authenticated %}

    <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 vous sont proposées">
                <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-users"></i>
                            </div>
                        </div>
                        <div class="widget-summary-col">
                            <div class="summary">
                                <h4 class="title">Nous avons</h4>
                                <div class="info">{{consumers}} consommateurs</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-tint"></i>
                            </div>
                        </div>
                        <div class="widget-summary-col">
                            <div class="summary">
                                <h4 class="title">Le réseau compte</h4>
                                <div class="info">{{water_outlets}} points d'eau</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-water"></i>
                            </div>
                        </div>
                        <div class="widget-summary-col">
                            <div class="summary">
                                <h4 class="title">En {{ current_period }}, nous avons distribué</h4>
                                <div class="info">{{distributed.0}} m³ ({{distributed.1}} gals) d'eau</div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </div>
    </div>

    <section class="panel" data-intro="Consultez, modifiez et supprimez les éléments du réseau de distrigution d'eau potable.">
        <header class="panel-heading">
            <!-- Table block control actions -->
            <div class="panel-actions form-inline">
                {% if user|has_group:"Gestionnaire de zone" %}
                    <a id="call-water-modal" href="#modal-water-element" onclick="setupModalAdd()" class="modal-with-form fa fa-plus" data-toggle="tooltip" title="Ajouter"></a>
                {% endif %}
                <a id="print-water_element" class="fa fa-print clickable" data-toggle="tooltip" title="Imprimer la table"></a>
                <a id="water_element-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">Éléments du réseau</h2>
        </header>
        <div class="panel-body">
            {% include "water_element_table.html" %}
        </div>
    </section>

    {% if user|has_group:"Gestionnaire de zone" %}
        {% include 'water_element_modal.html' %}
    {% endif %}
    {% else %}
        <h3>Contenu réservé, veuillez <a href="{% url 'login' %}">vous connecter</a></h3>
    {% endif %}
{% endblock %}