<!--

    Copyright (C) 2015-2016 Jeeva Kandasamy (jkandasa@gmail.com)

    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.
    You may obtain a copy of the License at

            http://www.apache.org/licenses/LICENSE-2.0

    Unless required by applicable law or agreed to in writing, software
    distributed under the License is distributed on an "AS IS" BASIS,
    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    See the License for the specific language governing permissions and
    limitations under the License.

-->

<!-- Status -->
<div ng-if="variable.type.en === 'Status'">
  <span tooltip-enable="{{tooltipEnabled}}" uib-tooltip="{{variable.type.locale}}{{variable.name?' ('+variable.name+')':''}}" tooltip-placement="{{tooltipPlacement}}">
    <input class="onoffswitch" bs-switch  ng-change="updateVariable(variable)" ng-model="variable.value" ng-init="variable.value = cs.getInteger(variable.value)" type="checkbox"
    switch-animate="{{cs.mcbStyle.animate}}" switch-handle-width="{{cs.mcbStyle.stateHandleWidth}}" switch-label-width="{{cs.mcbStyle.labelWidth}}"
    switch-off-color="default" switch-on-color="primary" switch-size="{{cs.mcbStyle.size}}" switch-readonly="variable.readOnly"
    ng-true-value="1" ng-false-value="0" switch-on-text="ON" switch-off-text="OFF"
    >
  </span>
</div>

<!-- Temperature -->
<div ng-if="variable.type.en === 'Temperature'">
  <span e-ng-disabled="variable.readOnly" tooltip-enable="{{tooltipEnabled}}" uib-tooltip="{{variable.type.locale}}{{variable.name?' ('+variable.name+')':''}}" tooltip-placement="{{tooltipPlacement}}" class="mc-inline-editer-ab" buttons="no" onbeforesave="updateVariable(variable)" editable-text="variable.value">
    <span ng-hide="hideVariableName"><i class="wi wi-thermometer mc-icon-2x"></i></span>
    <span class="mc-style-ab">{{variable.value ||"-"}} {{variable.unit}}</span>
  </span>
</div>

<!-- Percentage -->
<div ng-if="variable.type.en === 'Percentage'">
  <span e-ng-disabled="variable.readOnly" tooltip-enable="{{tooltipEnabled}}" uib-tooltip="{{variable.type.locale}}{{variable.name?' ('+variable.name+')':''}}" tooltip-placement="{{tooltipPlacement}}" class="mc-inline-editer-ab" buttons="no" onbeforesave="updateVariable(variable)" editable-text="variable.value">
    <span class="mc-style-ab">{{variable.value ||"-"}} {{variable.unit}}</span>
  </span>
</div>

<!-- Humidity -->
<div ng-if="variable.type.en === 'Humidity'">
  <span e-ng-disabled="variable.readOnly" tooltip-enable="{{tooltipEnabled}}" uib-tooltip="{{variable.type.locale}}{{variable.name?' ('+variable.name+')':''}}" tooltip-placement="{{tooltipPlacement}}" class="mc-inline-editer-ab" buttons="no" onbeforesave="updateVariable(variable)" editable-text="variable.value">
    <span ng-hide="hideVariableName"><i class="wi wi-humidity mc-icon-2x"></i></span>
    <span class="mc-style-ab">{{variable.value ||"-"}} {{variable.unit}}</span>
  </span>
</div>

<!-- Pressure -->
<div ng-if="variable.type.en === 'Pressure'">
  <span e-ng-disabled="variable.readOnly" tooltip-enable="{{tooltipEnabled}}" uib-tooltip="{{variable.type.locale}}{{variable.name?' ('+variable.name+')':''}}" tooltip-placement="{{tooltipPlacement}}" class="mc-inline-editer-ab" buttons="no" onbeforesave="updateVariable(variable)" editable-text="variable.value">
    <span ng-hide="hideVariableName"><i class="wi wi-barometer mc-icon-2x"></i></span>
    <span class="mc-style-ab">{{variable.value ||"-"}} {{variable.unit}}</span>
  </span>
</div>

<!-- Forecast -->
<div ng-if="variable.type.en === 'Forecast'">
  <span e-ng-disabled="variable.readOnly" tooltip-enable="{{tooltipEnabled}}" uib-tooltip="{{variable.type.locale}}{{variable.name?' ('+variable.name+')':''}}" tooltip-placement="{{tooltipPlacement}}" class="mc-inline-editer-ab mc-style-ab" buttons="no" onbeforesave="updateVariable(variable)" editable-text="variable.value">
    <i class="wi wi-{{cs.getForecastValue(variable.value)}} mc-icon-2x"></i>
  </span>
