<page-header ng-if="ctrl.state.viewReady" title="'Volume list'" breadcrumbs="['Volumes']" reload="true"></page-header>

<kubernetes-view-loading view-ready="ctrl.state.viewReady"></kubernetes-view-loading>

<div ng-if="ctrl.state.viewReady">
  <div class="row">
    <div class="col-sm-12">
      <rd-widget>
        <rd-widget-body classes="no-padding">
          <uib-tabset active="ctrl.state.activeTab" justified="true" type="pills">
            <uib-tab index="0" classes="btn-sm" select="ctrl.selectTab(0)">
              <uib-tab-heading> <i class="fa fa-database space-right" aria-hidden="true"></i> Volumes</uib-tab-heading>
              <kubernetes-volumes-datatable
                dataset="ctrl.volumes"
                table-key="kubernetes.volumes"
                order-by="PersistentVolumeClaim.Name"
                remove-action="ctrl.removeAction"
                refresh-callback="ctrl.getVolumes"
                data-cy="k8s-volumes-datatable"
              >
              </kubernetes-volumes-datatable>
            </uib-tab>
            <uib-tab index="1" classes="btn-sm" select="ctrl.selectTab(1)">
              <uib-tab-heading> <i class="fa fa-hdd space-right" aria-hidden="true"></i> Storage</uib-tab-heading>
              <kubernetes-volumes-storages-datatable dataset="ctrl.storages" table-key="kubernetes.volumes.storages" order-by="Name" refresh-callback="ctrl.getVolumes">
              </kubernetes-volumes-storages-datatable>
            </uib-tab>
          </uib-tabset>
        </rd-widget-body>
      </rd-widget>
    </div>
  </div>
</div>