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

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

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

  <div class="row filter-header">
    <div class="col-md-12" ng-show="model.services.length">
      <span ng-show="!id">
        <hawtio-filter ng-model="tableConfig.filterOptions.filterText"
                       css-class="input-xxlarge"
                       placeholder="Filter services..."
                       save-as="kubernetes-services-text-filter"></hawtio-filter>
      </span>
      <span ng-hide="id" class="pull-right">
        <div class="btn-group">
          <a class="btn" ng-disabled="mode == 'list'" href="" ng-click="mode = 'list'">
            <i class="fa fa-list"></i></a>
          <a class="btn" ng-disabled="mode == 'icon'" href="" ng-click="mode = 'icon'">
            <i class="fa fa-table"></i></a>
        </div>
      </span>
      <span class="pull-right">&nbsp;</span>
      <button ng-show="model.fetched"
              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="id"
              class="btn btn-primary pull-right"
              ng-click="id = undefined"><i class="fa fa-list"></i></button>
      <span ng-show="id" class="pull-right">&nbsp;</span>
      <a class="btn btn-default pull-right"
         title="Create a new service"
              href="{{baseUri}}/kubernetes/namespace/{{namespace}}/serviceCreate"><i class="fa fa-plus"></i> Create</a>
      <span class="pull-right">&nbsp;</span>
      <span ng-include="'runButton.html'"></span>
    </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">
        <div ng-hide="model.services.length" class="align-center">
          <p class="alert alert-info">There are no services currently available.</p>
        </div>
        <div ng-show="model.services.length">
          <div ng-show="mode == 'list'">
            <table class="table table-bordered table-striped" ui-if="kubernetes.selectedNamespace"
                   hawtio-simple-table="tableConfig"></table>
          </div>

          <div ng-hide="mode == 'list'">
            <div class="column-box"
                 ng-repeat="service in model.serviceApps | filter:filterTemplates | orderBy:'metadata.name' track by $index">
              <div class="row">
                <div class="col-md-2">
                  <a href="{{service.$serviceUrl}}"
                     target="_blank"
                     title="Click to open this app">
                    <img style="width: 64px; height: 64px;" ng-src="{{service.$iconUrl}}">
                  </a>
                </div>
                <div class="col-md-9">
                  <a href="{{service.$serviceUrl}}"
                     target="_blank"
                     title="Click to open this app">
                    <h3 ng-bind="service.metadata.name"></h3>
                  </a>
                </div>
<!--
                <div class="col-md-1">
                  <a href="" ng-click="deleteService(service)"><i class="fa fa-remove red"></i></a>
                </div>
-->
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>