<div class="content-filter">
    <filter-project></filter-project>
</div>

<div>
<table listing-table class="listing-ct pv-listing">
    <thead>
        <tr>
            <td colspan="4">
                <a ng-if="!pvFailure" id="register-volume" class="pull-right" ng-click="createPV()">
                    <i translate class="pficon pficon-add-circle-o"></i>
                    <span translate>Register New Volume</span>
                </a>
                <h3 translate>Persistent Volumes</h3>
            </td>
        </tr>
        <tr>
            <th class="listing-ct-toggle"></th>
            <th translate>Name</th>
            <th translate>Type</th>
            <th translate>Status</th>
        </tr>
    </thead>
    <tbody ng-repeat-start="item in pvs track by item.metadata.uid"
           ng-init="sid = item.metadata.name"
           data-id="{{ sid }}" ng-class="{ open: listing.expanded(sid) }">
        <tr ng-click="listing.activate(sid)" class="listing-ct-item">
            <td ng-click="listing.toggle(sid, $event)"
                class="listing-ct-toggle">
                <i class="fa fa-fw"></i>
            </td>
            <th>{{ item.metadata.name }}</th>
            <td>{{ item.spec | formatVolumeType }}</td>
            <td ng-if="item.status.phase">{{ item.status.phase}}</td>
            <td ng-if="!item.status.phase"  translate>Unknown</td>
        </tr>
        <tr class="listing-ct-panel" ng-if="listing.expanded(sid)" ng-init="id = sid">
            <td listing-panel kind="pv" colspan="4"></td>
        </tr>
    </tbody>
    <tbody data-ng-rubbish="" ng-if="0" ng-repeat-end></tbody>
    <thead ng-if="!pvs.length" class="listing-ct-empty">
        <tr>
            <td colspan="4" ng-if="!pvFailure" translate>No volumes are present.</td>
            <td colspan="4" ng-if="pvFailure">{{pvFailure}}</td>
        </tr>
    </thead>
</table>
<table listing-table ng-if="pending.length" class="listing-ct pvc-listing">
    <thead>
        <tr>
            <td colspan="4">
                <h3 translate>Pending Volume Claims</h3>
            </td>
        </tr>
        <tr>
            <th translate>Name</th>
            <th translate ng-if="settings.flavor == 'openshift'">Project</th>
            <th translate ng-if="settings.flavor != 'openshift'">Namespace</th>
            <th translate>Size</th>
            <th translate>When</th>
            <th></th>
        </tr>
    </thead>
    <tbody ng-repeat-start="item in pending track by item.metadata.uid"
           ng-init="sid = item.metadata.namespace + '/' + item.metadata.name"
           data-id="{{ sid }}">
        <tr ng-click="createPV(item)" class="listing-ct-item">
            <th>{{ item.metadata.name }}</th>
            <th>{{ item.metadata.namespace }}</th>
            <td>{{ item.spec.resources.requests.storage }}</td>
            <td>{{ item.metadata.creationTimestamp | dateRelative }}</td>
            <td><button class="btn btn-danger btn-delete pficon pficon-delete" ng-click="deletePVC(item, $event)"></button></td>
        </tr>
    </tbody>
    <tbody data-ng-rubbish="" ng-if="0" ng-repeat-end></tbody>
</table>
</div>