</div>

<!-- Watt -->
<div ng-if="variable.type.en === 'Watt'">
  <span e-ng-disabled="variable.readOnly" tooltip-enable="{{tooltipEnabled}}" uib-tooltip="{{variable.type.locale}}{{variable.name?' ('+variable.name+')':''}}" tooltip-placement="{{tooltipPlacement}}" class="mc-inline-editer-ab" buttons="no" onbeforesave="updateVariable(variable)" editable-text="variable.value">
    <span ng-hide="hideVariableName"><i class="fa fa-bolt mc-icon-2x"></i></span>
    <span class="mc-style-ab">{{variable.value ||"-"}} {{variable.unit}}</span>
  </span>
</div>

<!-- Weight -->
<div ng-if="variable.type.en === 'Weight'">
  <span e-ng-disabled="variable.readOnly" tooltip-enable="{{tooltipEnabled}}" uib-tooltip="{{variable.type.locale}}{{variable.name?' ('+variable.name+')':''}}" tooltip-placement="{{tooltipPlacement}}" class="mc-inline-editer-ab" buttons="no" onbeforesave="updateVariable(variable)" editable-text="variable.value">
    <i class="fa fa-balance-scale mc-icon-2x"></i>
    <span class="mc-style-ab">{{variable.value ||"-"}} {{variable.unit}}</span>
  </span>
</div>

<!-- Stop -->
<div ng-if="variable.type.en === 'Stop'">
  <span ng-disabled="variable.readOnly" tooltip-enable="{{tooltipEnabled}}" uib-tooltip="{{variable.type.locale}}{{variable.name?' ('+variable.name+')':''}}" tooltip-placement="{{tooltipPlacement}}" class="mc-inline-editer-ab">
    <i ng-init="variable.value = 1" class="fa fa-stop mc-icon-2x" ng-click="updateVariable(variable)"></i>
  </span>
</div>

<!-- Up -->
<div ng-if="variable.type.en === 'Up'">
  <span ng-disabled="variable.readOnly" tooltip-enable="{{tooltipEnabled}}" uib-tooltip="{{variable.type.locale}}{{variable.name?' ('+variable.name+')':''}}" tooltip-placement="{{tooltipPlacement}}" class="mc-inline-editer-ab">
    <i ng-init="variable.value = 1" class="fa fa-arrow-up mc-icon-2x" ng-click="updateVariable(variable)"></i>
  </span>
</div>

<!-- Down -->
<div ng-if="variable.type.en === 'Down'">
  <span ng-disabled="variable.readOnly" tooltip-enable="{{tooltipEnabled}}" uib-tooltip="{{variable.type.locale}}{{variable.name?' ('+variable.name+')':''}}" tooltip-placement="{{tooltipPlacement}}" class="mc-inline-editer-ab">
    <i ng-init="variable.value = 1" class="fa fa-arrow-down mc-icon-2x" ng-click="updateVariable(variable)"></i>
  </span>
</div>

<!-- Rain -->
<div ng-if="variable.type.en === 'Rain'">
  <span e-ng-disabled="variable.readOnly" tooltip-enable="{{tooltipEnabled}}" uib-tooltip="{{variable.type.locale}}{{variable.name?' ('+variable.name+')':''}}" tooltip-placement="{{tooltipPlacement}}" class="mc-inline-editer-ab" buttons="no" onbeforesave="updateVariable(variable)" editable-text="variable.value">
    <i class="wi wi-raindrops mc-icon-2x"></i>
    <span class="mc-style-ab">{{variable.value ||"-"}} {{variable.unit}}</span>
  </span>
</div>

<!-- Rain rate-->
<div ng-if="variable.type.en === 'Rain rate'">
  <span e-ng-disabled="variable.readOnly" tooltip-enable="{{tooltipEnabled}}" uib-tooltip="{{variable.type.locale}}{{variable.name?' ('+variable.name+')':''}}" tooltip-placement="{{tooltipPlacement}}" class="mc-inline-editer-ab" buttons="no" onbeforesave="updateVariable(variable)" editable-text="variable.value">
    <i class="wi wi-raindrops mc-icon-2x">r</i>
    <span class="mc-style-ab">{{variable.value ||"-"}} {{variable.unit}}</span>
  </span>
