<link href="/static/css/bootstrap-switch.css" rel="stylesheet" type="text/css" />
<link href="/static/css/bootstrap-slider.css" rel="stylesheet">
<link href="/static/css/buttons.css" rel="stylesheet" type="text/css" />
<div class="col-md-6 col-sm-6 col-xs-12">
  <div class="x_panel">
    <div class="x_title">
      <h2 id="s_title_{{ count }}">Schakelaars</h2>
      <ul class="nav navbar-right panel_toolbox">
        <li><a class="close-link"><i class="fa fa-close"></i></a>
        </li>
      </ul>
      <div class="clearfix"></div>
    </div>
    <div class="form-group">
      <br>
      <form class="form-horizontal form-label-left">
        <table class="table" style="width: auto;">
          {% for k, v in blockArray[count]["switches"].iteritems() %}
          <tr>
            {% if "dimmer" in v[2] or "rgb" in v[2] %}
                <td style="border-top: none;  vertical-align: middle;"><a id="Adim_{{v[1]}}_block_{{count}}" style="cursor: pointer;"><label style="cursor: pointer;" class=""> &nbsp;{{k}}</label></a></td>
              {% else %}
            <td style="border-top: none;  vertical-align: middle;"><label class=""> &nbsp;{{k}}</label></td>
            {% endif %}
            <td style="border-top: none;">
              {% if "switch" in v[2]  %}
              <input id="switch_{{v[1]}}_block_{{count}}" type="checkbox" checked data-size="mini">
              {% elif "dimmer" in v[2] %}
            <input id="dimmer_{{v[1]}}_block_{{count}}" data-slider-id='dim_{{v[1]}}_block_{{count}}' type="text" test={{ v[2] }} state="on" data-slider-min="0" data-slider-max="100" data-slider-step="1" data-slider-value="14" />
              {% elif "pushon" in v[2] %}
                <button id="push_{{v[1]}}_block_{{count}}" class="btn  btn-primary btn-circle">&nbsp;<li class="fa fa-power-off" aria-hidden="true"></i>&nbsp;</button>
                {% elif "pushoff" in v[2] %}
                  <button id="push_{{v[1]}}_block_{{count}}" class="btn  btn-danger btn-circle">&nbsp;<li class="fa fa-power-off" aria-hidden="true"></i>&nbsp;</button>
                {% elif "group" in v[2] %}
                  <div><div style="float: left"><button id="groupon_{{v[1]}}_block_{{count}}" class="btn  btn-primary btn-circle">&nbsp;<li class="fa fa-power-off" aria-hidden="true"></i>&nbsp;</button></div><div style="padding-left: 20px; float: left"><button id="groupoff_{{v[1]}}_block_{{count}}" class="btn  btn-primary btn-circle btn-danger">&nbsp;<li class="fa fa-power-off" aria-hidden="true"></i>&nbsp;</button></div></div>
                {% elif "scene" in v[2] %}
                  <button id="scene_{{v[1]}}_block_{{count}}" class="btn btn-primary btn-circle">&nbsp;<li class="fa fa-power-off" aria-hidden="true"></i>&nbsp;</button>
               {% elif v[2] == "setpoint" %}
                     <div>
                         <div style="float: left; margin-right: 5px"><h1 id="setpoint_{{v[1]}}_block_{{count}}" style="font-size: 16px;"></h1></div>
                         <div style="float: left">
                           <div style=""><i onclick="changeUp({{ v[1] }}, {{count}})" class="fa fa-arrow-up" style="font-size: 13px; cursor: pointer;" aria-hidden="true"></i></div>
                           <div style=""><i onclick="changeDown({{ v[1] }}, {{count}})" class="fa fa-arrow-down" style="font-size: 13px; cursor: pointer;" aria-hidden="true"></i></div>
                         </div>
                     </div>
                {% elif "setpoint_slider" in v[2] %}
                <input id="setpoint_slider{{v[1]}}_block_{{count}}" data-slider-id='stpnt_{{v[1]}}_block_{{count}}' type="text" state="on" data-slider-min="{{v[3]}}" data-slider-max="{{v[4]}}" data-slider-step="0.5" />
              {% elif "selector" in v[2] %}
              <div class="btn-toolbar">
              <div id="selector_body_{{v[1]}}_block_{{count}}" class="btn-group pull-right" style="width: 100%;"> </div>
            </div>
              {% elif "rgb" in v[2] %}
              &nbsp;<input id="dimmer_{{v[1]}}_block_{{count}}" data-slider-id='dim_{{v[1]}}_block_{{count}}' type="text" data-slider-min="0" data-slider-max="100" data-slider-step="1" data-slider-value="14" />
              <br><br>
              <button type="button" class="btn btn-primary btn-xs" data-toggle="modal" data-target="#myModal-{{v[1]}}-block-{{count}}">RGB colors</button>
              <!-- Modal -->
	      <div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true" id="myModal-{{v[1]}}-block-{{count}}">
                <div class="modal-dialog modal-sm">

                  <!-- Modal content-->
                  <div class="modal-content">
                    <div class="modal-header">
                      <button type="button" class="close" data-dismiss="modal">&times;</button>
                      <h4 class="modal-title">RGB Selector</h4>
                    </div>
                    <div class="modal-body">
                      <div id="rgb_{{v[1]}}_block_{{count}}" class="inl-bl"></div>
                      <style>
                      .inl-bl {
                        display: inline-block;
                      }
                      </style>
                      <script>
                      $(function() {
                        $('#rgb_{{v[1]}}_block_{{count}}').colorpicker({
                          color: '#ffaa00',
                          container: true,
                          inline: true
                        });
                      });
                      </script>
                    </div>
                    <div class="modal-footer">
                      <button type="button" class="btn btn-default" data-dismiss="modal" onclick="changeRgbColor('rgb_{{v[1]}}_block_{{count}}')">Save</button>
                      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    </div>
                  </div>
                </div>
              </div>
              {% endif %}
            </td>
          </tr>
          {% endfor %}
        </table>
      </form>
    </div>
  </div>
