<div ng-include="'/new/views/universe-header.html'"></div>
<div class="row">
 <div class="col-xs-12 navigate">
  <button ng-click="page(0)" class="col-xs-3 left-col">
   <span class="glyphicon glyphicon-arrow-left"></span>
  </button>
  <button title="Set all channels to 0" ng-click="light(OLA.MIN_CHANNEL_VALUE)" class="col-xs-2 off">
   <img height="16" width="16" src="/new/img/light_bulb_off.png">
  </button>
  <div class="col-xs-2">
   {{offset + 1}}/{{ceil(OLA.MAX_CHANNEL_NUMBER/limit)}}
  </div>
  <button title="Set all channels to full" ng-click="light(OLA.MAX_CHANNEL_VALUE)" class="col-xs-2 on">
   <img height="16" width="16" src="/new/img/light_bulb.png">
  </button>
  <button ng-click="page(1)" class="col-xs-3 right-col">
   <span class="glyphicon glyphicon-arrow-right"></span>
  </button>
 </div>
 <div class="col-xs-12 faders">
  <div ng-style="width" class="fader-group" ng-repeat="c in list | startFrom:offset*limit | limitTo:limit track by $index">
   <div class="channel-fader">{{c + 1}}</div>
   <input ng-change="change()" class="fader-fader" orient="vertical" min="{{OLA.MIN_CHANNEL_VALUE}}" max="{{OLA.MAX_CHANNEL_VALUE}}" type="range" ng-model="get[c]">
   <div class="value-fader">{{get[c]}}</div>
  </div>
 </div>
</div>
<div class="value-field">
 <div class="value-div" ng-repeat="c in get track by $index">
  <span class="value-span" ng-style="{'background-color': 'rgb('+c+','+c+','+c+')', 'color': getColor(c)}">{{c}}</span>
 </div>
</div>