</div>

<!-- Distance-->
<div ng-if="variable.type.en === 'Distance'">
  <span e-ng-disabled="variable.readOnly" tooltip-enable="{{tooltipEnabled}}" uib-tooltip="{{variable.type.locale}}{{variable.name?' ('+variable.name+')':''}}" tooltip-placement="{{tooltipPlacement}}" class="mc-inline-editer-ab" buttons="no" onbeforesave="updateVariable(variable)" editable-text="variable.value">
    <i class="fa fa-binoculars mc-icon-2x"></i>
    <span class="mc-style-ab">{{variable.value ||"-"}} {{variable.unit}}</span>
  </span>
</div>

<!-- Current-->
<div ng-if="variable.type.en === 'Current'">
  <span e-ng-disabled="variable.readOnly" tooltip-enable="{{tooltipEnabled}}" uib-tooltip="{{variable.type.locale}}{{variable.name?' ('+variable.name+')':''}}" tooltip-placement="{{tooltipPlacement}}" class="mc-inline-editer-ab" buttons="no" onbeforesave="updateVariable(variable)" editable-text="variable.value">
    <span ng-hide="hideVariableName"><i class="fa mc-icon-2x">I</i></span>
    <span class="mc-style-ab">{{variable.value ||"-"}} {{variable.unit}}</span>
  </span>
</div>

<!-- Voltage-->
<div ng-if="variable.type.en === 'Voltage'">
  <span e-ng-disabled="variable.readOnly" tooltip-enable="{{tooltipEnabled}}" uib-tooltip="{{variable.type.locale}}{{variable.name?' ('+variable.name+')':''}}" tooltip-placement="{{tooltipPlacement}}" class="mc-inline-editer-ab" buttons="no" onbeforesave="updateVariable(variable)" editable-text="variable.value">
    <span ng-hide="hideVariableName"><i class="fa mc-icon-2x">V</i></span>
    <span class="mc-style-ab">{{variable.value ||"-"}} {{variable.unit}}</span>
  </span>
</div>

<!-- Impedance-->
<div ng-if="variable.type.en === 'Impedance'">
  <span e-ng-disabled="variable.readOnly" tooltip-enable="{{tooltipEnabled}}" uib-tooltip="{{variable.type.locale}}{{variable.name?' ('+variable.name+')':''}}" tooltip-placement="{{tooltipPlacement}}" class="mc-inline-editer-ab" buttons="no"
    onbeforesave="updateVariable(variable)" editable-text="variable.value">
    <span ng-hide="hideVariableName"><i class="fa mc-icon-2x">Ohm</i></span>
    <span class="mc-style-ab">{{variable.value ||"-"}} {{variable.unit}}</span>
  </span>
</div>

<!-- Armed -->
<div ng-if="variable.type.en === 'Armed'">
  <span tooltip-enable="{{tooltipEnabled}}" uib-tooltip="{{variable.type.locale}}{{variable.name?' ('+variable.name+')':''}}" tooltip-placement="{{tooltipPlacement}}">
    <input bs-switch  ng-change="updateVariable(variable)" ng-model="variable.value" ng-init="variable.value = cs.getInteger(variable.value)"type="checkbox"
      switch-animate="{{cs.mcbStyle.animate}}" switch-handle-width="{{cs.mcbStyle.handleWidth}}" switch-label-width="{{cs.mcbStyle.labelWidth}}"
      switch-off-color="default" switch-on-color="primary" switch-size="{{cs.mcbStyle.size}}" switch-readonly="variable.readOnly"
      ng-true-value="1" ng-false-value="0" switch-on-text="Armed" switch-off-text="Bypassed">
  </span>
</div>

<!-- Tripped -->
<div ng-if="variable.type.en === 'Tripped'">
  <span tooltip-enable="{{tooltipEnabled}}" uib-tooltip="{{variable.type.locale}}{{variable.name?' ('+variable.name+')':''}}" tooltip-placement="{{tooltipPlacement}}">
    <input bs-switch  ng-change="updateVariable(variable)" ng-model="variable.value" ng-init="variable.value = cs.getInteger(variable.value)"type="checkbox"
      switch-animate="{{cs.mcbStyle.animate}}" switch-handle-width="{{cs.mcbStyle.handleWidth}}" switch-label-width="{{cs.mcbStyle.labelWidth}}"
      switch-off-color="default" switch-on-color="primary" switch-size="{{cs.mcbStyle.size}}" switch-readonly="variable.readOnly"
      ng-true-value="1" ng-false-value="0" switch-on-text="Tripped" switch-off-text="Untripped">
  </span>
