<!--
  Expects the following variables. All must be defined in the overviewDeployment directive scope.

  rc   - ReplicationController. Required. May or may not have deployment annotations.
  pods - [Pod]. Required.

  deploymentConfigId               - String. Optional. If present, indicates this replication controller came from a deployment.
  deploymentConfigMissing          - Boolean. Optional.
  deploymentConfigDifferentService - Boolean. Optional.
  deploymentConfig                 - Object. Required for scaling deployments.

  imagesByDockerReference - map[dockerReference][]Image. Optional.
  builds                  - map[buildId]build. Optional.
 -->
<div class="osc-object components-panel deployment-block"
     kind="ReplicationController" resource="rc"
     ng-init="isDeployment = (deploymentConfigId && (rc | annotation:'deploymentConfig') && (rc | annotation:'deploymentVersion'))">

  <!--
  Connector to the containing service block.
  Hidden by CSS when in non-service blocks.
  -->
  <div class="connector">
    <i class="fa fa-search"></i>
  </div>

  <!-- Header for deployments. Surface deployment config and trigger info. -->
  <div class="component-block component-meta" ng-if="isDeployment">
    <div class="component">
      <div class="component-label">
        <span>Deployment: </span>
        <span class="nowrap">
          <a class="subtle-link"
             ng-href="{{deploymentConfigId | navigateResourceURL : 'DeploymentConfig' : rc.metadata.namespace}}">{{deploymentConfigId}}</a>,
          <a class="subtle-link" ng-href="{{rc | navigateResourceURL}}">#{{rc | annotation:'deploymentVersion'}}</a>
        </span>
        <span ng-if="deploymentConfigMissing" data-toggle="tooltip"
            title="The deployment config this deployment was created from no longer exists." class="pficon pficon-warning-triangle-o" style="cursor: help;"></span>
        <span ng-if="deploymentConfigDifferentService" data-toggle="tooltip"
            title="The deployment config this deployment was created from has changed. New deployments will not be included in this list." class="pficon pficon-warning-triangle-o" style="cursor: help;"></span>

        <!-- Show status if not deployed or complete -->
        <span ng-if="rc | deploymentIsInProgress">&mdash; <i class="fa fa-refresh" aria-hidden="true"></i> In progress</span>
        <span ng-switch="rc | deploymentStatus" class="hide-ng-leave">
          <span ng-switch-when="Cancelled">&mdash; <span class="text-warning"><i class="fa fa-ban" aria-hidden="true"></i> Cancelled</span></span>
          <span ng-switch-when="Failed">&mdash; <span class="text-danger"><i class="fa fa-times" aria-hidden="true"></i> Failed</span></span>
        </span>
      </div>
    </div>

    <div class="component meta-data">
      <relative-timestamp timestamp="rc.metadata.creationTimestamp"></relative-timestamp
      ><span ng-if="rc.causes.length"
        ><span>
          <span class="deployment-trigger" ng-repeat="cause in rc.causes">
            <span ng-switch="cause.type">
              <span ng-switch-when="ImageChange">
                <span ng-if="cause.imageTrigger.from">
                  from <abbr title="{{cause.imageTrigger.from | imageObjectRef : null : true}}">image</abbr> change
                </span>
              </span>
              <span ng-switch-when="ConfigChange">from config change</span>
              <span ng-switch-default>{{cause.type}}</span>
            </span>
          </span>
        </span>
      </span>
    </div>
  </div>

  <!-- Header for replication controllers. Name and timestamp only. -->
  <div class="component-block component-meta" ng-if="!isDeployment">
    <div class="component">
      <div class="component-label">
        Replication Controller:
        <a class="subtle-link nowrap" ng-href="{{rc | navigateResourceURL}}">{{rc.metadata.name}}</a>
      </div>
    </div>
    <div class="component meta-data">
      created <relative-timestamp timestamp="rc.metadata.creationTimestamp"></relative-timestamp>
    </div>
  </div>

  <div row mobile="column" axis="center center" class="pod-block">
    <!-- Pods donut chart and scaling controls -->
    <div column class="overview-pods" axis="center center">
      <div row>
        <!-- spacer -->
        <div flex class="visible-xs-block"></div>

        <div column>
          <pod-status-chart
              pods="pods"
              desired="getDesiredReplicas()"
              ng-click="viewPodsForDeployment(rc)"
              ng-class="{ clickable: (pods | hashSize) > 0 }">
          </pod-status-chart>

          <!-- Add a link for screen readers. -->
          <a href=""
             class="sr-only"
             ng-click="viewPodsForDeployment(rc)"
             ng-if="(pods | hashSize) > 0"
             role="button">
             View pods for {{rc | displayName}}
          </a>
        </div>

        <div column class="scaling-controls">
          <!-- spacer -->
          <div flex></div>
          <div column>
            <div>
              <a href=""
                 ng-click="scaleUp()"
                 ng-class="{ disabled: !scalable }"
                 ng-attr-title="{{!scalable ? undefined : 'Scale up'}}"
                 ng-attr-aria-disabled="{{!scalable ? 'true' : undefined}}">
                <i class="fa fa-chevron-up"></i>
                <span class="sr-only">Scale up</span>
              </a>
            </div>
            <div>
              <!-- Remove the title when disabled because the not-allowed styled cursor overlaps the tooltip on some browsers. -->
              <a href=""
                 ng-click="scaleDown()"
                 ng-class="{ disabled: !scalable || getDesiredReplicas() === 0 }"
                 ng-attr-title="{{(!scalable || getDesiredReplicas() === 0) ? undefined : 'Scale down'}}"
                 ng-attr-aria-disabled="{{(!scalable || getDesiredReplicas() === 0) ? 'true' : undefined}}"
                 role="button">
                <i class="fa fa-chevron-down"></i>
                <span class="sr-only">Scale down</span>
              </a>
            </div>
          </div>
          <!-- spacer -->
          <div flex></div>
        </div>

        <!-- spacer -->
        <div flex class="visible-xs-block"></div>
      </div>
    </div>

    <!-- Pod template -->
    <div column grow="2" class="pod-template-column">
      <!-- spacer -->
      <div flex></div>
      <pod-template
        pod-template="rc.spec.template"
        images-by-docker-reference="imagesByDockerReference"
        builds="builds">
      </pod-template>
      <!-- spacer -->
      <div flex></div>
    </div>
  </div>
</div>
