<rd-header>
  <rd-header-title title-text="Volume details"></rd-header-title>
  <rd-header-content>
    <a ui-sref="docker.volumes">Volumes</a> &gt; <a ui-sref="docker.volumes.volume({id: volume.Id})">{{ volume.Id }}</a>
  </rd-header-content>
</rd-header>

<div class="row" ng-if="volume">
  <div class="col-sm-12">
    <rd-widget>
      <rd-widget-header icon="fa-cube" title-text="Volume details"></rd-widget-header>
      <rd-widget-body classes="no-padding">
        <table class="table">
          <tbody>
            <tr>
              <td>ID</td>
              <td>
                {{ volume.Id }}
                <button authorization="DockerVolumeDelete" class="btn btn-xs btn-danger" ng-click="removeVolume()"
                  ><i class="fa fa-trash-alt space-right" aria-hidden="true"></i>Remove this volume</button
                >
              </td>
            </tr>
            <tr>
              <td>Created</td>
              <td>{{ volume.CreatedAt | getisodate }}</td>
            </tr>
            <tr>
              <td>Mount path</td>
              <td>{{ volume.Mountpoint }}</td>
            </tr>
            <tr>
              <td>Driver</td>
              <td>{{ volume.Driver }}</td>
            </tr>
            <tr ng-if="!(volume.Labels | emptyobject)">
              <td>Labels</td>
              <td>
                <table class="table table-bordered table-condensed">
                  <tr ng-repeat="(k, v) in volume.Labels">
                    <td>{{ k }}</td>
                    <td>{{ v }}</td>
                  </tr>
                </table>
              </td>
            </tr>
          </tbody>
        </table>
      </rd-widget-body>
    </rd-widget>
  </div>
</div>

<div class="row" ng-if="isCioDriver">
  <div class="col-sm-12">
    <volume-storidge-info volume="storidgeVolume"> </volume-storidge-info>
  </div>
</div>

<div class="row" ng-if="isCioDriver">
  <div class="col-sm-12">
    <storidge-snapshot-creation volume-id="storidgeVolume.Vdisk" ng-if="storidgeVolume.SnapshotEnabled"> </storidge-snapshot-creation>
  </div>
</div>

<div class="row" ng-if="isCioDriver && storidgeVolume.SnapshotEnabled">
  <div class="col-sm-12">
    <storidge-snapshots-datatable
      title-text="Snapshots"
      title-icon="fa-camera"
      dataset="storidgeSnapshots"
      table-key="storidgeSnapshots"
      order-by="Id"
      remove-action="removeSnapshot"
    >
    </storidge-snapshots-datatable>
  </div>
</div>

<!-- access-control-panel -->
<por-access-control-panel ng-if="volume" resource-id="volume.ResourceId" resource-control="volume.ResourceControl" resource-type="'volume'"> </por-access-control-panel>
<!-- !access-control-panel -->

<div class="row" ng-if="!(volume.Options | emptyobject)">
  <div class="col-lg-12 col-md-12 col-xs-12">
    <rd-widget>
      <rd-widget-header icon="fa-cogs" title-text="Volume options"></rd-widget-header>
      <rd-widget-body classes="no-padding">
        <table class="table">
          <tbody>
            <tr ng-repeat="(key, value) in volume.Options">
              <td>{{ key }}</td>
              <td>{{ value }}</td>
            </tr>
          </tbody>
        </table>
      </rd-widget-body>
    </rd-widget>
  </div>
</div>
<div class="row" ng-if="containersUsingVolume.length > 0">
  <div class="col-lg-12 col-md-12 col-xs-12">
    <rd-widget>
      <rd-widget-header icon="fa-cubes" title-text="Containers using volume"></rd-widget-header>
      <rd-widget-body classes="no-padding">
        <table class="table">
          <thead>
            <th>Container Name</th>
            <th>Mounted At</th>
            <th>Read-only</th>
          </thead>
          <tbody>
            <tr ng-repeat="container in containersUsingVolume">
              <td
                ><a ui-sref="docker.containers.container({ id: container.Id, nodeName: container.NodeName })">{{ container | containername }}</a></td
              >
              <td>{{ container.volumeData.Destination }}</td>
              <td>{{ !container.volumeData.RW }}</td>
            </tr>
          </tbody>
        </table>
      </rd-widget-body>
    </rd-widget>
  </div>
</div>