</div>

<!-- Lock status -->
<div ng-if="variable.type.en === 'Lock status'">
  <span tooltip-enable="{{tooltipEnabled}}" uib-tooltip="{{variable.type.locale}}{{variable.name?' ('+variable.name+')':''}}" tooltip-placement="{{tooltipPlacement}}">
    <input bs-switch  ng-change="updateVariable(variable)" ng-model="variable.value" ng-init="variable.value = cs.getInteger(variable.value)" type="checkbox"
      switch-animate="{{cs.mcbStyle.animate}}" switch-handle-width="{{cs.mcbStyle.handleWidth}}" switch-label-width="{{cs.mcbStyle.labelWidth}}"
      switch-off-color="danger" switch-on-color="primary" switch-size="{{cs.mcbStyle.size}}" switch-readonly="variable.readOnly"
      ng-true-value="1" ng-false-value="0" switch-on-text="Locked" switch-off-text="Unlocked">
  </span>
</div>

<!-- HVAC flow mode -->
<div ng-if="variable.type.en === 'HVAC flow mode'">
  <span e-ng-disabled="variable.readOnly" tooltip-enable="{{tooltipEnabled}}" uib-tooltip="{{variable.type.locale}}{{variable.name?' ('+variable.name+')':''}}" tooltip-placement="{{tooltipPlacement}}" class="mc-sab-dropdown mc-inline-editer-ab mc-icon-md-1"
    onbeforesave="updateVariable(variable)" buttons="no" editable-select="variable.value" e-ng-options="hvac.id as hvac.displayName for hvac in hvacOptionsFlowMode">
    <span class="mc-style-ab">{{variable.value || "not set"}}</span>
  </span>
</div>

<!-- HVAC flow state -->
<div ng-if="variable.type.en === 'HVAC flow state'">
  <span e-ng-disabled="variable.readOnly" tooltip-enable="{{tooltipEnabled}}" uib-tooltip="{{variable.type.locale}}{{variable.name?' ('+variable.name+')':''}}" tooltip-placement="{{tooltipPlacement}}" class="mc-inline-editer-ab mc-icon-md-1"
    onbeforesave="updateVariable(variable)" buttons="no" editable-select="variable.value" e-ng-options="hvac.id as hvac.displayName for hvac in hvacOptionsFlowState">
    <span class="mc-style-ab">{{variable.value || "not set"}}</span>
  </span>
</div>

<!-- HVAC fan speed -->
<div ng-if="variable.type.en === 'HVAC speed'">
  <span e-ng-disabled="variable.readOnly" tooltip-enable="{{tooltipEnabled}}" uib-tooltip="{{variable.type.locale}}{{variable.name?' ('+variable.name+')':''}}" tooltip-placement="{{tooltipPlacement}}" class="mc-inline-editer-ab mc-icon-md-1"
    onbeforesave="updateVariable(variable)" e-style="height: 22px;" buttons="no" editable-select="variable.value" e-ng-options="hvac.id as hvac.displayName for hvac in hvacOptionsFanSpeed">
    <span class="mc-style-ab">{{variable.value || "not set"}}</span>
  </span>
</div>

<!-- HVAC Heat set point -->
<div ng-if="variable.type.en === 'HVAC setpoint heat'">
  <span e-ng-disabled="variable.readOnly" tooltip-enable="{{tooltipEnabled}}" uib-tooltip="{{variable.type.locale}}{{variable.name?' ('+variable.name+')':''}}" tooltip-placement="{{tooltipPlacement}}" class="mc-inline-editer-ab" buttons="no"
    onbeforesave="updateVariable(variable)" editable-text="variable.value">
    <i class="wi wi-thermometer mc-icon-2x">h</i>
    <span class="mc-style-ab">{{variable.value ||"-"}} {{variable.unit}}</span>
  </span>
</div>

<!-- HVAC Cool set point -->
<div ng-if="variable.type.en === 'HVAC setpoint cool'">
  <span e-ng-disabled="variable.readOnly" tooltip-enable="{{tooltipEnabled}}" uib-tooltip="{{variable.type.locale}}{{variable.name?' ('+variable.name+')':''}}" tooltip-placement="{{tooltipPlacement}}" class="mc-inline-editer-ab" buttons="no"
    onbeforesave="updateVariable(variable)" editable-text="variable.value">
    <i class="wi wi-thermometer mc-icon-2x">c</i>
    <span class="mc-style-ab">{{variable.value ||"-"}} {{variable.unit}}</span>
  </span>
