<div class="page-header">
    <h1>{{'applicationsHtmlTitle' | translate}}</h1>
</div>

<!--The new application HTML code-->
<div class="card-pf card-pf-utilization">
  <div class="row toolbar-pf">
    <div class="col-sm-12">
      <form class="toolbar-pf-actions">
        <div class="form-group toolbar-pf-filter">
          <label class="sr-only" for="filter">{{'applicaitonName' | translate}}</label>
          <div class="input-group">
            <div class="input-group-btn">
              <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Name <span class="caret"></span></button>
              <ul class="dropdown-menu">
                <li class="selected"><a href="#">{{'applicaitonName' | translate}}</a></li>
                <li><a href="#">{{'applicaitonType' | translate}}</a></li>
              </ul>
            </div><!-- /btn-group -->
            <input type="text" class="form-control" id="filter" placeholder="{{'filterByName' | translate}}">
          </div><!-- /input-group -->
        </div>
        <div class="form-group">
          <div class="dropdown btn-group">
            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{{'applicaitonType' | translate}} <span class="caret"></span></button>
            <ul class="dropdown-menu">
              <li class="selected"><a href="#">{{'allApps' | translate}}</a></li>
              <li><a href="#">{{'internalApps' | translate}}</a></li>
              <li><a href="#">{{'thirdpartyApps' | translate}}</a></li>
            </ul>
          </div>
        </div>
        <div class="form-group">
          <input id="app-check" type="checkbox" checked> <label for="app-check"> {{'applicationInUse' | translate}}</label>
        </div>

      </form>
      <div class="row toolbar-pf-results">
        <div class="col-sm-12">
          <h5>40 {{'appResults' | translate}}</h5>
          <p>{{'activeFilters' | translate}}</p>
          <ul class="list-inline">
            <li>
              <span class="label label-info">
                {{'applicaitonName' | translate}}: nameofthething
                <a href="#"><span class="pficon pficon-close"></span></a>
              </span>
            </li>
            <li>
              <span class="label label-info">
                {{'applicaitonName' | translate}}: nameofthething
                <a href="#"><span class="pficon pficon-close"></span></a>
              </span>
            </li>
            <li>
              <span class="label label-info">
                {{'applicaitonName' | translate}}: nameofthething
                <a href="#"><span class="pficon pficon-close"></span></a>
              </span>
            </li>
          </ul>
          <p><a href="#">{{'clearAllFilter' | translate}}</a></p>
        </div>
      </div>
    </div>
  </div>



