<div ng-controller="Kubernetes.Apps">

  <div class="row">
    <div hawtio-breadcrumbs></div>
  </div>

  <div class="row">
    <div hawtio-tabs></div>
  </div>

  <div ng-hide="appSelectorShow">
    <div class="row filter-header">
      <div class="col-md-12">
        <span ng-show="model.apps.length && !id">
          <hawtio-filter ng-model="tableConfig.filterOptions.filterText"
                         css-class="input-xxlarge"
                         placeholder="Filter apps..."></hawtio-filter>
        </span>
        <span ng-hide="id" class="pull-right">
          <div class="btn-group">
            <a class="btn btn-default" ng-disabled="mode == 'list'" href="" ng-click="mode = 'list'">
              <i class="fa fa-list"></i></a>
            <a class="btn btn-default" ng-disabled="mode == 'detail'" href="" ng-click="mode = 'detail'">
              <i class="fa fa-table"></i></a>
          </div>
        </span>
        <span class="pull-right">&nbsp;</span>
        <button ng-show="model.apps.length && mode == 'list'"
                class="btn btn-danger pull-right"
                ng-disabled="!id && tableConfig.selectedItems.length == 0"
                ng-click="deletePrompt(id || tableConfig.selectedItems)">
          <i class="fa fa-remove"></i> Delete
        </button>
        <span class="pull-right">&nbsp;</span>
<!--
        <button ng-show="model.showRunButton"
                class="btn btn-success pull-right"
                ng-click="appSelectorShow = true"
                title="Run an application">
          <i class="fa fa-play-circle"></i> Run ...
        </button>
-->
        <span class="pull-right">&nbsp;</span>
        <span ng-include="'runButton.html'"></span>
        <span class="pull-right">&nbsp;</span>
        <button ng-show="id"
                class="btn btn-primary pull-right"
                ng-click="id = undefined"><i class="fa fa-list"></i></button>
      </div>
    </div>
    <div class="row">
      <div class="col-md-12">
        <div ng-hide="model.fetched">
          <div class="align-center">
            <i class="fa fa-spinner fa-spin"></i>
          </div>
        </div>
        <div ng-show="model.fetched && !id">
          <div ng-hide="model.apps.length" class="align-center">
            <p class="alert alert-info">There are no apps currently available.</p>
          </div>
          <div ng-show="model.apps.length">
            <div ng-show="mode == 'list'">
              <table class="table table-bordered table-striped" hawtio-simple-table="tableConfig"></table>
            </div>
            <div ng-show="mode == 'detail'">
              <div class="app-detail" ng-repeat="item in model.apps | filter:tableConfig.filterOptions.filterText | orderBy:'$name' track by $index">
                <ng-include src="'plugins/kubernetes/html/appDetailTemplate.html'"/>
              </div>
            </div>
          </div>
        </div>
        <div ng-show="model.fetched && id">
          <div class="app-detail">
            <ng-include src="'plugins/kubernetes/html/appDetailTemplate.html'"/>
          </div>
        </div>
      </div>
    </div>

  </div>
  <div ng-show="appSelectorShow">
    <div class="col-md-7">
      <div class="row">
        <hawtio-filter ng-model="appSelector.filterText"
                       css-class="input-xxlarge"
                       placeholder="Filter apps..."></hawtio-filter>
      </div>
      <div class="row">
        <ul>
          <li class="no-list profile-selector-folder" ng-repeat="folder in model.appFolders"
              ng-show="appSelector.showFolder(folder)">
            <div class="expandable" ng-class="appSelector.isOpen(folder)">
              <div title="{{folder.path}}" class="title">
                <i class="expandable-indicator folder"></i> <span class="folder-title" ng-show="folder.path">{{folder.path.capitalize(true)}}</span><span
                      class="folder-title" ng-hide="folder.path">Uncategorized</span>
              </div>
              <div class="expandable-body">
                <ul>
                  <li class="no-list profile" ng-repeat="profile in folder.apps" ng-show="appSelector.showApp(profile)">
                    <div class="profile-selector-item">
                      <div class="inline-block profile-selector-checkbox">
                        <input type="checkbox" ng-model="profile.selected"
                               ng-change="appSelector.updateSelected()">
                      </div>
                      <div class="inline-block profile-selector-name" ng-class="appSelector.getSelectedClass(profile)">
                        <span class="contained c-max">
                          <a href="" ng-click="appSelector.select(profile, !profile.selected)"
                             title="Details for {{profile.id}}">
                            <img ng-show="profile.$iconUrl" class="icon-small-app" ng-src="{{profile.$iconUrl}}">
                            <span class="app-name">{{profile.name}}</span>
                          </a>
                        </span>
                      </div>
                    </div>

                  </li>
                </ul>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <div class="col-md-5">
      <div class="row">
        <button class="btn btn-primary pull-right"
                ng-click="appSelectorShow = undefined"><i class="fa fa-circle-arrow-left"></i> Back
        </button>
        <span class="pull-right">&nbsp;</span>
        <button class="btn pull-right"
                ng-disabled="!appSelector.selectedApps.length"
                title="Clears the selected Apps"
                ng-click="appSelector.clearSelected()"><i class="fa fa-check-empty"></i> Clear
        </button>
        <span class="pull-right">&nbsp;</span>
        <button class="btn btn-success pull-right"
                ng-disabled="!appSelector.selectedApps.length"
                ng-click="appSelector.runSelectedApps()"
                title="Run the selected apps">
          <i class="fa fa-play-circle"></i>
          <ng-pluralize count="appSelector.selectedApps.length"
                        when="{'0': 'No App Selected',
                                       '1': 'Run App',
                                       'other': 'Run {} Apps'}"></ng-pluralize>

        </button>
      </div>
      <div class="row">
        <!--
                <div ng-hide="appSelector.selectedApps.length">
                  <p class="alert pull-right">
                    Please select an App
                  </p>
                </div>
        -->

        <div ng-show="appSelector.selectedApps.length">

          <ul class="zebra-list pull-right">
            <li ng-repeat="app in appSelector.selectedApps">
              <img ng-show="app.$iconUrl" class="icon-selected-app" ng-src="{{app.$iconUrl}}">
              <strong class="green selected-app-name">{{app.name}}</strong>
              &nbsp;
              <i class="red clickable fa fa-remove"
                 title="Remove appp"
                 ng-click="appSelector.select(app, false)"></i>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
  <ng-include src="'resizeDialog.html'"/>
</div>