<!--
* Licensed to the Apache Software Foundation (ASF) under one
* or more contributor license agreements.  See the NOTICE file
* distributed with this work for additional information
* regarding copyright ownership.  The ASF licenses this file
* to you under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance
* with the License.  You may obtain a copy of the License at
*
*     http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
-->
    
<div class="views-list-table">
  <div class="clearfix">
    <ol class="breadcrumb pull-left">
      <li class="active">Views</li>
    </ol>
    <div class="pull-right col-sm-4">
      <div class="input-group search-container">
        <input type="text" class="form-control search-input" placeholder="Search" ng-model="viewsFilter" ng-change="getFilteredViews()">
        <button type="button" class="close clear-search" ng-show="viewsFilter" ng-click="viewsFilter=''; getFilteredViews()"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <span class="input-group-addon">
          <span class="glyphicon glyphicon-search"></span>
        </span>
      </div>
    </div>
  </div>
  <hr>
  <div class="row">
    <div class="col-sm-3 padding-left-30"><h4>View Name</h4></div>
    <div class="col-sm-3"><h4>Instances</h4></div>
    <div class="col-sm-6"><h4></h4></div>
  </div>
  <accordion close-others="false">
    <accordion-group ng-repeat="view in filteredViews" is-open="view.isOpened">
      <accordion-heading>
        <div class="row">
          <div class="col-sm-3">
            <i class="glyphicon glyphicon-chevron-right" ng-class="{'opened': view.isOpened}"></i>
            {{view.view_name}}
          </div>
          <div class="col-sm-3">
            <span ng-repeat="(version, vData) in view.versions">
              {{version}}
                <span ng-switch="vData.status">
                  <span ng-switch-when="PENDING" class="viewstatus pending" ng-switch-when="true" tooltip="Pending..."></span>
                  <div class="viewstatus deploying" ng-switch-when="DEPLOYING" tooltip="Deploying...">
                    <div class="rect1"></div>
                    <div class="rect2"></div>
                    <div class="rect3"></div>
                  </div>
                  <span ng-switch-when="DEPLOYED">({{vData.count}})</span>
                  <span ng-switch-when="ERROR" tooltip="Error deploying. Check Ambari Server log."><i class="fa fa-exclamation-triangle"></i></span>
                </span>
              {{$last ? '' : ', '}}
            </span>
          </div>
          <div class="col-sm-6">{{view.description}}</div>
        </div>
      </accordion-heading>
      <table class="table instances-table">
        <tbody>
          <tr ng-repeat="instance in view.instances">
            <td class="col-sm-3"></td>
            <td class="col-sm-3">
              <a href="#/views/{{view.view_name}}/versions/{{instance.ViewInstanceInfo.version}}/instances/{{instance.ViewInstanceInfo.instance_name}}/edit" class="instance-link">{{instance.label}}</a>
            </td>
            <td class="col-sm-1">{{instance.ViewInstanceInfo.version}}</td>
            <td class="col-sm-5 " ><div class="description-column" tooltip="{{instance.ViewInstanceInfo.description}}">{{instance.ViewInstanceInfo.description || 'No description'}}</div>
            </td>
          </tr>
        </tbody>
        <tfoot>
          <tr>
            <td class="col-sm-3"></td>
            <td class="col-sm-3">
              <a tooltip="{{view.canCreateInstance ? '' : 'Unable to create view instances'}}" class="btn btn-default createisntance-btn {{view.canCreateInstance ? '' : 'disabled'}}" href ng-click="gotoCreate(view.view_name, view.canCreateInstance);"><span class="glyphicon glyphicon-plus"></span> Create Instance</a>
            </td>
            <td class="col-sm-3"></td>
            <td class="col-sm-3">
            </td>
          </tr>
        </tfoot>
      </table>
    </accordion-group>
    <div class="alert alert-info" ng-show="views && !filteredViews.length">
      No views to display.
    </div>

  </accordion>
</div>