<div class="card-pf-body">

  <div id="pf-list-simple-expansion" class="list-group list-view-pf list-view-pf-view">
    <div class="list-group-item">
      <div class="list-group-item-header">
        <div class="list-view-pf-expand">
          <span class="fa fa-angle-right"></span>
        </div>
        <div class="list-view-pf-main-info">
          <div class="list-view-pf-left">
            <span class="fa fa-desktop list-view-pf-icon-sm"></span>
          </div>
          <div class="list-view-pf-body">
            <div class="list-view-pf-description">
              <div class="list-group-item-heading">
                Admin CLI
              </div>
              <div class="list-group-item-text">
                <ul class="app-info">
                  <li>Internal</li>
                  <li><span class="current-color">In-use</span></li>
                  <li><i class="fa fa-link"></i> <a>http://photoz.com/admincli</a></li>
                </ul>
              </div>
            </div>
          </div>
      </div>
      <!--The collapse application HTNL code-->
      <div class="list-group-item-container container-fluid hidden">
        <div class="close">
          <span class="pficon pficon-close"></span>
        </div>
        <form class="form-horizontal app-form">
          <div class="form-group">
            <label class="col-md-2 control-label" for="textInput">Client</label>
            <div class="col-md-6">
              Google
            </div>
          </div>
          <div class="divide-line"></div>
          <div class="form-group">
            <label class="col-md-2 control-label" for="textInput2">Description</label>
            <div class="col-md-6">
              Google is an American mutinational technology company that specialize in internet-related services and products, which include online advertising technologies,search engine, cloud computing, software, and hardware.
            </div>
          </div>
          <div class="form-group">
            <label class="col-md-2 control-label" for="textInput3">URL</label>
            <div class="col-md-6">
              <a href="#">www.google.com</a>
            </div>
          </div>
          <div class="form-group">
            <label class="col-md-2 control-label" for="textInput4">Has access to</label>
            <div class="col-md-6">
              Account
              <ul>
                <li>View profile</li>
                <li>Manage account links</li>
                <li>Manage account</li>
              </ul>
            </div>
          </div>
          <div class="form-group">
            <label class="col-md-2 control-label">Access granted on</label>
            <div class="col-md-6">
              2018-1-7 17：33：52
            </div>
          </div>
          <div class="divide-line"></div>
          <div class="form-group">
            <label class="col-md-2 control-label">
               <!-- Button trigger modal -->
              <button type="button" class="btn btn-default btn-logout" data-toggle="modal" data-target="#myModal">Remove Access</button>
              <!-- End Button trigger modal -->
            </label>
            <div class="col-md-10 remove-notice">
              <i class="fa fa-info-circle"></i>
              <span>By clicking ‘Remove Access’, you will remove granted permissions of this app. This app will no longer use your information.</span>
            </div>
          </div>
        </form>
      </div>
      <!--The end of the collapse application HTNL code-->
    </div>
  </div>
  <div id="pf-list-simple-expansion" class="list-group list-view-pf list-view-pf-view">
    <div class="list-group-item">
      <div class="list-group-item-header">
        <div class="list-view-pf-expand">
          <span class="fa fa-angle-right"></span>
        </div>
        <div class="list-view-pf-main-info">
          <div class="list-view-pf-left">
            <span class="fa fa-desktop list-view-pf-icon-sm"></span>
          </div>
          <div class="list-view-pf-body">
            <div class="list-view-pf-description">
              <div class="list-group-item-heading">
                Admin CLI
              </div>
              <div class="list-group-item-text">
                <ul class="app-info">
                  <li>Internal</li>
                  <li><span class="current-color">In-use</span></li>
                  <li><i class="fa fa-link"></i> <a>http://photoz.com/admincli</a></li>
                </ul>
              </div>
            </div>
          </div>
      </div>
      <!--The collapse application HTNL code-->
      <div class="list-group-item-container container-fluid hidden">
        <div class="close">
          <span class="pficon pficon-close"></span>
        </div>
        <form class="form-horizontal app-form">
          <div class="form-group">
            <label class="col-md-2 control-label" for="textInput">Client</label>
            <div class="col-md-6">
              Google
            </div>
          </div>
          <div class="divide-line"></div>
          <div class="form-group">
            <label class="col-md-2 control-label" for="textInput2">Description</label>
            <div class="col-md-6">
              Google is an American mutinational technology company that specialize in internet-related services and products, which include online advertising technologies,search engine, cloud computing, software, and hardware.
            </div>
          </div>
          <div class="form-group">
            <label class="col-md-2 control-label" for="textInput3">URL</label>
            <div class="col-md-6">
              <a href="#">www.google.com</a>
            </div>
          </div>
          <div class="form-group">
            <label class="col-md-2 control-label" for="textInput4">Has access to</label>
            <div class="col-md-6">
              Account
              <ul>
                <li>View profile</li>
                <li>Manage account links</li>
                <li>Manage account</li>
              </ul>
            </div>
          </div>
          <div class="form-group">
            <label class="col-md-2 control-label">Access granted on</label>
            <div class="col-md-6">
              2018-1-7 17：33：52
            </div>
          </div>
          <div class="divide-line"></div>
          <div class="form-group">
            <label class="col-md-2 control-label">
               <!-- Button trigger modal -->
              <button type="button" class="btn btn-default btn-logout" data-toggle="modal" data-target="#myModal">Remove Access</button>
              <!-- End Button trigger modal -->
            </label>
            <div class="col-md-10 remove-notice">
              <i class="fa fa-info-circle"></i>
              <span>By clicking ‘Remove Access’, you will remove granted permissions of this app. This app will no longer use your information.</span>
            </div>
          </div>
        </form>
      </div>
      <!--The end of the collapse application HTNL code-->
    </div>
  </div>
</div>
<!--End of the new application HTML code-->




</div>
<script>
    $(document).ready(function () {
      // click the list-view heading then expand a row
      $("#pf-list-simple-expansion .list-group-item-header").click(function(event){
        if(!$(event.target).is("button, a, input, .fa-ellipsis-v")){
          $(this).find(".fa-angle-right").toggleClass("fa-angle-down")
          .end().parent().toggleClass("list-view-pf-expand-active")
          .find(".list-group-item-container").toggleClass("hidden");
        } else {
        }
      })

      // click the close button, hide the expand row and remove the active status
      $("#pf-list-simple-expansion .list-group-item-container .close").on("click", function (){
        $(this).parent().addClass("hidden")
        .parent().removeClass("list-view-pf-expand-active")
        .find(".fa-angle-right").removeClass("fa-angle-down");
      })
    });
</script>
