<div class="content">
  <project-page>
    <div>
      <div class="page-header page-header-bleed-right">
        <delete-link
          class="pull-right fa-lg"
          resource-type="project"
          resource-name="{{project.metadata.name}}"
          project-name="{{project.metadata.name}}"
          display-name="{{(project | displayName)}}"
          alerts="alerts"
          button-only>
        </delete-link>
        <h1>Project Settings</h1>
      </div>

      <alerts alerts="alerts"></alerts>
      <h2>General information</h2>
      <!-- TODO make these fields editable - probably with a cog icon that flips into inline-editing -->
      <dl class="dl-horizontal left">
        <dt>Name:</dt>
        <dd>{{projectName}}</dd>
        <dt>Display name:</dt>
        <dd ng-if="project | displayName: true">{{project | displayName: true}}</dd>
        <dd ng-if="!(project | displayName: true)"><em>No display name</em></dd>
        <dt>Description:</dt>
        <dd ng-if="project | description">
          <truncate-long-text content="project | description" limit="1024" use-word-boundary="true"></truncate-long-text>
        </dd>
        <dd ng-if="!(project | description)"><em>No description</em></dd>
      </dl>
      <h2>
        <span>Quota</span>
        <i style="margin-left: 5px; cursor: help;" class="small pficon pficon-help" data-toggle="tooltip" data-placement="right"
          title="Quota is enforced at the project level.  Once the maximum for the project has been reached no more of that resource can be allocated within the project."></i>
      </h2>
      <div ng-if="(quotas | hashSize) == 0"><em>{{emptyMessageQuotas}}</em></div>
      <table ng-if="(quotas | hashSize) > 0" class="table">
        <thead>
          <th>Resource type</th>
          <th>Used</th>
          <th>Max</th>
        </thead>
        <tbody ng-repeat="quota in quotas">
          <tr ng-if='!quota.status.used' class="danger">
            <td colspan="5">
              <span data-toggle="tooltip" data-placement="right" title="Missing quota status" class="pficon pficon-error-circle-o" style="cursor: help;"></span>
              Status has not been reported on this quota usage record.  Any resources limited by this quota record can not be allocated.
            </td>
          </tr>
          <tr ng-class="{warning: (quota.status.used[resourceType] | usageValue) >= (quota.status.hard[resourceType] | usageValue)}" ng-repeat="(resourceType, specMax) in quota.spec.hard">
            <!-- TODO prettify resourceType? -->
            <td>
              <span ng-if="(quota.status.used[resourceType] | usageValue) >= (quota.status.hard[resourceType] | usageValue)" data-toggle="tooltip" data-placement="right" title="Quota limit reached" class="pficon pficon-warning-triangle-o" style="cursor: help;"></span>
              {{resourceType}}
            </td>
            <td>
              <span ng-if="!quota.status.used">&mdash;</span>
              <span ng-if="quota.status.used">{{quota.status.used[resourceType] | usageWithUnits : resourceType}}</span>
            </td>
            <td>
              <span ng-if="!quota.status.hard">{{specMax  | usageWithUnits : resourceType}}</span>
              <span ng-if="quota.status.hard">{{quota.status.hard[resourceType]  | usageWithUnits : resourceType}}</span>
            </td>
          </tr>
        </tbody>
      </table>
      <h2>
        <span>Resource limits</span>
        <i style="margin-left: 5px; cursor: help;" class="small pficon pficon-help" data-toggle="tooltip" data-placement="right"
          title="Resource limits define minimum and maximum constraints for compute resources."></i>
      </h2>
      <div ng-if="(limitRanges | hashSize) == 0"><em>{{emptyMessageLimitRanges}}</em></div>
      <table ng-if="(limitRanges | hashSize) > 0" class="table">
        <thead>
          <th>Resource type</th>
          <th>
            Min
            <i class="small pficon pficon-help" data-toggle="tooltip" data-placement="right"
          title="The minimum amount of this compute resource that can be requested."></i>
          </th>
          <th>
            Max
            <i class="small pficon pficon-help" data-toggle="tooltip" data-placement="right"
          title="The maximum amount of this compute resource that can be requested.  The limit must also be below the maximum value."></i>
          </th>
          <th>
            Default Request
            <i class="small pficon pficon-help" data-toggle="tooltip" data-placement="right"
          title="A container will default to request this amount of a compute resource if no request is specified. The system will guarantee the requested amount of compute resource when scheduling a container for execution. If a quota is enabled for this compute resource, the quota usage is incremented by the requested value."></i>
          </th>
          <th>
            Default Limit
            <i class="small pficon pficon-help" data-toggle="tooltip" data-placement="right"
          title="The default limit defines the maximum amount of compute resource the container may have access to during execution if no limit is specified. If no request is made for the compute resource on the container or via a Default Request value, the container will default to request the limit."></i>
          </th>
          <th>
            Max Limit/Request Ratio
            <i class="small pficon pficon-help" data-toggle="tooltip" data-placement="right"
          title="If specified, the compute resource must have a request and limit that are both non-zero, where limit divided by request is less than or equal to the specified amount; this represents the max burst for the compute resource during execution."></i>
          </th>
        </thead>
        <tbody ng-repeat="(limitRangeName, limitRange) in limitRanges">
          <tr ng-repeat-start="limit in limitRange.spec.limits"></tr>
          <tr ng-repeat="(type, typeLimits) in limitsByType[limitRangeName][limit.type]">
            <!-- TODO prettify type -->
            <td>{{limit.type}} {{type}}</td>
            <td>{{(typeLimits.min | usageWithUnits : type) || "&mdash;"}}</td>
            <td>{{(typeLimits.max | usageWithUnits : type) || "&mdash;"}}</td>
            <td>{{(typeLimits.defaultRequest | usageWithUnits : type) || "&mdash;"}}</td>
            <td>{{(typeLimits["default"] | usageWithUnits : type) || "&mdash;"}}</td>
            <td>{{typeLimits.maxLimitRequestRatio || "&mdash;"}}</td>
          </tr>
          <tr ng-repeat-end></tr>
        </tbody>
      </table>
    </div>
  </project-page>
</div>
