<page-header title="'Volume details'" breadcrumbs="[{label:'Volumes', link:'docker.volumes'}, volume.Id]"> </page-header>

<div class="row" ng-if="volume">
  <div class="col-sm-12">
    <rd-widget>
      <rd-widget-header icon="database" 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
                  ng-if="showBrowseAction"
                  class="btn btn-xs btn-primary"
                  ui-sref="docker.volumes.volume.browse({ id: volume.Name, nodeName: volume.NodeName })"
                  authorization="DockerAgentBrowseList"
                >
                  <pr-icon icon="'search'" class="leading-none"></pr-icon>
                  Browse
                </button>
                <button authorization="DockerVolumeDelete" class="btn btn-xs btn-danger" ng-click="removeVolume()"
                  ><pr-icon icon="'trash-2'" class="leading-none"></pr-icon> 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-bordered table-condensed table">
                  <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>

<!-- access-control-panel -->
<access-control-panel
  ng-if="volume"
  resource-id="volume.ResourceId"
  resource-control="volume.ResourceControl"
  resource-type="resourceType"
  on-update-success="(onUpdateResourceControlSuccess)"
  environment-id="endpoint.Id"
>
</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="settings" 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="box" 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>
