{% extends 'base.html' %}
{% set active_page = "device" %}
{% set version2 = False %}

{% block container %}
	{% if current_user.is_authenticated %}
	<!--start list div-->
	<div ng-init="deviceList()">
    <form>
      <div class="form-group"> <!--start search bar-->
        <div class="input-group">
          <div class="input-group-addon"><i class="fa fa-search"></i></div>
          <input type="text" class="form-control" placeholder="Search within results...   Note: excludes 'RACK' and 'SITE' columns" ng-model="gen.searchValue">
        </div>
      </div> <!--end search bar-->
    </form>

    <hr>

    <p ng-show="gen.errorEvent == 'noData'">Error: No Data Found</p>

    <div class="row" ng-if="gen.tableLoading==true">
             <div class="col-md-2 col-md-offset-5" style="text-align:center">
        <i class="fa fa-refresh fa-spin"></i>
      </div>
    </div>

    <div class="panel panel-default" style="overflow:auto" ng-init="gen.sortValue='deviceName'">
      <table class="table table-bordered table-striped table-hover" ng-show="gen.tableLoading == false && gen.errorEvent != 'noData'">
        <thead>
          <tr>
            <th>&nbsp;</th>
            <th>
              <a href="#" ng-click="setSort('deviceName'); reverseSort()">DEVICE NAME
                <span ng-show="gen.sortValue == 'deviceName' && !gen.sortReverse" class="fa fa-caret-down"></span>
                <span ng-show="gen.sortValue == 'deviceName' && gen.sortReverse" class="fa fa-caret-up"></span>
              </a>
            </th>
            <th>
                RACK
            </th>
            <th>
                SITE
            </th>
            <th>
              <a href="#" ng-click="setSort('deviceSerial'); reverseSort()">SERIAL NO
                <span ng-show="gen.sortValue == 'deviceSerial' && !gen.sortReverse" class="fa fa-caret-down"></span>
                <span ng-show="gen.sortValue == 'deviceSerial' && gen.sortReverse" class="fa fa-caret-up"></span>
              </a>
            </th>
            <th>
              <a href="#" ng-click="setSort('deviceStatus'); reverseSort()">STATUS
                <span ng-show="gen.sortValue == 'deviceStatus' && !gen.sortReverse" class="fa fa-caret-down"></span>
                <span ng-show="gen.sortValue == 'deviceStatus' && gen.sortReverse" class="fa fa-caret-up"></span>
              </a>
            </th>
          </tr>
        </thead>
        <tbody>
          <tr ng-repeat="row in deviceData | orderBy:gen.sortValue:gen.sortReverse | filter:gen.searchValue">
            <td class="tools">
                <a href="https://{{row.name | angular}}.justin.tv" target="_blank">
                    <i class="fa fa-external-link"></i>
                </a>
            </td>
            <td ng-click="goToURL('{{ url_for('data.device_details') }}?name='+row.deviceName)">{{row.deviceName|angular}}</td>
            <td ng-click="goToURL('{{ url_for('data.device_details') }}?name='+row.deviceName)"
                ng-init="tempValue1=rackLegend[row.rackID]['rackName']">
                {{tempValue1|angular}}</td>
            <td ng-click="goToURL('{{ url_for('data.device_details') }}?name='+row.deviceName)"
                ng-init="tempValue2=locationLegend[rackLegend[row.rackID]['locationID']]">
                {{tempValue2|angular}}</td>
            <td ng-click="goToURL('{{ url_for('data.device_details') }}?name='+row.deviceName)">{{row.deviceSerial|angular}}</td>
            <td ng-click="goToURL('{{ url_for('data.device_details') }}?name='+row.deviceName)">{{row.deviceStatus|angular}}</td>
          </tr>
        </tbody>
      </table>
      </div>
    </div>
  </div>
  <!--end pop list div-->
	<!--end list div-->
	{% else %}
		<div class="jumbotron">
		  	<h3>Authorized Access Only</h3>
			<h4><a href="{{ url_for('auth.login') }}">Click Here To Login</a></h4>
		</div>
	{% endif %}
{% endblock %}
{% block scripts %}

{% endblock %}