<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">
        <div class="container-fluid">
          <breadcrumbs breadcrumbs="breadcrumbs"></breadcrumbs>
          <alerts alerts="alerts"></alerts>
          <div ng-if="!loaded">Loading...</div>
          <div ng-if="pvc">
            <h1>
              {{pvc.metadata.name}}
              <small class="meta" ng-if="!pvc.spec.volumeName">
                  <span ng-if="pvc.spec.resources.requests['storage']">
                    waiting for {{pvc.spec.resources.requests['storage'] | usageWithUnits: 'storage'}} allocation,
                  </span>
                  <span ng-if="!pvc.spec.resources.requests['storage']">waiting for allocation,</span>
              </small>
              <small class="meta">created <relative-timestamp timestamp="pvc.metadata.creationTimestamp"></relative-timestamp></small>
              <div class="pull-right dropdown">
                <button type="button" class="dropdown-toggle btn btn-default actions-dropdown-btn hidden-xs" data-toggle="dropdown">
                  Actions
                  <span class="caret" aria-hidden="true"></span>
                </button>
                <a href=""
                   class="dropdown-toggle actions-dropdown-kebab visible-xs-inline"
                   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 ng-if="!pvc.spec.volumeName">
                    <edit-link
                      resource="pvc"
                      kind="PersistentVolumeClaim"
                      alerts="alerts">
                    </edit-link>
                  </li>
                  <li>
                    <delete-link
                      kind="PersistentVolumeClaim"
                      resource-name="{{pvc.metadata.name}}"
                      project-name="{{pvc.metadata.namespace}}"
                      alerts="alerts">
                    </delete-link>
                  </li>
                </ul>
              </div>
            </h1>
            <labels labels="pvc.metadata.labels" clickable="true" kind="storage" project-name="{{pvc.metadata.namespace}}" limit="3"></labels>
          </div><!-- /deployment -->
        </div>
      </div><!-- /middle-header-->
      <div class="middle-content">
        <div class="container-fluid">
          <div class="row" ng-if="pvc" >
            <div class="col-md-12 gutter-top">
              <div class="resource-details">
                <dl class="dl-horizontal left">
                  <dt>Status:</dt>
                  <dd>
                    <status-icon status="pvc.status.phase" disable-animation></status-icon>
                    {{pvc.status.phase}}
                    <span ng-if="pvc.spec.volumeName">to volume <strong>{{pvc.spec.volumeName}}</strong></span>
                  </dd>
                  <dt ng-if="pvc.spec.volumeName">Capacity:</dt>
                  <dd ng-if="pvc.spec.volumeName">
                    <span ng-if="pvc.status.capacity['storage']">
                      allocated {{pvc.status.capacity['storage'] | usageWithUnits: 'storage'}}
                    </span>
                    <span ng-if="!pvc.status.capacity['storage']">allocated unknown size</span>
                  </dd>
                  <dt>Requested Capacity:</dt>
                  <dd>
                    <span ng-if="pvc.spec.resources.requests['storage']">
                      {{pvc.spec.resources.requests['storage'] | usageWithUnits: 'storage'}}
                    </span>
                    <span ng-if="!pvc.spec.resources.requests['storage']"><em>none</em></span>
                  </dd>
                  <dt>Access Modes:</dt>
                  <dd>{{pvc.spec.accessModes | accessModes:'long' | join}}</dd>
                </dl>
              </div>
            </div><!-- /col-* -->
          </div>
        </div>
      </div><!-- /middle-content -->
    </div><!-- /middle-container -->
  </div><!-- /middle-section -->
  </project-page>

