<tabset>
  <tab i18n-heading
       heading="OSDs List">
    <cd-table [data]="osds"
              (fetchData)="getOsdList()"
              [columns]="columns"
              selectionType="single"
              (updateSelection)="updateSelection($event)"
              [updateSelectionOnRefresh]="'never'">
      <div class="table-actions btn-toolbar">
        <cd-table-actions [permission]="permissions.osd"
                          [selection]="selection"
                          class="btn-group"
                          [tableActions]="tableActions">
        </cd-table-actions>

        <div class="btn-group"
             dropdown
             *ngIf="advancedTableActions.length > 0">
          <button type="button"
                  class="btn btn-sm btn-default btn-label tc_configureCluster"
                  (click)="advancedTableActions[0].click()">
            <i class="fa fa-fw {{ advancedTableActions[0].icon }}"></i><span>{{ advancedTableActions[0].name }}</span>
          </button>
          <button type="button"
                  dropdownToggle
                  class="btn btn-sm btn-default dropdown-toggle dropdown-toggle-split"
                  *ngIf="advancedTableActions.length > 1">
            <span class="caret caret-black"></span>
          </button>
          <ul *dropdownMenu
              class="dropdown-menu"
              role="menu">
            <ng-container *ngFor="let action of advancedTableActions | slice:1">
              <li role="menuitem">
                <a class="dropdown-item"
                   (click)="action.click()">
                  <i class="fa fa-fw {{ action.icon }}"
                     aria-hidden="true">
                  </i>
                  <ng-container>{{ action.name }}</ng-container>
                </a>
              </li>
            </ng-container>
          </ul>
        </div>
      </div>

      <cd-osd-details cdTableDetail
                      [selection]="selection">
      </cd-osd-details>
    </cd-table>

    <ng-template #statusColor
                 let-value="value">
      <span *ngFor="let state of value; last as last">
        <span class="label"
              [ngClass]="{'label-success': ['in', 'up'].includes(state), 'label-danger': ['down', 'out'].includes(state)}">{{ state }}</span>
        <span *ngIf="!last">&nbsp;</span>
      </span>
    </ng-template>

    <ng-template #osdUsageTpl
                 let-row="row">
      <cd-usage-bar [totalBytes]="row.stats.stat_bytes"
                    [usedBytes]="row.stats.stat_bytes_used">
      </cd-usage-bar>
    </ng-template>
  </tab>
  <tab i18n-heading
       *ngIf="permissions.grafana.read"
       heading="Overall Performance">
    <cd-grafana [grafanaPath]="'osd-overview?'"
                uid="lo02I1Aiz"
                grafanaStyle="three">
    </cd-grafana>
  </tab>
</tabset>

<ng-template #markOsdConfirmationTpl
             let-markActionDescription="markActionDescription">
  <ng-container i18n><strong>OSD {{ selection.first().id }}</strong> will be marked
  <strong>{{ markActionDescription }}</strong> if you proceed.</ng-container>
</ng-template>

<ng-template #criticalConfirmationTpl
             let-safeToDestroyResult="result"
             let-actionDescription="actionDescription">
  <div *ngIf="!safeToDestroyResult['is_safe_to_destroy']"
       class="danger">
    <cd-warning-panel i18n>The OSD is not safe to destroy!</cd-warning-panel>
  </div>
  <ng-container i18n><strong>OSD {{ selection.first().id }}</strong> will be
  <strong>{{ actionDescription }}</strong> if you proceed.</ng-container>
</ng-template>
