<div class="row">
    <div class="col-sm-6">
        <dl ng-if="pvc">
            <dt translate>Name</dt>
            <dd>{{ pvc.metadata.name }}</dd>
            <dt translate>Namespace</dt>
            <dd>{{ pvc.metadata.namespace }}</dd>

            <dt ng-if="pvc.spec.accessModes" translate>Access Modes</dt>
            <dd ng-if="pvc.spec.accessModes">
                <span ng-repeat="mode in pvc.spec.accessModes">{{ mode | accessModeLabel }}<span ng-if="!$last">, </span></span>
            </dd>
            <dt ng-if="pvc.spec.resources.requests" translate>Requests</dt>
            <dd ng-if="pvc.spec.resources.requests">
                <dl>
                    <dt ng-repeat-start="(key, value) in pvc.spec.resources.requests">{{ key | formatCapacityName }}</dt>
                    <dd ng-repeat-end>{{ value | formatCapacityValue:key  }}</dd>
                </dl>
            <dd>
        </dl>

        <dl class="full-width" ng-if="!pvc">
            <dd translate>This volume has not been claimed</dd>
        </dl>
    </div>

    <div class="col-sm-6">
        <dl ng-if="pvc" class="full-width">
            <dt ng-if="target" translate>Status</dt>
            <dd ng-if="target && pvc.status.phase">{{ pvc.status.phase }}</dd>
            <dd ng-if="target && !pvc.status.phase" translate>Unknown</dd>
            <dt ng-if="pvc.status.message" translate>Message</dt>
            <dd ng-if="pvc.status.message">{{ pvc.status.message }}</dd>
        </dl>

        <dl class="full-width" ng-if="pvc">
            <dt translate>Pods</dt>
            <dd ng-repeat="pod in pods">{{ pod.metadata.namespace }} / {{ pod.metadata.name }}</dd>
            <dd ng-if="!pods.length" translate>No Pods are using this claim</dd>
        </dl>
    </div>
</div>
