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

{% block title %}Dashboard{% endblock %}

{% block body %}

            <div class="row gap-20 masonry pos-r">
              <div class="masonry-sizer col-md-4"></div>
              <div class="masonry-item  w-100">
                <div class="row gap-20">

                {% if(data is null) %}

                <div class='col-md-12'>
                    <div class="row gap-0 p-25 bd bgc-white">
                        <h6>Dashboard data is not available, please try it later.</h6>
                    </div>
                </div>

                {% endif %}

                {% if(lights is not empty) %}
                    <div class='col-md-12'>
                        <div class="row gap-0 p-25 bd bgc-white">
                            {#<div class="col-md-2">
                              <div class="layer w-100 mB-10" style="text-align: center">
                                <h6 class="lh-1">Device count: {{ deviceCount }}/{{ licenseSeats }}</h6>
                                {% set percent = (deviceCount / licenseSeats) * 100 %}
                                <div class="chart" data-percent="{{ percent }}"></div>
                              </div>
                            </div>#}

                            {#{% for light in lights %}<div class="col-md-2">
                              <div class="layer w-100 mB-10" style="text-align: center">
                                <h6 class="lh-1">{{ light.name }}</h6>
                                <img style='display:block; width:100px;height:100px;' id='base64image' src='{{light.image}}' />
                                <h6 class="lh-1">{{ light.caption }}</h6>
                                 </div>
                            </div>
                            {% endfor %}#}
                            {% for light in lights %}
                                <div class="col-md-2" {% if(light.name == 'Global') %}style="border-right: 1px solid rgba(0,0,0,.063);;"{% endif %}>
                                  <div class="layer w-100 mB-10" style="text-align: center">
                                    <h6 class="lh-1">{{ light.name }}</h6>
                                    <div class="circle {{ light.state }} {{ light.name }}">
                                        <div class="caption">
                                            {% if (light.name == 'Groups') %}
                                                <i class="fas fa-layer-group"></i>
                                            {% elseif (light.name == 'Tunnels')%}
                                                <i class="fas fa-route"></i>
                                            {% endif %}
                                            {{ light.onlight }}
                                        </div>
                                    </div>
                                    <h6 class="lh-1" style="padding-top: 10px;">{{ light.caption }}</h6>
                                  </div>
                                </div>
                            {% endfor %}
                        </div>
                    </div>
                    {% endif %}

                    {% if(help is not empty) %}
                    <div class='col-md-12'>
                        <div class="gap-0 p-25 bd bgc-white">
                            <h6><b>Warnings:</b></h6>
                            <hr>
                            {% for text in help %}
                            <div style="font-weight: bold;">{{ text }}</div>
                            {% endfor %}
                        </div>
                    </div>
                    {% endif %}

                    {% if(groups is not empty) %}
                    <div class='col-md-12'>
                        <div class="gap-0 pT-25 pL-25 pB-0 bgc-white">
                            <h6>Monitoring Groups:</h6>
                            <hr>
                        </div>
                        {% for group in groups %}
                        <div class="row gap-0 p-25 bgc-white" style="border-bottom: 1px solid rgba(0,0,0,.063);">
                            <div class="col-md-2" style="border-right: 1px solid rgba(0,0,0,.063);;">
                                <div class="layer w-100 mB-10" style="text-align: center">
                                    <h6 class="lh-1">Name: <a href="{{ path('mntgrp_detail', {'monitoringGroupId': group.id}) }}"><b>{{ group.name }}</b></a></h6>
                                    <div class="circle {{ group.state }}">
                                        <div class="caption">{{ group.devices }}</div>
                                    </div>
                                </div>
                            </div>

                            {% for light in group.lights%}
                            {#<div class="col-md-2" >
                                <div class="layer w-100 mB-10" style="text-align: center">
                                    <h6 class="lh-1">{{ light.name }}</h6>
                                    <div class="circle {{ light.state }}"></div>
                                </div>
                            </div>#}
                            <div class="col-md-2" style="text-align: center; border-right: 1px solid rgba(0,0,0,.063);;">
                                <h6>{{ light.name }}</h6>
                                <div class="row justify-content-center">
                                    <div class="col-md-1 pR-20">
                                        <div class="layer w-100 mB-20" style="text-align: center;">
                                            {% for light2 in light.lights %}
                                                {% if(loop.index == 1) and (light.state == 'G') %}
                                                    {% set color = 'G' %}
                                                {% elseif(loop.index == 2 and light.state == 'W') %}
                                                    {% set color = 'W' %}
                                                {% elseif(loop.index == 3  and light.state == 'B') %}
                                                    {% set color = 'B' %}
                                                {% else %}
                                                    {% set color = 'grey' %}
                                                {% endif %}
                                            <div class="circle small {{ color }}">
                                                <div class="caption">{{ light2.onlight }}</div>
                                            </div>
                                            {% endfor %}
                                        </div>
                                    </div>
                                    <div class="col-md-1 pT-5">
                                        {% for light2 in light.lights %}
                                        <div class="layer w-100 mB-20" style="text-align: center;">
                                            {% if(light2.subset_id <= 5) %}
                                                <a href="{{ path('admin_devices_dashboard_light', {'monitoringGroupId': group.id, 'subsetId': light2.subset_id}) }}">{{ light2.caption }}</a>
                                            {% else %}
                                                <a href="{{ path('admin_alerts_dashboard_light', {'monitoringGroupId': group.id, 'subsetId': light2.subset_id}) }}">{{ light2.caption }}</a>

                                            {% endif %}
                                        </div>
                                        {% endfor %}
                                    </div>
                                </div>
                            </div>
                            {% endfor%}
                        </div>
                        {% endfor %}
                    </div>
                {% endif %}

                {% if( (triggeredAlerts is not empty) or (invalidAlerts is not empty) or (pastAlerts is not empty) ) %}
                    <div class='col-md-12'>
                        <div class="gap-0 p-25 bd bgc-white">
                            <h6>Alerts:</h6>
                            <hr>
                    {% if(triggeredAlerts is not empty) %}
                        <h6><b>Triggered Alerts:</b></h6>
                        {% for triggeredAlert in triggeredAlerts %}
                            <p><b>{{ loop.index }}. <a href="{{ path('admin_alert_edit', {'alertId': triggeredAlert.id}) }}">{{ triggeredAlert.name }}</a>
                            {% if(triggeredAlert.targetMonitoringGroup is not null) %}
                                </b> for monitoring group: <a href="{{ path('mntgrp_detail', {'monitoringGroupId': triggeredAlert.targetMonitoringGroup.id}) }}">{{ triggeredAlert.targetMonitoringGroup.name }}</a>
                                {% if(triggeredDevices[triggeredAlert.id]['device'] is not empty) %}
                                    {% set deviceNames = [] %}
                                    for devices:  <a href="{{ path('admin_devices_triggered_alert', {'alertId': triggeredAlert.id}) }}">List All</a>
                                {% endif %}
                                {% for key, triggeredDevice in triggeredDevices[triggeredAlert.id]['device']|slice(0,20) %}
                                    {% if(loop.first) %}({% endif %}
                                    <a href="{{ path('admin_devices_detail', {'deviceId': triggeredDevice.id_device}) }}">{{ triggeredDevice.devid }}</a>
                                    {% if(not loop.last) %},{% endif %}
                                    {% if(loop.last) %}{% set count = triggeredDevices[triggeredAlert.id]['device']|length %}{% if(count > 20) %} and more {{ count - 20 }} devices {% endif %}){% endif %}
                                {% endfor %}
                            {% else %}
                                {% if(triggeredDevices[triggeredAlert.id]['device'] is not empty) %}
                                    for device: <a href="{{ path('admin_devices_detail', {'deviceId': triggeredDevices[triggeredAlert.id]['device'].id}) }}">{{ triggeredDevices[triggeredAlert.id]['device'].devId }}</a>
                                {% endif %}
                            {% endif %}</b>
                            </p>
                        {% endfor %}
                        <hr>
                    {% endif %}

                    {% if(invalidAlerts is not empty) %}
                        <h6><b>Invalid Alerts:</b></h6>
                        {% for invalidAlert in invalidAlerts %}
                            <p><b>{{ loop.index }}. <a href="{{ path('admin_alert_edit', {'alertId': invalidAlert.id}) }}">{{ invalidAlert.name }}</a></b></p>
                        {% endfor %}
                        <hr>
                    {% endif %}

                    {% if(pastAlerts is not empty) %}
                        <h6><b>Past Alerts:</b></h6>
                        {% for pastAlert in pastAlerts %}
                            <p><b>{{ loop.index }}. <a href="{{ path('admin_alert_edit', {'alertId': pastAlert.id}) }}">{{ pastAlert.name }}</a>
                                    {% if(pastAlert.targetMonitoringGroup is not null) %}
                                </b> for monitoring group: <a href="{{ path('mntgrp_detail', {'monitoringGroupId': pastAlert.targetMonitoringGroup.id}) }}">{{ pastAlert.targetMonitoringGroup.name }}</a>
                                {% if(pastDevices[pastAlert.id]['device'] is not empty) %}
                                    {% set deviceNames = [] %}
                                    for devices: <a href="{{ path('admin_devices_past_alert', {'alertId': pastAlert.id}) }}">List All</a>
                                {% endif %}
                                {% for key, pastDevice in pastDevices[pastAlert.id]['device']|slice(0,20) %}
                                    {% if(loop.first) %}({% endif %}
                                    <a href="{{ path('admin_devices_detail', {'deviceId': pastDevice.id_device}) }}">{{ pastDevice.devid }}</a>
                                    {% if(not loop.last) %},{% endif %}
                                    {% if(loop.last) %}{% set count = pastDevices[pastAlert.id]['device']|length %}{% if(count > 20) %} and more {{ count - 20 }} devices {% endif %}){% endif %}
                                {% endfor %}
                                {% else %}
                                {% if(pastDevices[pastAlert.id]['device'] is not empty) %}
                                    for device: <a href="{{ path('admin_devices_detail', {'deviceId': pastDevices[pastAlert.id]['device'].id}) }}">{{ pastDevices[pastAlert.id]['device'].devId }}</a>
                                {% endif %}
                                {% endif %}</b>
                                (<a href="{{ path('admin_alert_clear_counter', {'alertId': pastAlert.id}) }}">Clear counter</a>)
                            </p>
                        {% endfor %}


                        <hr>
                    {% endif %}

                    </div></div>

                    {% endif %}

              </div>

{%  endblock body %}