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

{% block title %}Device detail{% endblock %}

{% form_theme fwForm 'bootstrap_4_layout.html.twig' %}

{% block body %}
<div class="container-fluid">
<div class="row">
  <div class="col-md-6" style="padding-left:0px;">
    <div class="bgc-white bd bdrs-3 p-10 mB-20">
      <div class="peers fxw-nw@lg+ ai-s">
        <div class="peer peer-greed w-70p@lg+ w-100@lg- p-20">
          <div class="layers">
            <div class="layer w-100 mB-10">
              <h5 class="lh-1">Device detail</h5>
              <hr class="mB-10">
            </div>
            <div class="layer w-100">
              Name: <b>{{ device.name()|default("None") }}</b>
              <div class="layer w-100">
                {{ form_start(customModuleDownloadForm, {'attr': {'class': 'form-inline'}}) }}
                <div class="form-group mr-2" style="margin-top: 14px;">
                <p>DevId: <b>{{ device.devId() }}</b></p>
                </div>

                  <div class="form-group mr-2" style="padding-left: 10px;">
                    {{ form_widget(customModuleDownloadForm.download) }}
                  </div>
                {{ form_end(customModuleDownloadForm) }}
              </div>
              {% if(device.devType.id == 1) %}
                <p>
                  Hostname: <b>{{ device.hostname()|default("None") }}</b> {% if(device.hostnameDesired) %}(to be updated: {{ device.hostnameDesired }}){% else %}{% endif %}
                </p>
                <div class="layer w-100" style="padding-bottom: 10px;">
                  {{ form_start(hostnameForm, {'attr': {'class': 'form-inline'}}) }}
                  <div class="form-group mr-2">
                    {{ form_widget(hostnameForm.hostname) }}
                  </div>
                  <div class="form-group mr-2">
                    {{ form_widget(hostnameForm.save) }}
                  </div>
                  {{ form_end(hostnameForm) }}
                </div>
              {% endif %}
              <p>Status: <b>{{ device.stats.syncStatus.description }}</b></p>
              <p>Type: <b>{{ device.devType.name }}</b></p>
              <p>Data age: <b>{{ device.stats.liveTime.description }}</b></p>
              <p>Missed contacts: <b>{{ device.stats.liveMissCount.description }}</b></p>
              {% if(device.devType.id == 2) %}
                <p>Current OS/FW
                    version: <b>{{ device.osVer.version|default("Unknown") }}</b> {% if(device.osVerDesired) %}(desired: <b>{{ device.osVerDesired.version }}</b>){% else %}(NO specific){% endif %}
                </p>
              {% endif %}

            </div>

            {% if(device.devType.id == 2) %}
              {% if( (osVersions != null) or (fwForm.no_specific is defined) ) %}
                <div class="layer w-100">
                  <div class="mb-1">
                    <hr class="dotted">
                  </div>
                  {{ form_start(fwForm, {'attr': {'class': 'form-inline'}}) }}
                  {% if(osVersions != null) %}
                    <div class="form-group mr-2">
                      <p class="col-form-label" style="font-weight: bold;">Firmware version:</p>
                    </div>
                    <div class="form-group mr-2">
                      {{ form_widget(fwForm.fw_version) }}
                    </div>
                    <div class="form-group mr-2">
                      {{ form_widget(fwForm.save) }}
                    </div>
                  {% endif %}
                  {% if(fwForm.no_specific is defined) %}
                    <div class="form-group mr-2">
                      {{ form_widget(fwForm.no_specific) }}
                    </div>
                  {% endif %}
                  {{ form_end(fwForm) }}
                </div>
              {% endif %}
            {% endif %}

            <div class="layer w-100">
              <div class="mb-1">
                <hr class="dotted">
              </div>
              {{ form_start(agentProfilesForm, {'attr': {'class': 'form-inline'}}) }}
              <div class="form-inline">
                <div class="form-group mr-2">
                  <p class="col-form-label" style="font-weight: bold;">Agent Profile:</p>
                </div>
                <div class="form-group mr-2">
                  {{ form_widget(agentProfilesForm.agent_profile) }}
                  {# <select id="config_profile_clone_device_to_devices" name="config_profile_clone_device_to[devices]" multiple></select> #}
                </div>
                <div class="form-group mr-2">
                  {{ form_widget(agentProfilesForm.save) }}
                </div>
                {# {{ form_row(configProfileCloneTo._token) }}
                            {{ form_end(configProfileCloneTo, {'render_rest': false}) }} #}
                {{ form_end(agentProfilesForm) }}
              </div>
            </div>

            {% if(authProfilesForm.auth_profile is defined) %}
            <div class="layer w-100">
              <div class="mb-1">
                <hr class="dotted">
              </div>
              {{ form_start(authProfilesForm, {'attr': {'class': 'form-inline'}}) }}
              <div class="form-inline">
                <div class="form-group mr-2">
                  <p class="col-form-label" style="font-weight: bold;">Auth Profile:</p>
                </div>
                  <div class="form-group mr-2">
                  {{ form_widget(authProfilesForm.auth_profile) }}
                  {# <select id="config_profile_clone_device_to_devices" name="config_profile_clone_device_to[devices]" multiple></select> #}
                </div>
                <div class="form-group mr-2">
                  {{ form_widget(authProfilesForm.save) }}
                </div>
                {{ form_end(authProfilesForm) }}
              </div>
            </div>
            {% endif %}

            <div class="layer w-100">
              <div class="mb-1">
                <hr class="dotted">
              </div>
              {{ form_start(monitoringGroupsForm, {'attr': {'class': 'form-inline'}}) }}
              <div class="form-inline">
                <div class="layer w-100">
                  <p><b>Monitoring Groups:</b></p>
                </div>
                <div class="form-group mr-2">
                  {{ form_widget(monitoringGroupsForm.monitoringGroups) }}
                  {# <select id="config_profile_clone_device_to_devices" name="config_profile_clone_device_to[devices]" multiple></select> #}
                </div>
                <div class="form-group mr-2">
                  {{ form_widget(monitoringGroupsForm.save) }}
                </div>
                {{ form_end(monitoringGroupsForm) }}
              </div>
            </div>

            <div class="layer w-100">
              <div style="margin: 20px auto;">
                <div class="monitoring-groups-container tail-select-container"></div>
              </div>
              <p style="font-size: smaller;">Every device has default Monitoring group named "All devices". It cannot be modified.</p>
            </div>

            <div class="layer w-100">
              <div class="mb-1">
                <hr class="dotted">
              </div>
              {{ form_start(labelsForm, {'attr': {'class': 'form-inline'}}) }}
              <div class="form-inline">
                <div class="layer w-100">

                <p><b>Custom Labels:</b></p>
                </div>
                <div class="form-group mr-2">
                  {{ form_widget(labelsForm.labels) }}
                  {# <select id="config_profile_clone_device_to_devices" name="config_profile_clone_device_to[devices]" multiple></select> #}
                </div>
                <div class="form-group mr-2">
                  {{ form_widget(labelsForm.save) }}
                </div>
                {# {{ form_row(configProfileCloneTo._token) }}
                            {{ form_end(configProfileCloneTo, {'render_rest': false}) }} #}
                {{ form_end(labelsForm) }}
              </div>
            </div>

            <div class="layer w-100">
              <div style="margin: 20px auto;">
                <div class="custom-labels-container tail-select-container"></div>
              </div>
              <p style="font-size: smaller;">Please note that when new label added or deleted you must save the new state by pressing SET button.</p>
              <p style="font-size: smaller;">You can delete label by simply click on the label itself.</p>
            </div>

            <div class="layer w-100">
              <div class="mb-1">
                <hr class="dotted">
              </div>
              {{ form_start(systemLabelsForm, {'attr': {'class': 'form-inline'}}) }}
              <div class="form-inline">
                <div class="layer w-100">

                  <p><b>System Labels:</b></p>
                </div>
                <div class="form-group mr-2">
                  {{ form_widget(systemLabelsForm.labels) }}
                  {# <select id="config_profile_clone_device_to_devices" name="config_profile_clone_device_to[devices]" multiple></select> #}
                </div>
                <div class="form-group mr-2">
                  {{ form_widget(systemLabelsForm.save) }}
                </div>
                {# {{ form_row(configProfileCloneTo._token) }}
                            {{ form_end(configProfileCloneTo, {'render_rest': false}) }} #}
                {{ form_end(systemLabelsForm) }}
              </div>
            </div>

            <div class="layer w-100">
              <div style="margin: 20px auto;">
                <div class="system-labels-container tail-select-container"></div>
              </div>
              <p style="font-size: smaller;">Please note that when new label added or deleted you must save the new state by pressing SET button.</p>
              <p style="font-size: smaller;">You can delete label by simply click on the label itself.</p>
              <div class="mb-1">
                <hr class="dotted">
              </div>
            </div>

            {% if(device.devType.id == 2) %}
              <div class="layer w-100">
                {% if(device.devType.id == 2) %}
                  <p><b>Config profile cloned from:</b> {{ device.configProfile.automatic.devId|default("None") }}</p>
                {% endif %}
              </div>
              {% if(isDevicesToCloneFromEmpty == false) %}
                <div class="layer w-100">
                  {{ form_start(configProfileCloneFromForm, {'attr': {'class': 'form-inline'}}) }}
                  <div class="form-group mr-2">
                    {{ form_widget(configProfileCloneFromForm.config_profile) }}
                  </div>
                  <div class="form-group mr-2">
                    {{ form_widget(configProfileCloneFromForm.save) }}
                  </div>
                  {{ form_end(configProfileCloneFromForm) }}
                  <div class="mb-1">
                    <hr class="dotted">
                  </div>
                </div>
              {% endif %}
              {% if(device.configProfileAutomatic) %}
                <div class="layer w-100">
                  {{ form_start(configProfileCloneToForm, {'attr': {'class': 'form-inline'}}) }}
                  <div class="form-inline">
                    <div class="form-group mr-2">
                      {{ form_widget(configProfileCloneToForm.devices) }}
                      {# <select id="config_profile_clone_device_to_devices" name="config_profile_clone_device_to[devices]" multiple></select> #}
                    </div>
                    <div class="form-group mr-2">
                      {{ form_widget(configProfileCloneToForm.save) }}
                    </div>
                    {# {{ form_row(configProfileCloneTo._token) }}
                            {{ form_end(configProfileCloneTo, {'render_rest': false}) }} #}
                    {{ form_end(configProfileCloneToForm) }}
                  </div>
                </div>
                <div class="layer w-100">
                  <div style="margin: 30px auto;">
                    <p><b>This devices cloned to:</b></p>
                    <div class="devices-cloned-to-container tail-select-container"></div>
                  </div>
                  <div class="mb-1">
                    <hr class="dotted">
                  </div>
                </div>

              {% endif %}
            {% endif %}

            <div class="layer w-100">
              <div class="form-inline">
                <div class="form-group mr-2">
                  <a href="{{ path('admin_devices') }}" type='primary' class='btn btn-primary'><span class="fas fa-arrow-left "></span> Back to devices</a>
                </div>
                <button type="button" class="btn btn-danger" data-toggle="modal" data-target="#deleteModal">
                  <span class="fas fa-trash"></span> Delete
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="col-md-6">
    <div class="bgc-white bd bdrs-3 p-10 mB-20">
      <div class="peers fxw-nw@lg+ ai-s">
        <div class="peer peer-greed w-70p@lg+ w-100@lg- p-20">
          <div class="layers">
            <div class="layer w-100 mB-10">
              <h5 class="lh-1">Statistics</h5>
              <hr class="mB-10">
            </div>
            <div class="layer w-100">
              <p>Uptime: <b>{{ device.stats.upTime | seconds2human }}</b></p>
              <p>Memory Total:  <b>{% if device.stats.memoryTotal is null %}N/A{% else %}{{ device.stats.getMemoryTotal() | formatBytes }}{% endif %}</b></p>
              <p>Memory Available: <b>{% if device.stats.memoryAvailable is null %}N/A{% else %}{{ device.stats.getMemoryAvailable() | formatBytes }}{% endif %}</b></p>
              <p>Running Processes: <b>{{ device.stats.processes|default("N/A") }}</b></p>
              <p>Root Disk Space Available: <b>{% if device.stats.rootSpaceDiskAvailable is null %}N/A{% else %}{{ device.stats.getRootSpaceDiskAvailable()|formatBytes }}{% endif %}</b></p>
              <p>Load Average 1 minute: <b>{{ device.stats.loadavg1|default("N/A") }}</b></p>
              <p>Load Average 5 minute: <b>{{ device.stats.loadavg5|default("N/A") }}</b></p>
              <p>Load Average 15 minute: <b>{{ device.stats.loadavg15|default("N/A") }}</b></p>
              <p>Last Reboot: <b>{{ device.stats.lastReboot|date('d.m.Y H:m:s') }}</b></p>
              <p>Reboot Counter: <b>{{ device.stats.rebootCounter|default("N/A ") }} times</b></p>
              <p>Voltage: <b>{{ device.stats.voltage|default("N/A ") }}{% if device.stats.voltage is not null %}V{% endif %}</b></p>
              <p>Temperature: <b>{{ device.stats.temperature|default("N/A ") }}{% if device.stats.temperature is not null %}°C{% endif %}</b></p>
              <p>Signal strength: <b>{{ device.stats.signalStrength|default("N/A ") }}{% if device.stats.signalStrength is not null %} dBm{% endif %}</b></p>
              <p style="margin-bottom: 0;">Signal quality: <b>{{ device.stats.signalQuality|default("N/A ") }}{% if device.stats.signalQuality is not null %} dB{% endif %}</b></p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="bgc-white bd bdrs-3 p-10 mB-20">
      <div class="peers fxw-nw@lg+ ai-s">
        <div class="peer peer-greed w-70p@lg+ w-100@lg- p-20">
          <div class="layers">
            <div class="layer w-100 mB-10">
              <h5 class="lh-1">List of Packages</h5>
              {% if(packages|length != 0) %}
              <table class="table" style="color: #72777a; margin-bottom: 0;">
                <thead>
                <tr>
                  <th scope="col">#</th>
                  <th scope="col">Name</th>
                  <th scope="col">Version</th>
                </tr>
                </thead>
                <tbody>
                  {% for package in packages %}
                  <tr>
                    <td rowspan="1">{{ loop.index }}</td>
                    <td rowspan="1"><b>{{ package.usermodule.name }}</b></td>
                    <td rowspan="1">{{ package.usermodule.version }}</td>
                  </tr>
                {% endfor %}
                {% else %}
                  <hr class="mB-10">
                  <p style="margin-bottom: 0;">No package installed.</p>
                {% endif %}

                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="bgc-white bd bdrs-3 p-10 mB-20">
      <div class="peers fxw-nw@lg+ ai-s">
        <div class="peer peer-greed w-70p@lg+ w-100@lg- p-20">
          <div class="layers">
            <div class="layer w-100 mB-10">
              <h5 class="lh-1">SIM Cards</h5>
              <hr class="mB-10">
            </div>
            <div class="layer w-100">
              {% set simCards = device.deviceSimCards| merge(device.deviceLastSeen) %}
              {% set uniqueSimCards = simCards|reduce(
                (unique, item) => item in unique ? unique : unique|merge([item]), []
                ) %}
              {% if(uniqueSimCards is not empty) %}
                {% for simCard in uniqueSimCards %}
                  <p>ICCID: <b>{{ simCard.iccid }}</b></p>
                {% endfor %}
              {% else %}
                  <p>No SIM Card available.</p>
              {% endif %}
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="bgc-white bd bdrs-3 p-10 mB-20">
      <div class="peers fxw-nw@lg+ ai-s">
        <div class="peer peer-greed w-70p@lg+ w-100@lg- p-20">
          <div class="layers">
            <div class="layer w-100 mB-10">
              <h5 class="lh-1">Custom Fields</h5>
<!--              <hr class="mB-10">-->
            </div>
            <div class="layer w-100">
              <table class="table" style="color: #72777a; margin-bottom: 0;">
                <thead>
                  <tr>
                    <th scope="col">Name</th>
                    <th scope="col">Value</th>
                  </tr>
                </thead>
                <tbody>
                  {% for i in 1..9 %}
                    {% set field_name = "Number"~i %}
                    {% if(attribute(device.customFieldDevice, field_name) is not null) %}
                      <tr>
                        <td rowspan="1">Number {{ i }}</td>
                        <td rowspan="1">{{ attribute(device.customFieldDevice, field_name) }}</td>
                      </tr>
                    {% endif %}
                  {% endfor %}
                  {% for i in 1..9 %}
                    {% set field_name = "Float"~i %}
                    {% if(attribute(device.customFieldDevice, field_name) is not null) %}
                      <tr>
                        <td rowspan="1">Float {{ i }}</td>
                        <td rowspan="1">{{ attribute(device.customFieldDevice, field_name) }}</td>
                      </tr>
                    {% endif %}
                  {% endfor %}
                  {% for i in 1..9 %}
                    {% set field_name = "Text"~i %}
                    {% if(attribute(device.customFieldDevice, field_name) is not null) %}
                      <tr>
                        <td rowspan="1">Text {{ i }}</td>
                        <td rowspan="1">{{ attribute(device.customFieldDevice, field_name) }}</td>
                      </tr>
                    {% endif %}
                  {% endfor %}

                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>

</div>
</div>
  <style>
    .table td,
    .table th {
      border-top:1px solid #dee2e6;
      padding:.75rem;
      vertical-align:middle;
    }
  </style>
  <div class="row">
    <div class="col-md-12">
      <div class="bgc-white bd bdrs-3 p-20 mB-20">
        <div class="layers">
          <div class="layer w-100 mB-10">
            <h4> Network Interfaces</h4>
            {{ form_start(netDevicesForm, {'attr': {'class': 'form-inline'}}) }}

          </div>
          {% if(device.netDevices|length != 0) %}
          <table class="table" style="color: #72777a; margin-bottom: 0;">
            <thead>
            <tr>
              <th scope="col">#</th>
              <th scope="col">Name</th>
              <th scope="col">MAC</th>
              <th scope="col">IP Address</th>
              <th scope="col">IPv6 Address</th>
              <th scope="col">Collisions</th>
              <th scope="col">Active</th>
              <th scope="col">Cellular</th>
              <th scope="col">Linkable</th>
              <th scope="col">Rx/Tx Packets</th>
              <th scope="col">Rx/Tx Bytes</th>
              <th scope="col">Rx/Tx Errors</th>
            </tr>
            </thead>
            <tbody>
            {% for netDevice in device.netDevices %}
              <tr>
                <td rowspan="2">{{ loop.index }}</td>
                <td rowspan="2"><b>{{ netDevice.label }}</b></td>
                <td rowspan="2">{{ netDevice.mac }}</td>
                <td rowspan="2">{% if(netDevice.ipAddr) %}{{ netDevice.ipAddr }}/{{ netDevice.ipMask }}{% else %} --- {% endif %}</td>
                <td rowspan="2">{% if(netDevice.ip6Addr) %}{{ netDevice.ip6Addr }}/{{ netDevice.ip6Pref }}{% else %} --- {% endif %}</td>
                <td rowspan="2">{{ netDevice.collisions }}</td>
                <td rowspan="2">{% if(netDevice.active == '1') %}<b>Yes</b>{% else %}No{% endif %}</td>
                {% set inputName = 'cellular_' ~ netDevice.getId() %}
                <td rowspan="2">{{ form_widget(attribute(netDevicesForm, (inputName))) }}</td>
                {% set inputName = 'linkable_' ~ netDevice.getId() %}
                <td rowspan="2">{{ form_widget(attribute(netDevicesForm, (inputName))) }}</td>
                <td>{{ netDevice.rxPackets }}</td>
                <td>{{ netDevice.rxBytes }}</td>
                <td>{{ netDevice.rxErrors }}</td>
              </tr>
              <tr>
                <td>{{ netDevice.txPackets }}</td>
                <td>{{ netDevice.txBytes }}</td>
                <td>{{ netDevice.txErrors }}</td>
              </tr>

            {% endfor %}

            {% else %}
              <p>No active network interfaces found.</p>
            {% endif %}

            </tbody>
          </table>
          <div class="layer w-100 mB-10">
            <hr class="dotted">
            {{ form_widget(netDevicesForm.save) }}
          </div>

          {{ form_end(netDevicesForm) }}
        </div>
      </div>
    </div>
  </div>

  <div class="row">
    <div class="col-md-12">
      <div class="bgc-white bd bdrs-3 p-20 mB-20">
        <div class="layers">
          <div class="layer w-100 mB-10">
            <h4>History data</h4>
            <hr class="mB-20">
          {% if(historyData == '[]') %}
            <p>No data available yet.</p>
          {% else %}
          <div id="history-charts" class="layer w-100 mB-10">
            {# <canvas id="myChart" width="100" height="30"></canvas> #}
          </div>
          {% endif %}
          </div>
        </div>
      </div>
    </div>
  </div>

      <!-- Modal -->
      <div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="exampleModalLongTitle">Delete device</h5>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div class="modal-body">
              Do you really want to delete this device?
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-dismiss="modal"><span class="fas fa-arrow-left"></span> Back</button>
              {{ form_start(deleteForm, {'attr': {'class': 'form-inline'}}) }}
                {{ form_widget(deleteForm.delete) }}
              {{ form_end(deleteForm) }}
            </div>
          </div>
        </div>
      </div>

{% endblock body %}

{% block javascripts %}

    {{ parent() }}

    <script>

      $(document).ready(function(){

        var SelectFieldLabels  = tail("#device_custom_label_labels", {
          search: true,
          classNames: "default white",
          descriptions: true,
          multiple: true,
          hideDisabled: true,
          multiSelectAll: true,
          multiShowCount: false,
          multiContainer: ".custom-labels-container",
          placeholder: 'Select device labels',
          text_empty: "No Custom Label available",
        });

        var SelectFieldSystemLabels  = tail("#device_system_label_labels", {
          search: true,
          classNames: "default white",
          descriptions: true,
          multiple: true,
          hideDisabled: true,
          multiSelectAll: true,
          multiShowCount: false,
          multiContainer: ".system-labels-container",
          placeholder: 'Select device labels',
          text_empty: "No System Label available",
        });

        var SelectFieldMonitoringGroups  = tail("#monitoring_group_monitoringGroups", {
          search: true,
          classNames: "default white",
          descriptions: true,
          multiple: true,
          hideDisabled: true,
          multiSelectAll: true,
          multiShowCount: false,
          multiContainer: ".monitoring-groups-container",
          placeholder: 'Select Monitoring groups',
          text_empty: "No Monitoring group available",
        });

        var SelectCloneDeviceFromField = tail("#config_profile_clone_from_device_config_profile", {
          search: true,
          classNames: "default white",
          descriptions: true,
          multiple: false,
          hideDisabled: true,
          deselect: true,
          placeholder: 'Select device',
          text_empty: "No Device available",
        });

        var SelectField  = tail("#config_profile_clone_device_to_devices", {
          search: true,
          classNames: "default white",
          descriptions: true,
          //deselect: true,
          //hideSelected: true,
          //items: items,
          multiple: true,
          hideDisabled: true,
          //deselect: true,
          multiSelectAll: true,
          //multiLimit: 15,
          multiShowCount: false,
          text_empty: "No Options available",
          multiContainer: ".devices-cloned-to-container",
          placeholder: 'Select devices to be cloned to',
        });

        if ($('.custom-labels-container').is(':empty')){
          $( ".custom-labels-container" ).append( $( "<div id='empty-custom-labels'>No Custom Label Assigned.</div>" ) );
        }

        $('#device_custom_label_labels').on('change', function() {
          if (SelectFieldLabels.options.selected.length === 0){
            $( ".custom-labels-container" ).append( $( "<div id='empty-custom-labels'>No Custom Label Assigned.</div>" ) );
          }else{
            $("#empty-custom-labels").remove();
          }
        });

        if ($('.system-labels-container').is(':empty')){
          $( ".system-labels-container" ).append( $( "<div id='empty-system-labels'>No System Label Assigned.</div>" ) );
        }

        $('#device_system_label_labels').on('change', function() {
          if (SelectFieldSystemLabels.options.selected.length === 0){
            $( ".system-labels-container" ).append( $( "<div id='empty-system-labels'>No System Label Assigned.</div>" ) );
          }else{
            $("#empty-system-labels").remove();
          }
        });

        if ($('.devices-cloned-to-container').is(':empty')){
          $( ".devices-cloned-to-container" ).append( $( "<div id='no-cloned'>No Device Cloned.</div>" ) );
        }

        $('#config_profile_clone_device_to_devices').on('change', function() {
          if (SelectField.options.selected.length === 0){
            $( ".devices-cloned-to-container" ).append( $( "<div id='no-cloned'>No Device Cloned.</div>" ) );
          }else{
            $("#no-cloned").remove();
          }
        });

      });

      var chartColors = {
        red: 'rgb(255, 99, 132)',
        blue: 'rgb(54, 162, 235)'
      };

      var historyData = {{ historyData|raw }};
      var historyTimeLegend = [{{ historyTimeLegend|raw }}];

      $.each(historyData, function(key,value){

        var elementID = 'chart_' + key; // Unique ID
        var rectWidth = 100;
        var rectHeight = 30;

        $('<canvas>').attr({
          id: elementID
        }).css({
          width: rectWidth + 'px',
          height: rectHeight + 'px'
        }).appendTo('#history-charts');

        var labels = historyTimeLegend;
        var inputData = value.data;
        var canvasId = elementID;

        //console.log(value.min + ',' + value.max);

        var settings = {
          title: key,
          backgroundColors: chartColors.blue,
          scale_min: parseInt(value.min),
          scale_max: parseInt(value.max),
          text_x: 'Time',
          text_y: value.description + ' ' + value.unit,
          unit: value.unit,
        };

        if(value.type === 'Bars'){

          if (!dwarfgChart.MakeBar(canvasId, labels, inputData, settings)) {
            console.error("MakeBar : Error While building Chart for "+key+"!");
          }

        }else if(value.type === 'Line'){

          if (!dwarfgChart.MakeLine(canvasId, labels, inputData, settings)) {
            console.error("MakeLine : Error While building Chart for "+key+"!");
          }

        }

        //console.log('Key = ' + k + '\n' + 'Value = ' + v.description);
      });


    </script>

{% endblock javascripts%}