<link href="/static/css/bootstrap-switch.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>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>
            <td style="border-top: none;  vertical-align: middle;"><label class=""> &nbsp;{{k}}</label></td>
            <td style="border-top: none;">
              {% if "switch" in v[1]  %}
              <input id="switch_{{v[0]}}_block_{{count}}" type="checkbox" checked data-size="mini">
              {% elif "dimmer" in v[1] %}
              &nbsp;<input id="dimmer_{{v[0]}}_block_{{count}}" data-slider-id='dimmer_{{v[0]}}' type="text" test={{ v[1] }} data-slider-min="0" data-slider-max="100" data-slider-step="1" data-slider-value="14" />
               {% elif "setpoint" in v[1]  %}
                     <div>
                         <div style="float: left; margin-right: 5px"><h1 id="setpoint_{{v[0]}}_block_{{count}}" style="font-size: 16px;"></h1></div>
                         <div style=""><i onclick="changeUp({{ v[0] }}, {{count}})" class="fa fa-arrow-up" style="font-size: 13px; cursor: pointer;" aria-hidden="true"></i></div>
                         <div style=""><i onclick="changeDown({{ v[0] }}, {{count}})" class="fa fa-arrow-down" style="font-size: 13px; cursor: pointer;" aria-hidden="true"></i></div>
                     </div>
              {% elif "rgb" in v[1] %}
              &nbsp;<input id="dimmer_{{v[0]}}_block_{{count}}" data-slider-id='dimmer_{{v[0]}}' 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[0]}}-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[0]}}-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[0]}}_block_{{count}}" class="inl-bl"></div>
                      <style>
                      .inl-bl {
                        display: inline-block;
                      }
                      </style>
                      <script>
                      $(function() {
                        $('#rgb_{{v[0]}}_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[0]}}_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}}=[];
  {% for k, v in blockArray[count]["switches"].iteritems() %}
  	{% if v[1] == "switch" %}
  		$('input[id="switch_{{v[0]}}_block_{{count}}"]').on('switchChange.bootstrapSwitch', function(event, state) {
    			changeSwitch(this, {{v[0]}});
  		});
  		updateSwitches_block_{{count}}.push("{{v[0]}}");
  	{% elif (v[1] == "setpoint") %}
  		updateSetpoints_block_{{count}}.push("{{v[0]}}");
  	{% elif (v[1] == "dimmer" or v[1] == "rgb") %}
  		updateDimmers_block_{{count}}.push("{{v[0]}}");
  	{% endif %}
  {% endfor %}
  refreshSwitches(updateSwitches_block_{{count}}, {{count}});
  refreshSetpoints(updateSetpoints_block_{{count}}, {{count}});
  dimmerSlider(updateDimmers_block_{{count}}, {{count}});
  setInterval(refreshSwitches, 9000, updateSwitches_block_{{count}}, {{count}});
  setInterval(dimmerSlider, 9000, updateDimmers_block_{{count}}, {{count}});
  setInterval(refreshSetpoints, 9000, updateSetpoints_block_{{count}}, {{count}});
});
</script>
