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

<!--The new application HTML code-->
<div class="card-pf card-pf-application">
  <div class="card-pf-body">
    <div class="row toolbar-pf">
      <div class="col-sm-12">
        <div id="toolbar-application-mobile">
          <h2>
            <span class="fa fa-angle-right"></span>
            <a href="javascript:void(0)" id="showFilterBtn">Filter</a>
          </h2>
        </div>
        <div id="toolbar-application">
          <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" id="filterDropdownBtn" 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" id="filterDropdownMenu">
                    <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" id="appTypeDropdownBtn" 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" id="appTypeDropdownMenu">
                  <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><span id="appResults">40</span> {{'appResults' | translate}}</h5>
              <p>{{'activeFilters' | translate}}</p>
              <ul class="list-inline" id="activeFiltersList">
                <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="#" id="clearAllFilters">{{'clearAllFilter' | translate}}</a></p>
            </div>
          </div>
        </div>
      </div>
    </div>


    <div class="list-group list-view-pf list-view-pf-view" id="appResultList">
      <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>
            <div class="row form-horizontal">
              <label class="col-md-2 control-label non-display" for="textInput">Client</label>
              <div class="col-md-6 non-display">
                Google
              </div>
            </div>
            <div class="row form-horizontal">
              <label class="col-md-2 control-label non-display" 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="row form-horizontal">
              <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="row form-horizontal">
              <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="row form-horizontal">
              <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="row form-horizontal">
              <label class="col-md-2 control-label">
                 <!-- Button trigger modal -->
                <button type="button" class="btn btn-default" 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>

        </div>
        <!--The end of the collapse application HTNL code-->
      </div>
    </div>
    <div 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>
        </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>
</div>
<!--End of the new application HTML code-->

<script>
    $(document).ready(function () {
      $("#toolbar-application-mobile").click(function(){
        $("#toolbar-application").toggle();
      })
      // click the list-view heading then expand a row
      $(".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
      $(".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>
