{% extends 'base.html' %}
{% load static %}
{% load group_filter %}

{% block page_import %}
    <script src="{% static "zoneManagement.js"%}"></script>
    <script src="{% static "zoneTableGenerator.js" %}"></script>
    <script src="{% static "vendor/select2/select2.js" %}"></script>
    <link href="{% static "vendor/select2/select2.css" %}" rel="stylesheet">
{% endblock %}

{% block page_name %}
    Gestion de {{ zone_name }}
{% endblock %}

{% block page_content %}
    {% if user.is_authenticated and user|get_group == 'Gestionnaire de zone' %}
    <div class="row">
        <div class="col-md-4">
            <section class="panel" data-intro="Vous pouvez voir votre zone et ses sous-zones, cliquez sur une zone pour filtrer les autres tables">
                <header class="panel-heading">
                    <!-- Table block control actions -->
                    <div class="panel-actions form-inline">
                        <a href="#modalZone" onclick="setupModalZoneAdd()" class="modal-with-form fa fa-plus" data-toggle="tooltip" title="Ajouter" id="plus-zone"></a>
                        <a id="zone-options" class="fas fa-cog clickable" data-toggle="tooltip" title="Options" data-toggle="tooltip" title="Options avancées"></a>
                        <a href="#" class="fa fa-caret-down" data-toggle="tooltip" title="Minimiser""></a>
                    </div>
                    <h2 class="panel-title">Zones</h2>
                    <h2 class="panel-subtitle">Cliquez sur une zone pour filtrer les gestionnaires et éléments</h2>
                </header>
                <div class="panel-body">
                    {% include 'zones_table.html' %}
                </div>
            </section>
        </div>
        <div class="col-md-8">
            <section class="panel" data-intro="Voici les gestionnaires et techniciens de votre zone et des sous-zones, cliquez sur un gestionnaire pour voir les éléments sous sa responsabilité.">
                <header class="panel-heading">
                    <!-- Table block control actions -->
                    <div class="panel-actions form-inline">
                        <a href="#modalManager" onclick="setupModalManagerAdd()" class="modal-with-form fa fa-plus" data-toggle="tooltip" title="Ajouter" id="plus-manager"></a>
                        <a id="print-manager" class="fa fa-print clickable" data-toggle="tooltip" title="Imprimer la table" data-toggle="tooltip" title="Imprimer"></a>
                        <a id="manager-options" class="fas fa-cog clickable" data-toggle="tooltip" title="Options" data-toggle="tooltip" title="Options avancées"></a>
                        <a href="#" class="fa fa-caret-down" data-toggle="tooltip" title="Minimiser""></a>
                    </div>
                    <h2 class="panel-title">Gestionnaires et Techniciens</h2>
                    <h2 class="panel-subtitle">Cliquez sur un gestionnaire pour filtrer les éléments</h2>
                </header>
                <div class="panel-body">
                    {% include 'managers_table.html' %}
                </div>
            </section>
        </div>
    </div>

    <section class="panel" data-intro="Et voici les éléments du réseau.">
        <header class="panel-heading">
            <!-- Table block control actions -->
            <div class="panel-actions form-inline">
                <a id="call-water-modal" href="#modal-water-element" onclick="setupModalAdd()" class="modal-with-form fa fa-plus" data-toggle="tooltip" title="Ajouter"></a>
                <a id="print-water_element" class="fa fa-print clickable" data-toggle="tooltip" title="Imprimer la table" data-toggle="tooltip" title="Imprimer"></a>
                <a id="water_element-options" class="fas fa-cog clickable" data-toggle="tooltip" title="Options" data-toggle="tooltip" title="Options avancées"></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>

    {% include "zone_modal.html" %}

    {% include "manager_modal.html" %}

    {% include "water_element_modal.html" %}
    {% else %}
        Vous n'êtes pas connecté en tant que gestionnaire de zone, cette page ne vous est pas accessible <br>
        <a href="{% url 'login' %}">Connectez-vous</a>
    {% endif %}

{% endblock %}