</div>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
  var updateSwitches_block_{{count}}=[];
  var updateDimmers_block_{{count}}=[];
  var updateSetpoints_block_{{count}}=[];
  var updateSetpoint_sliders_block_{{count}}=[];

  {% for k, v in blockArray[count]["switches"].iteritems() %}

      {% if v[0] %}
          $('#s_title_{{ count }}').html("{{ v[0] }}");
      {% endif %}
  	{% if v[2] == "switch" %}
  		$('input[id="switch_{{v[1]}}_block_{{count}}"]').on('switchChange.bootstrapSwitch', function(event, state) {
    			changeSwitch(this, {{v[1]}});
  		});
  		updateSwitches_block_{{count}}.push("{{v[1]}}");
    {% elif (v[2] == "pushon") %}
    $('button[id="push_{{v[1]}}_block_{{count}}"]').click(function(e) {
      e.preventDefault();
      changePush({{v[1]}}, 'on');
    });
    {% elif (v[2] == "pushoff") %}
    $('button[id="push_{{v[1]}}_block_{{count}}"]').click(function(e) {
      e.preventDefault();
      changePush({{v[1]}}, 'off');
    });
    {% elif (v[2] == "group") or (v[2] == "scene") %}
    $('button[id="groupon_{{v[1]}}_block_{{count}}"]').click(function(e) {
      e.preventDefault();
      changeScene({{v[1]}}, 'on');
    });
    $('button[id="groupoff_{{v[1]}}_block_{{count}}"]').click(function(e) {
        e.preventDefault();
        changeScene({{v[1]}}, 'off');
      });
    $('button[id="scene_{{v[1]}}_block_{{count}}"]').click(function(e) {
          e.preventDefault();
          changeScene({{v[1]}}, 'on');
      });
    {% elif (v[2] == "selector") %}
      url = '/api?type=devices&rid=' + {{v[1]}};
      requestAPI(flask_server + url, function(d) {
        r = JSON.parse(d);
        btns = r['result'][0]['LevelNames'].split('|');

        $.each(btns, function (i, lvlname) {
          activebtn = r['result'][0]['Level']
          if (i != '0') {
            i = i + '0';
          }
          if (activebtn == i) {
            btnClass = 'btn btn-primary btn-responsive';
          } else {
            btnClass = 'btn btn-responsive';
          }
          if (r['result'][0]['LevelOffHidden'] == true && lvlname == 'Off') {
            style = 'style="display: none;"';
          } else {
            style = '';
          }
          bid = 'selector_{{v[1]}}_block_{{count}}_index_';
          b = '<button id="' + bid + i + '" onclick="switchSelector({{v[1]}}, ' + i + ', this.id)" class="' + btnClass + '"' + style + '>' + lvlname + '</button>';
          $('#selector_body_{{v[1]}}_block_{{count}}').append(b);
          $('#' + 'selector_{{v[1]}}_block_{{count}}_index_' + i).click(function(e) {
            e.preventDefault();
          });
        });
    });
    {% elif (v[2] == "setpoint") %}
      updateSetpoints_block_{{count}}.push("{{v[1]}}");
    {% elif (v[2] == "setpoint_slider") %}
      updateSetpoint_sliders_block_{{count}}.push(["{{v[1]}}", "{{v[3]}}", "{{v[4]}}"]);
  	{% elif (v[2] == "dimmer" or v[2] == "rgb") %}
      $('#Adim_{{v[1]}}_block_{{count}}').click(function(e) {
        e.preventDefault();
        changeDimmer('dim_{{v[1]}}_block_{{count}}_track', {{v[1]}});
      });
  		updateDimmers_block_{{count}}.push("{{v[1]}}");
  	{% endif %}
  {% endfor %}
  refreshSwitches(updateSwitches_block_{{count}}, {{count}});
  refreshSetpoints(updateSetpoints_block_{{count}}, {{count}});
  dimmerSlider(updateDimmers_block_{{count}}, {{count}});
  setpointSlider(updateSetpoint_sliders_block_{{count}}, {{count}});

  setInterval(refreshSwitches, 9000, updateSwitches_block_{{count}}, {{count}});
  setInterval(dimmerSlider, 9000, updateDimmers_block_{{count}}, {{count}});
  setInterval(setpointSlider, 9000, updateSetpoint_sliders_block_{{count}}, {{count}});
  setInterval(refreshSetpoints, 9000, updateSetpoints_block_{{count}}, {{count}});

});
</script>
