<div class="ng-cloak" ng-controller="Fabric.ContainerController">

  <div ng-show="inDashboard">
    <div class="controller-section-widget">
      <div class="row-fluid container-dashboard-controls">
        <div class="pull-left">
          <!--
          <a ng-href="#/fabric/container/{{containerId}}">{{row.id}}</a>
          -->
        </div>
        <div class="pull-right">
          <button class="btn" ng-show="row.jolokiaUrl" title="Open" ng-click="doConnect(container)"><i class="icon-signin"></i></button>
          <button class="btn" ng-show="row.alive" ng-click="stop()" title="Stop"><i class="icon-off"></i></button>
          <button class="btn" ng-hide="row.alive" ng-click="start()" title="Start"><i class="icon-play-circle"></i></button>
        </div>
      </div>
      <div class="row-fluid container-dashboard-status-table">
        <div class="container-status-dashboard" ng-click="gotoDetails()">
          <a class="status-icon" ng-href="#/fabric/container/{{containerId}}">
            <i ng-class="statusIcon()"></i>
          </a>
        </div>
        <div class="dashboard-service-list">
          <ul class="inline">
            <li ng-repeat="service in services" ng-switch="service.type">
              <i ng-switch-when="icon" class="{{service.src}}" title="{{service.title}}"></i>
              <img ng-switch-when="img" ng-src="{{service.src}}" title="{{service.title}}">
            </li>
            <li ng-show="row.ensembleServer"><i class="icon-cloud" title="Fabric Ensemble Server"></i></li>
          </ul>
        </div>
      </div>
      <div class="row-fluid">
        <div class="btn-group container-dashboard-profile-controls">
          <button class="btn" ng-click="addProfileDialog.open()" title="Add new profiles to this container"><i class="icon-plus"></i></button>
          <button class="btn" ng-click="deleteProfileDialog.open()" ng-disabled="selectedProfiles.length == 0"
                  title="Removes the selected profiles from this container"><i class="icon-minus"></i></button>
        </div>
        <div fabric-profile-selector="selectedProfiles" version-id="row.versionId" included-profiles="row.profileIds" show-links="true" expanded="true"></div>
      </div>
    </div>
  </div>

  <div class="controller-section" ng-hide="inDashboard">

    <div ng-show="loading">
      Please wait, loading container details...
    </div>

    <div ng-hide="loading">

      <div class="fabric-page-header row-fluid">
        <!-- TODO - rework this header in the css -->
        <h2 style="display: inline-block; margin: 0"><i ng-class="statusIcon()"></i> Container: <span class="contained c-wide" title="{{row.id}}">{{row.id}}</span></h2>
        <div class="pull-right">
          <button class="btn"
                  ng-show="canConnect(row)"
                  ng-click="doConnect(row)">
            <i class="icon-signin"></i> Open
          </button>
          <span class="btn"
                ng-show="availableVersions && availableVersions.length > 0">
            <span fabric-version-selector="targetVersion"
                  available-versions="availableVersions"
                  menu-bind="versionTitle"
                  use-menu="true"
                  on-pick="onVersionChange(version)"
                  use-icon="icon-edit"
                  desc
                  exclude='{{row.versionId}}'></span>

          </span>

          <button class="btn" ng-show="row.alive" ng-click="stop()"><i class="icon-off"></i> Stop</button>
          <button class="btn" ng-hide="row.alive" ng-click="start()"><i class="icon-play-circle"></i> Start</button>
          <button class="btn" ng-click="confirmDeleteDialog.open()"><i class="icon-remove"></i> Delete</button>
          <a class="btn" ng-href="{{addToDashboardLink()}}" title="Add this view to a dashboard" data-placement="bottom">
            <i class="icon-share"></i></a>
        </div>
      </div>


      <div class="row-fluid container-details">
        <div class="span4 offset1 container-profile-settings">
          <p></p>
          <h4>Associated Profiles</h4>
          <p>This is the current set of profiles that are assigned to this container.  Use the add and remove buttons to manage this list.</p>

          <div class="container-detail-profiles">
            <div class="pull-right container-detail-profile-buttons">
              <button class="btn" ng-click="addProfileDialog.open()" title="Add new profiles to this container"><i class="icon-plus"></i> Add</button>
              <button class="btn" ng-click="deleteProfileDialog.open()" ng-disabled="selectedProfiles.length == 0"
                title="Removes the selected profiles from this container"><i class="icon-remove"></i> Remove</button>
            </div>
          </div>
          <div fabric-profile-selector="selectedProfiles" version-id="row.versionId" included-profiles="row.profileIds" show-links="true" expanded="true"></div>
        </div>

        <!-- the dl need to be wider so we can see the labels -->
        <style>
          .dl-horizontal dt {
            width: 180px;
          }
          .dl-horizontal dd {
            margin-left: 200px;
          }
        </style>

        <div class="span5 offset1 container-settings">
          <div class="tabbable hawtio-form-tabs" ng-model="tab">

            <div class="tab-pane" title="Status">
              <dl class="dl-horizontal">
                <dt>Version:</dt>
                <dd>{{row.versionId}}</dd>
              </dl>
              <dl class="dl-horizontal">
                <dt>Server Status:</dt>
                <dd>
                  <div ng-switch="row.alive">
                    <p style="display: inline;" ng-switch-when="true" class="green bold">Running</p>
                    <p style="display: inline;" ng-switch-default class="red bold">Not Running</p>
                  </div>
                </dd>
              </dl>
              <dl class="dl-horizontal">
                <dt>Server Type:</dt>
                <dd>{{row.type}}</dd>
              </dl>
              <dl class="dl-horizontal">
                <dt>Type:</dt>
                <dd>{{getType()}}</dd>
              </dl>
              <dl class="dl-horizontal">
                <dt>Provision Status:</dt>
                <dd><i ng-class="statusIcon()"></i> {{row.provisionStatus}}</dd>
              </dl>
              <dl class="dl-horizontal">
                <dt>Root Container:</dt>
                <dd ng-show="row.root">yes</dd>
                <dd ng-hide="row.root">no</dd>
              </dl>
              <dl class="dl-horizontal" ng-show="row.parentId">
                <dt>Parent:</dt>
                <dd>
                  <a href="#/fabric/container/{{row.parentId}}{{hash}}">{{row.parentId}}</a>
                </dd>
              </dl>
              <dl class="dl-horizontal" ng-show="row.childrenIds.length > 0">
                <dt>Children:</dt>
                <dd>
                  <ul class="unstyled">
                    <li ng-repeat="child in row.childrenIds">
                      <a href="#/fabric/container/{{child}}{{hash}}">{{child}}</a>
                    </li>
                  </ul>
                </dd>
              </dl>
              <dl class="dl-horizontal" ng-show="services.length > 0">
                <dt>Services:</dt>
                <dd>
                  <ul class="service-list">
                    <li ng-repeat="service in services" ng-switch="service.type">
                      <i ng-switch-when="icon" class="{{service.src}}" title="{{service.title}}"></i>
                      <img ng-switch-when="img" ng-src="{{service.src}}" title="{{service.title}}">
                    </li>
                  </ul>
                </dd>
              </dl>
              <dl class="dl-horizontal" ng-show="row.jmxDomains.length > 0">
                <dt>JMX Domains:</dt>
                <dd>
                  <ul class="unstyled">
                    <li ng-repeat="domain in row.jmxDomains">{{domain}}</li>
                  </ul>
                </dd>
              </dl>
            </div>

            <div class="tab-pane" title="Settings">
              <p>This tab has various settings for the container.  Below are the detected hostnames, as well as any manually configure IP/hostname.  Select the desired hostname that this container should advertise using the radio buttons.  Changes are effective immediately.</p>
              <dl class="dl-horizontal">
                <dt>Location:</dt>
                <dd>
                  <editable-property ng-model="row" property="location" on-save="updateContainerProperty('location', row)"></editable-property>
                </dd>
              </dl>
              <dl class="dl-horizontal" title="Advertise services using the local IP address">
                <dt>Local IP:</dt>
                <dd>
                  <editable-property ng-model="row" property="localIp" on-save="updateContainerProperty('localIp', row)"></editable-property>
                  <input class="pull-right" type="radio" name="resolver" ng-model="row.resolver" value="localip">
                </dd>
              </dl>
              <dl class="dl-horizontal" title="Advertise services using the local hostname">
                <dt>Local Hostname:</dt>
                <dd>
                  <editable-property ng-model="row" property="localHostname" on-save="updateContainerProperty('localHostname', row)"></editable-property>
                  <input class="pull-right" type="radio" name="resolver" ng-model="row.resolver" value="localhostname">
                </dd>
              </dl>
              <dl class="dl-horizontal" title="Advertise services using the public IP address">
                <dt>Public IP:</dt>
                <dd>
                  <editable-property ng-model="row" property="publicIp" on-save="updateContainerProperty('publicIp', row)"></editable-property>
                  <input class="pull-right" type="radio" name="resolver" ng-model="row.resolver" value="publicip">
                </dd>
              </dl>
              <dl class="dl-horizontal" title="Advertise services using the public hostname">
                <dt>Public Hostname:</dt>
                <dd>
                  <editable-property ng-model="row" property="publicHostname" on-save="updateContainerProperty('publicHostname', row)"></editable-property>
                  <input class="pull-right" type="radio" name="resolver" ng-model="row.resolver" value="publichostname">
                </dd>
              </dl>
              <dl class="dl-horizontal" title="Advertise services using a custom IP address or hostname">
                <dt>Manual IP:</dt>
                <dd>
                  <editable-property ng-model="row" property="manualIp" on-save="updateContainerProperty('manualIp', row)"></editable-property>
                  <input class="pull-right" type="radio" name="resolver" ng-model="row.resolver" value="manualip">
                </dd>
              </dl>
              <dl class="dl-horizontal">
                <dt>Minimum Port:</dt>
                <dd>
                  <editable-property ng-model="row" property="minimumPort" on-save="updateContainerProperty('minimumPort', row)"></editable-property>
                </dd>
              </dl>
              <dl class="dl-horizontal">
                <dt>Maximum Port:</dt>
                <dd>
                  <editable-property ng-model="row" property="maximumPort" on-save="updateContainerProperty('maximumPort', row)"></editable-property>
                </dd>
              </dl>
            </div>

            <div class="tab-pane" title="URLs">
              <p>This is a list of URLs for various services running in the container or accessible to the container. Use the <i class="icon-copy"></i> button to copy the shown command to the clipboard.
              <dl class="dl-horizontal" ng-show="row.debugPort" title="The port used to remotely debug this container in your IDE">
                <dt>Debug Port:</dt>
                <dd>
                  <input class="no-bottom-margin"
                         type="text" readonly
                         value="{{row.debugPort}}"
                         style="width: 300px">
                  <button class="btn"
                          zero-clipboard
                          data-clipboard-text="{{row.debugPort}}"
                          title="Click to copy this port to the clipboard">
                    <i class="icon-copy"></i>
                  </button>
                </dd>
              </dl>
              <dl class="dl-horizontal" ng-show="row.debugPort && row.debugHost" title="The host used to remotely debug this container in your IDE">
                <dt>Debug Host:</dt>
                <dd>
                  <input class="no-bottom-margin"
                         type="text" readonly
                         value="{{row.debugHost}}"
                         style="width: 300px">
                  <button class="btn"
                          zero-clipboard
                          data-clipboard-text="{{row.debugHost}}"
                          title="Click to copy this host to the clipboard">
                    <i class="icon-copy"></i>
                  </button>
                </dd>
              </dl>
              <dl class="dl-horizontal">
                <dt>Git:</dt>
                <dd>
                  <input class="no-bottom-margin"
                         type="text" readonly
                         value="{{getGitURL(row.jolokiaUrl) | maskPassword}}"
                         style="width: 300px">
                  <button class="btn"
                          zero-clipboard
                          data-clipboard-text="{{getGitURL(row.jolokiaUrl)}}"
                          title="Click to copy this command to the clipboard">
                    <i class="icon-copy"></i>
                  </button>
                </dd>
              </dl>
              <dl class="dl-horizontal" ng-show="getSshURL(row.sshUrl)">
                <dt>SSH:</dt>
                <dd>
                  <input class="no-bottom-margin"
                         type="text" readonly
                         value="{{getSshURL(row.sshUrl) | maskPassword}}"
                         style="width: 300px">
                  <button class="btn"
                          zero-clipboard
                          data-clipboard-text="{{getSshURL(row.sshUrl)}}"
                          title="Click to copy this command to the clipboard">
                    <i class="icon-copy"></i>
                  </button>
                </dd>
              </dl>
              <dl class="dl-horizontal" ng-show="getJmxURL(row.jmxUrl)">
                <dt>JMX:</dt>
                <dd>
                  <input class="no-bottom-margin"
                         type="text" readonly
                         value="{{getJmxURL(row.jmxUrl) | maskPassword}}"
                         style="width: 300px">
                  <button class="btn"
                          zero-clipboard
                          data-clipboard-text="{{getJmxURL(row.jmxUrl)}}"
                          title="Click to copy this URL to the clipboard">
                    <i class="icon-copy"></i>
                  </button>
                </dd>
              </dl>
              <dl class="dl-horizontal">
                <dt>Jolokia:</dt>
                <dd>
                  <input class="no-bottom-margin"
                         type="text" readonly
                         value="{{row.jolokiaUrl | maskPassword}}"
                         style="width: 300px">
                  <button class="btn"
                          zero-clipboard
                          data-clipboard-text="{{row.jolokiaUrl}}"
                          title="Click to copy this URL to the clipboard">
                    <i class="icon-copy"></i>
                  </button>
                </dd>
              </dl>
              <dl class="dl-horizontal" ng-show="mavenRepoUploadUri">
                <dt>Maven Proxy Upload:</dt>
                <dd>
                  <input class="no-bottom-margin"
                         type="text" readonly
                         value="{{mavenRepoUploadUri | maskPassword}}"
                         style="width: 300px">
                  <button class="btn"
                          zero-clipboard
                          data-clipboard-text="{{mavenRepoUploadUri}}"
                          title="Click to copy this URL to the clipboard">
                    <i class="icon-copy"></i>
                  </button>
                </dd>
              </dl>
              <dl class="dl-horizontal"  ng-show="mavenRepoDownloadUri">
                <dt>Maven Proxy Download:</dt>
                <dd>
                  <input class="no-bottom-margin"
                         type="text" readonly
                         value="{{mavenRepoDownloadUri | maskPassword}}"
                         style="width: 300px">
                  <button class="btn"
                          zero-clipboard
                          data-clipboard-text="{{mavenRepoDownloadUri}}"
                          title="Click to copy this URL to the clipboard">
                    <i class="icon-copy"></i>
                  </button>
                </dd>
              </dl>
            </div>

            <div class="tab-pane" title="Provision list">
              <p>This is a list of bundles that the fabric8 agent has currently deployed to the container.</p>
              <dl>
                <dt class="provision-list-title">
                  <input id="provision-list-filter" type="text" class="search-query" placeholder="Filter..." ng-model="provisionListFilter">
                </dt>
                <dd class="provision-list">
                  <ul>
                    <li ng-repeat="item in row.provisionList" ng-class="getClass(item)">{{item}}</li>
                  </ul>
                </dd>
              </dl>
            </div>

          </div>
        </div>
      </div>

      <div ng-show="row.provisionExceptionArray" class="row-fluid">
        <div class="span8">
          <dl>
            <dt>Provision Exception:</dt>
            <dd>
              <div ng-bind-html-unsafe="formatStackTrace(row.provisionExceptionArray)"></div>
            </dd>
          </dl>
        </div>
      </div>

    </div>
  </div>

  <div ng-include="'app/fabric/html/connectToContainerDialog.html'"></div>

  <div hawtio-confirm-dialog="deleteContainerDialog.show" ok-button-text="Yes" cancel-button-text="No" on-ok="delete()">
    <div class="dialog-body">
      <p>Delete this container?</p>
      <p>On clicking yes this container will be stopped and it's installation directory will be cleaned up.</p>
    </div>
  </div>

  <div hawtio-confirm-dialog="deleteProfileDialog.show"
       ok-button-text="Delete"
       on-ok="deleteProfiles()">
    <div class="dialog-body">
      <p>You are about to remove
        <ng-pluralize count="selectedProfiles.length"
                      when="{'1': 'this profile', 'other': 'these {} profiles'}">
        </ng-pluralize>
        from container {{row.id}}:
      </p>
      <ul ng-bind-html-unsafe="selectedProfilesString"></ul>
    </div>
  </div>

  <div modal="addProfileDialog.show">
    <form name="addProfile" class="form-horizontal no-bottom-margin" ng-submit="addProfiles()">
      <div class="modal-header"><h4>Add profiles to container: {{row.id}}</h4></div>
      <div id="dialog-body" class="modal-body">
        <label>Select one or more profiles to add to this container: </label>

        <div fabric-profile-selector="selectedProfilesDialog"
             no-links="true"
             version-id="row.versionId"
             excluded-profiles="row.profileIds"></div>

      </div>
      <div class="modal-footer">
        <input class="btn btn-success" ng-disabled="selectedProfilesDialog.length == 0" type="submit"
               value="Add">
        <input class="btn btn-primary" ng-click="addProfileDialog.close()" type="button" value="Cancel">
      </div>
    </form>
  </div>

  <div ng-include="'app/fabric/html/deleteContainers.html'"></div>
  
</div>