</div>

<!-- Variable 1,2,3,4,5 -->
<div ng-if="variable.type.en.indexOf('Variable ') > -1" tooltip-enable="{{tooltipEnabled}}" uib-tooltip="{{variable.type.locale}}{{variable.name?' ('+variable.name+')':''}}" tooltip-placement="{{tooltipPlacement}}">
  <span e-ng-disabled="variable.readOnly" tooltip-enable="{{tooltipEnabled}}" uib-tooltip="{{variable.type.locale}}{{variable.name?' ('+variable.name+')':''}}" tooltip-placement="{{tooltipPlacement}}" class="mc-inline-editer-ab" buttons="no"
    onbeforesave="updateVariable(variable)" editable-text="variable.value">
    <span class="mc-style-ab">
      <span ng-hide="hideVariableName">{{variable.name ? variable.name.length > 12 ? variable.name.substring(0,9)+'.. ' : variable.name : variable.type.en.replace('Variable ','V')}}: </span>
      {{variable.value ||"-"}} {{variable.unit}}
    </span>
  </span>
</div>

<!-- Volume -->
<div ng-if="variable.type.en === 'Volume'" tooltip-enable="{{tooltipEnabled}}" uib-tooltip="{{variable.type.locale}}{{variable.name?' ('+variable.name+')':''}}" tooltip-placement="{{tooltipPlacement}}">
  <span e-ng-disabled="variable.readOnly" tooltip-enable="{{tooltipEnabled}}" uib-tooltip="{{variable.type.locale}}{{variable.name?' ('+variable.name+')':''}}" tooltip-placement="{{tooltipPlacement}}" class="mc-inline-editer-ab" buttons="no"
    onbeforesave="updateVariable(variable)" editable-text="variable.value">
    <span class="mc-style-ab">
      <span ng-hide="hideVariableName">{{variable.name ? variable.name.length > 12 ? variable.name.substring(0,9)+'.. ' : variable.name : 'Vol'}}: </span>
      {{variable.value ||"-"}} {{variable.unit}}
    </span>
  </span>
</div>

<!-- RGB color picker -->
<div ng-if="variable.type.en === 'RGB'">
  <span tooltip-enable="{{tooltipEnabled}}" uib-tooltip="{{variable.type.locale}}{{variable.name?' ('+variable.name+')':''}}" tooltip-placement="{{tooltipPlacement}}">
    <button style="background-color:{{variable.value}};width:70px;color:white;" class="btn btn-sm" colorpicker="hex" colorpicker-position="top"
      ng-disabled="variable.readOnly" ng-change="updateVariable(variable)" ng-model="variable.value">{{variable.value || "-"}}</button>
  </span>
</div>

<!-- RGBW color picker -->
<div ng-if="variable.type.en === 'RGBW'">
  <span tooltip-enable="{{tooltipEnabled}}" uib-tooltip="{{variable.type.locale}}{{variable.name?' ('+variable.name+')':''}}" tooltip-placement="{{tooltipPlacement}}" ng-disabled="variable.readOnly">
    <button style="background-color:{{variable.rgba}};width:70px;color:white;" class="btn btn-sm" colorpicker="rgba" colorpicker-position="top" ng-disabled="variable.readOnly"
      ng-init="variable.rgba = cs.hex2rgba(variable.value)" ng-change="updateRgba(variable)" ng-model="variable.rgba">{{variable.value || "-"}}</button>
  </span>
</div>

<!-- Default, if non selected -->
<div ng-if="definedVariableTypes.indexOf(variable.type.en) == -1">
  <span e-ng-disabled="variable.readOnly" tooltip-enable="{{tooltipEnabled}}" uib-tooltip="{{variable.type.locale}}{{variable.name?' ('+variable.name+')':''}}" tooltip-placement="{{tooltipPlacement}}" class="mc-inline-editer-ab" buttons="no"
    onbeforesave="updateVariable(variable)" editable-text="variable.value">
    <span class="mc-style-ab">
      <span ng-hide="hideVariableName">{{variable.name ? variable.name.length > 12 ? variable.name.substring(0,9)+'.. ' : variable.name : variable.type.en}}: </span>
      {{variable.value ||"-"}} {{variable.unit}}
    </span>
  </span>
</div>
