<div class="content">
  <project-page>
    <breadcrumbs breadcrumbs="breadcrumbs"></breadcrumbs>
    <alerts alerts="alerts"></alerts>
    <div ng-if="!loaded">Loading...</div>
    <div class="tile" ng-if="deploymentConfig">
      <h1>
        {{deploymentConfig.metadata.name}}

        <div class="pull-right dropdown">
          <!-- Primary Actions -->
          <button
              class="btn btn-default hidden-xs"
              ng-click="startLatestDeployment()"
              ng-disabled="!canDeploy()">
            Deploy
          </button>

          <!-- Secondary Actions -->
          <a href="" class="dropdown-toggle resource-actions-dropdown" data-toggle="dropdown"><i class="fa fa-ellipsis-v"></i><span class="sr-only">Actions</span></a>
          <ul class="dropdown-menu actions action-button">
            <li class="visible-xs-inline" ng-class="{ disabled: !canDeploy() }">
              <a href=""
                role="button"
                ng-attr-aria-disabled="{{canDeploy() ? undefined : 'true'}}"
                ng-class="{ 'disabled-link': !canDeploy() }"
                ng-click="startLatestDeployment()"
                ><i class="fa fa-play fa-fw" aria-hidden="true"></i> Deploy</a>
            </li>
            <li>
              <edit-link
                resource="deploymentConfig"
                kind="deploymentconfigs"
                alerts="alerts">
              </edit-link>
            </li>
            <li>
              <delete-link
                resource-type="deploymentconfig"
                resource-name="{{deploymentConfig.metadata.name}}"
                project-name="{{deploymentConfig.metadata.namespace}}"
                alerts="alerts">
              </delete-link>
            </li>
          </ul>
        </div>
        <span ng-if="deploymentConfig.status.details.message" class="pficon pficon-warning-triangle-o" style="cursor: help;" data-toggle="popover" data-placement="right" data-trigger="hover" dynamic-content="{{deploymentConfig.status.details.message}}"></span>
        <small class="meta">created <relative-timestamp timestamp="deploymentConfig.metadata.creationTimestamp"></relative-timestamp></small>
      </h1>
      <labels labels="deploymentConfig.metadata.labels" clickable="true" kind="deployments" title-kind="deployment configs" project-name="{{deploymentConfig.metadata.namespace}}" limit="3"></labels>
      <div class="resource-details">
        <div class="row">
          <div class="col-lg-6">
            <h3>Configuration</h3>
            <dl class="dl-horizontal left">
              <div ng-if="deploymentConfig.spec.strategy.type">
                  <dt>Strategy:</dt>
                  <dd>{{deploymentConfig.spec.strategy.type}}</dd>
              </div>
              <div ng-if="deploymentConfig.spec.strategy.rollingParams">
                <dt>Update Period:</dt>
                <dd>{{deploymentConfig.spec.strategy.rollingParams.updatePeriodSeconds}} sec</dd>
                <dt>Interval:</dt>
                <dd>{{deploymentConfig.spec.strategy.rollingParams.intervalSeconds}} sec</dd>
                <dt>Timeout:</dt>
                <dd>{{deploymentConfig.spec.strategy.rollingParams.timeoutSeconds}} sec</dd>
                <dt>Max Unavailable:</dt>
                <dd>{{deploymentConfig.spec.strategy.rollingParams.maxUnavailable}}</dd>
                <dt>Max Surge:</dt>
                <dd>{{deploymentConfig.spec.strategy.rollingParams.maxSurge}}</dd>
              </div>
              <!-- TODO: Surface the parameters for the recreate and custom strategies -->
            </dl>
            <h3>Template</h3>
            <dl class="dl-horizontal left">
              <dt>Selectors:</dt><dd ng-if="!deploymentConfig.spec.selector">none</dd>
              <dd ng-repeat="(selectorLabel, selectorValue) in deploymentConfig.spec.selector">{{selectorLabel}}={{selectorValue}}<span ng-show="!$last">, </span></dd>
              <dt>Replicas:</dt>
              <dd>
                <replicas spec="deploymentConfig.spec.replicas" scale-fn="scale(replicas)"></replicas>
              </dd>
              <dt>Pod template:</dt>
              <dd>&nbsp;</dd>
              <pod-template
                    pod-template="deploymentConfig.spec.template"
                    images-by-docker-reference="imagesByDockerReference"
                    builds="builds"
                    detailed="true"></pod-template>
            </dl>
          </div>
          <div class="col-lg-6">
            <h3>Triggers</h3>
            <dl class="dl-horizontal left">
              <dt>Manual (CLI):
                <a href="{{'deployment-operations' | helpLink}}" target="_blank">
                  <span class="learn-more-block">Learn more <i class="fa fa-external-link"> </i></span>
                </a>
              </dt>
              <dd>
                <code>oc deploy {{deploymentConfig.metadata.name}} --latest -n {{project.metadata.name}}</code>
                <copy-to-clipboard-button clipboard-text="'oc deploy ' + deploymentConfig.metadata.name + ' --latest -n ' + project.metadata.name"></copy-to-clipboard-button>
              </dd>
              <div ng-repeat="trigger in deploymentConfig.spec.triggers">
                <span ng-switch="trigger.type">
                  <span ng-switch-default>{{trigger.type}}</span>
                  <span ng-switch-when="ImageChange" ng-if="trigger.imageChangeParams.from">
                    <dt>New image for:</dt>
                    <dd>{{trigger.imageChangeParams.from | imageObjectRef : deploymentConfig.metadata.namespace}}</dd>
                  </span>
                  <span ng-switch-when="ConfigChange">
                    <dt>Change of:</dt>
                    <dd>Config</dd>
                  </span>
                </span>
              </div>
            </dl>
          </div>
        </div>
        <annotations annotations="deploymentConfig.metadata.annotations"></annotations>
      </div>
    </div>
    <div ng-if="loaded">
      <table class="table table-bordered table-hover table-mobile">
        <thead>
          <tr>
            <th>Deployment</th>
            <th>Status</th>
            <th>Created</th>
            <th>Trigger</th>
          </tr>
        </thead>
        <tbody ng-if="(deployments | hashSize) == 0">
          <tr><td colspan="4" data-title="Deployment"><em>{{emptyMessage}}</em></td></tr>
        </tbody>
        <tbody ng-repeat="deployment in deployments | orderObjectsByDate : true">
          <tr>
            <td data-title="Deployment">
              <!-- Deployment number and link -->
              <span ng-if="deployment | annotation : 'deploymentVersion'">
                <a ng-href="{{deployment | navigateResourceURL}}">#{{deployment | annotation : 'deploymentVersion'}}</a>
                <span ng-if="deploymentConfig.status.latestVersion == (deployment | annotation : 'deploymentVersion')">(latest)</span>
              </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>
                <!-- TODO would be nice to have the deploymentStatusReason in a popup, when there is one -->
              </div>
            </td>
            <td data-title="Createed">
              <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>
  </project-page>
</div>
