<ng-template #usageNotAvailableTooltipTpl>
  <ng-container i18n>Only available for RBD images with <strong>fast-diff</strong> enabled</ng-container>
</ng-template>

<ng-container *ngIf="selection && selection.source !== 'REMOVING'">
  <nav ngbNav
       #nav="ngbNav"
       class="nav-tabs"
       cdStatefulTab="rbd-details">
    <ng-container ngbNavItem="details">
      <a ngbNavLink
         i18n>Details</a>
      <ng-template ngbNavContent>
        <table class="cds--data-table--sort cds--data-table--no-border cds--data-table cds--data-table--md"
               data-testid="rbd-details-table">
          <tbody>
            <tr cdstablerow>
              <td i18n
                  class="bold w-25"
                  cdstabledata>Name</td>
              <td class="w-75">{{ selection.name }}</td>
            </tr>
            <tr cdstablerow>
              <td i18n
                  class="bold"
                  cdstabledata>Pool</td>
              <td>{{ selection.pool_name }}</td>
            </tr>
            <tr cdstablerow>
              <td i18n
                  class="bold">Data Pool</td>
              <td>{{ selection.data_pool | empty }}</td>
            </tr>
            <tr cdstablerow>
              <td i18n
                  class="bold">Created</td>
              <td>{{ selection.timestamp | cdDate }}</td>
            </tr>
            <tr cdstablerow>
              <td i18n
                  class="bold">Size</td>
              <td>{{ selection.size | dimlessBinary }}</td>
            </tr>
            <tr cdstablerow>
              <td i18n
                  class="bold">Objects</td>
              <td>{{ selection.num_objs | dimless }}</td>
            </tr>
            <tr cdstablerow>
              <td i18n
                  class="bold">Object size</td>
              <td>{{ selection.obj_size | dimlessBinary }}</td>
            </tr>
            <tr cdstablerow>
              <td i18n
                  class="bold">Features</td>
              <td>
                <span *ngFor="let feature of selection.features_name">
                  <cds-tag class="tag-dark me-2">{{ feature }}</cds-tag>
                </span>
              </td>
            </tr>
            <tr cdstablerow>
              <td i18n
                  class="bold">Provisioned</td>
              <td>
                <span *ngIf="selection.features_name?.indexOf('fast-diff') === -1">
                  <span class="form-text text-muted"
                        [ngbTooltip]="usageNotAvailableTooltipTpl"
                        placement="top"
                        i18n>N/A</span>
                </span>
                <span *ngIf="selection.features_name?.indexOf('fast-diff') !== -1">
                  {{ selection.disk_usage | dimlessBinary }}
                </span>
              </td>
            </tr>
            <tr cdstablerow>
              <td i18n
                  class="bold">Total provisioned</td>
              <td>
                <span *ngIf="selection.features_name?.indexOf('fast-diff') === -1">
                  <span class="form-text text-muted"
                        [ngbTooltip]="usageNotAvailableTooltipTpl"
                        placement="top"
                        i18n>N/A</span>
                </span>
                <span *ngIf="selection.features_name?.indexOf('fast-diff') !== -1">
                  {{ selection.total_disk_usage | dimlessBinary }}
                </span>
              </td>
            </tr>
            <tr cdstablerow>
              <td i18n
                  class="bold">Striping unit</td>
              <td>{{ selection.stripe_unit | dimlessBinary }}</td>
            </tr>
            <tr cdstablerow>
              <td i18n
                  class="bold">Striping count</td>
              <td>{{ selection.stripe_count }}</td>
            </tr>
            <tr cdstablerow>
              <td i18n
                  class="bold">Parent</td>
              <td>
                <span *ngIf="selection.parent">{{ selection.parent.pool_name }}<span
                        *ngIf="selection.parent.pool_namespace">/{{ selection.parent.pool_namespace }}</span>/{{ selection.parent.image_name }}&#64;{{ selection.parent.snap_name }}</span>
                <span *ngIf="!selection.parent">-</span>
              </td>
            </tr>
            <tr cdstablerow>
              <td i18n
                  class="bold">Block name prefix</td>
              <td>{{ selection.block_name_prefix }}</td>
            </tr>
            <tr cdstablerow>
              <td i18n
                  class="bold">Order</td>
              <td>{{ selection.order }}</td>
            </tr>
            <tr cdstablerow>
              <td i18n
                  class="bold">Format Version</td>
              <td>{{ selection.image_format }}</td>
            </tr>
          </tbody>
        </table>
      </ng-template>
    </ng-container>
    <ng-container ngbNavItem="snapshots">
      <a ngbNavLink
         i18n>Snapshots</a>
      <ng-template ngbNavContent>
        <cd-rbd-snapshot-list [snapshots]="selection.snapshots"
                              [featuresName]="selection.features_name"
                              [poolName]="selection.pool_name"
                              [primary]="selection.primary"
                              [namespace]="selection.namespace"
                              [mirroring]="selection.mirror_mode"
                              [rbdName]="selection.name"></cd-rbd-snapshot-list>
      </ng-template>
    </ng-container>
    <ng-container ngbNavItem="configuration">
      <a ngbNavLink
         i18n>Configuration</a>
      <ng-template ngbNavContent>
        <cd-rbd-configuration-table [data]="selection['configuration']"></cd-rbd-configuration-table>
      </ng-template>
    </ng-container>

    <ng-container ngbNavItem="performance">
      <a ngbNavLink
         i18n>Performance</a>
      <ng-template ngbNavContent>
        <cd-grafana i18n-title
                    title="RBD details"
                    [grafanaPath]="rbdDashboardUrl"
                    [type]="'metrics'"
                    uid="YhCYGcuZz"
                    grafanaStyle="one">
        </cd-grafana>
      </ng-template>
    </ng-container>
  </nav>

  <div [ngbNavOutlet]="nav"></div>
</ng-container>
<ng-container *ngIf="selection && selection.source === 'REMOVING'">
  <cd-alert-panel type="warning"
                  i18n>Information can not be displayed for RBD in status 'Removing'.</cd-alert-panel>
</ng-container>

<ng-template #poolConfigurationSourceTpl
             let-row="data.row"
             let-value="data.value">
  <ng-container *ngIf="+value; else global">
    <strong i18n
            i18n-ngbTooltip
            ngbTooltip="This setting overrides the global value">Image</strong>
  </ng-container>
  <ng-template #global>
    <span i18n
          i18n-ngbTooltip
          ngbTooltip="This is the global value. No value for this option has been set for this image.">Global</span>
  </ng-template>
</ng-template>
