<project-header class="top-header"></project-header>
  <project-page>

  <!-- Middle section -->
  <div class="middle-section">
    <div id="scrollable-content" class="middle-container has-scroll">
      <div class="middle-header header-light">
        <div class="container-fluid">
          <div class="page-header page-header-bleed-right page-header-bleed-left">
            <h1>Deployments</h1>
          </div>
          <alerts alerts="alerts"></alerts>
          <div ng-if="!renderOptions.showGetStarted" class="data-toolbar">
            <div class="data-toolbar-filter">
              <project-filter></project-filter>
            </div>
          </div>
        </div>
      </div><!-- /middle-header-->
      <div class="middle-content">
        <div class="container-fluid">
          <div class="row">
            <div class="col-md-12 gutter-top">
              <table class="table table-bordered table-hover table-mobile">
                <thead>
                  <tr>
                    <th>Name</th>
                    <th>Last Deployment</th>
                    <th>Status</th>
                    <th>Created</th>
                    <th>Trigger</th>
                  </tr>
                </thead>
                <!-- message doesnt show right when there are both dcs and rcs and they are all filtered -->
                <tbody ng-if="showEmptyMessage()">
                  <!-- If there are no deployment configs, and if the only 'deployments' are just replication controllers -->
                  <tr><td colspan="5"><em>{{emptyMessage}}</em></td></tr>
                </tbody>
                <tbody ng-repeat="(deploymentConfigName, deploymentConfigDeployments) in deploymentsByDeploymentConfig" ng-if="deploymentConfigs[deploymentConfigName] || !unfilteredDeploymentConfigs[deploymentConfigName]">
                  <!-- Deployment config with no deployments-->
                  <tr ng-if="(deploymentConfigDeployments | hashSize) == 0 && deploymentConfigName">
                    <td data-title="Name">
                      <a ng-if="deploymentConfigs[deploymentConfigName]" href="{{deploymentConfigName | navigateResourceURL : 'DeploymentConfig' : projectName}}">{{deploymentConfigName}}</a>
                      <span ng-if="deploymentConfigs[deploymentConfigName].status.details.message" class="pficon pficon-warning-triangle-o" style="cursor: help;" data-toggle="popover" data-trigger="hover" dynamic-content="{{deploymentConfigs[deploymentConfigName].status.details.message}}"></span>
                    </td>
                    <td data-title="Last"><em>No deployments</em></td>
                    <td class="hidden-xs">&nbsp;</td>
                    <td class="hidden-xs">&nbsp;</td>
                    <td class="hidden-xs">&nbsp;</td>
                  </tr>
                  <!-- Deployment config with deployments, or deployments from a deployment config which has since been deleted -->
                  <tr ng-repeat="deployment in deploymentConfigDeployments | orderObjectsByDate : true | limitTo : 1" ng-if="deploymentConfigName">
                    <td data-title="Name">
                      <a href="{{deploymentConfigName | navigateResourceURL : 'DeploymentConfig' : deployment.metadata.namespace}}">{{deploymentConfigName}}</a>
                      <span ng-if="deploymentConfigs[deploymentConfigName].status.details.message" class="pficon pficon-warning-triangle-o" style="cursor: help;" data-toggle="popover" data-trigger="hover" dynamic-content="{{deploymentConfigs[deploymentConfigName].status.details.message}}"></span>
                      <span ng-if="deploymentConfigs && !deploymentConfigs[deploymentConfigName]" class="pficon pficon-warning-triangle-o" data-toggle="tooltip" title="This deployment config no longer exists" style="cursor: help;"></span>
                    </td>
                    <td data-title="Last">
                      <!-- Deployment number and link -->
                      <span ng-if="deployment | annotation : 'deploymentVersion'">
                        <a ng-href="{{deployment | navigateResourceURL}}">#{{deployment | annotation : 'deploymentVersion'}}</a>
                      </span>
                      <span ng-if="!(deployment | annotation : 'deploymentVersion')">
                        <a ng-href="{{deployment | navigateResourceURL}}">{{deployment.metadata.name}}</a>
                      </span>
                    </td>
                    <td data-title="Status">
                      <div row class="status">
                        <status-icon status="deployment | deploymentStatus" disable-animation></status-icon>
                        <span flex>
                          {{deployment | deploymentStatus}}<span ng-if="(deployment | deploymentStatus) == 'Deployed' || (deployment | deploymentStatus) == 'Running'">,
                          <span ng-if="deployment.spec.replicas !== deployment.status.replicas">{{deployment.status.replicas}}/</span>{{deployment.spec.replicas}} replica<span ng-if="deployment.spec.replicas != 1">s</span></span>
                        </span>
                      </div>
                      <!-- TODO would be nice to have the deploymentStatusReason in a popup, when there is one -->
                    </td>
                    <td data-title="Created">
                      <relative-timestamp timestamp="deployment.metadata.creationTimestamp"></relative-timestamp>
                      <span>- {{deployment.metadata.creationTimestamp | date : 'short'}}</span>
                    </td>
                    <td data-title="Trigger">
                      <span ng-if="!deployment.causes.length">Unknown</span>
                      <span ng-if="deployment.causes.length">
                        <span ng-repeat="cause in deployment.causes">
                          <span ng-switch="cause.type">
                            <span ng-switch-when="ImageChange">
                              <span ng-if="cause.imageTrigger.from">
                                <abbr title="{{cause.imageTrigger.from | imageObjectRef : null : true}}">Image</abbr> change
                              </span>
                            </span>
                            <span ng-switch-when="ConfigChange">Config change</span>
                            <span ng-switch-default>{{cause.type}}</span>
                          </span>
                        </span>
                      </span>
                    </td>
                  </tr>
                </tbody>
              </table>
              <div ng-if="(unfilteredReplicationControllers | hashSize) > 0">
                <h3>Other replication controllers</h3>
                <table class="table table-bordered table-hover table-mobile">
                  <thead>
                    <tr>
                      <th>Name</th>
                      <th>Replicas</th>
                      <th>Created</th>
                    </tr>
                  </thead>
                  <tbody ng-if="(deploymentsByDeploymentConfig[''] | hashSize) === 0"><tr><td colspan="3"><em>No replication controllers to show</em></td></tr></tbody>
                  <tbody ng-repeat="deployment in deploymentsByDeploymentConfig[''] | orderObjectsByDate : true">
                    <!-- We only show this if there are replication controllers but the active filter is hiding them, otherwise the RC table doesnt show
                         at all -->
                    <tr>
                      <td data-title="Name">
                        <a ng-href="{{deployment | navigateResourceURL}}">{{deployment.metadata.name}}</a>
                      </td>
                      <td data-title="Replicas">
                        <span ng-if="deployment.status.replicas !== deployment.spec.replicas">{{deployment.status.replicas}}/</span>{{deployment.spec.replicas}} replica<span ng-if="deployment.spec.replicas != 1">s</span>
                      </td>
                      <td data-title="Created">
                        <relative-timestamp timestamp="deployment.metadata.creationTimestamp"></relative-timestamp>
                        <span>- {{deployment.metadata.creationTimestamp | date : 'short'}}</span>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div><!-- /col-* -->
          </div>
        </div>
      </div><!-- /middle-content -->
    </div><!-- /middle-container -->
  </div><!-- /middle-section -->
  </project-page>
