{% extends 'base.html' %}
{% set active_page = "rack" %}
{% set version2 = False %}
 
{% block container %}
  {% if current_user.is_authenticated %}
  <!--start list div-->
  <div ng-init="rackList()">
    <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='locationCOde'">
      <table class="table table-bordered table-striped table-hover" ng-show="gen.tableLoading == false && gen.errorEvent != 'noData'">
        <thead>
          <tr>
            <th>
              <a href="#" ng-click="setSort('locationCode'); reverseSort()">LOCATION CODE
                <span ng-show="gen.sortValue == 'locationCode' && !gen.sortReverse" class="fa fa-caret-down"></span>
                <span ng-show="gen.sortValue == 'locationCode' && gen.sortReverse" class="fa fa-caret-up"></span>
              </a>
            </th>
            <th>
              <a href="#" ng-click="setSort('rackName'); reverseSort()">RACK NAME
                <span ng-show="gen.sortValue == 'rackName' && !gen.sortReverse" class="fa fa-caret-down"></span>
                <span ng-show="gen.sortValue == 'rackName' && gen.sortReverse" class="fa fa-caret-up"></span>
              </a>
            </th>
            <th>
              <a href="#" ng-click="setSort('twitch_room'); reverseSort()">CAGE/ROOM
                <span ng-show="gen.sortValue == 'twitch_room' && !gen.sortReverse" class="fa fa-caret-down"></span>
                <span ng-show="gen.sortValue == 'twitch_room' && gen.sortReverse" class="fa fa-caret-up"></span>
              </a>
            </th>
            <th>
              <a href="#" ng-click="setSort('rackSubnet'); reverseSort()">MANAGEMENT SUBNET
                <span ng-show="gen.sortValue == 'rackSubnet' && !gen.sortReverse" class="fa fa-caret-down"></span>
                <span ng-show="gen.sortValue == 'rackSubnet' && gen.sortReverse" class="fa fa-caret-up"></span>
              </a>
            </th>
          </tr>
        </thead>
        <tbody>
          <tr ng-repeat="row in rackData | orderBy:gen.sortValue:gen.sortReverse | filter:gen.searchValue">
            <td ng-click="goToURL('{{ url_for('data.rack_details') }}?site='+legendData[row.locationID]+'&rack='+row.rackName)"">{{row.locationCode|angular}}</td>
            <td ng-click="goToURL('{{ url_for('data.rack_details') }}?site='+legendData[row.locationID]+'&rack='+row.rackName)">{{row.rackName|angular}}</td>
            <td ng-click="goToURL('{{ url_for('data.rack_details') }}?site='+legendData[row.locationID]+'&rack='+row.rackName)">{{row.twitch_room|angular}}</td>
            <td ng-click="goToURL('{{ url_for('data.rack_details') }}?site='+legendData[row.locationID]+'&rack='+row.rackName)">{{row.rackSubnet|angular}}</td>
          </tr>
        </tbody>
      </table>
      </div>
    </div>
  </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 %}