<cd-table [data]="data"
          columnMode="flex"
          selectionType="single"
          (updateSelection)="updateSelection($event)"
          [columns]="columns">
  <div class="table-actions">
    <div class="btn-group" dropdown>
      <button type="button"
              class="btn btn-sm btn-primary"
              *ngIf="!selection.hasSingleSelection"
              (click)="openCreateSnapshotModal()">
        <i class="fa fa-fw fa-plus"></i><span i18n>Create</span>
      </button>
      <button type="button"
              class="btn btn-sm btn-primary"
              *ngIf="selection.hasSingleSelection"
              [ngClass]="{'disabled': selection.first().executing}"
              (click)="openEditSnapshotModal()">
        <i class="fa fa-fw fa-pencil"></i><span i18n>Rename</span>
      </button>
      <button type="button" dropdownToggle class="btn btn-sm btn-primary dropdown-toggle dropdown-toggle-split">
        <span class="caret"></span>
        <span class="sr-only"></span>
      </button>
      <ul *dropdownMenu class="dropdown-menu" role="menu">
        <li role="menuitem"><a class="dropdown-item" (click)="openCreateSnapshotModal()"><i class="fa fa-fw fa-plus"></i><span i18n>Create</span></a></li>
        <li role="menuitem"
            [ngClass]="{'disabled': !selection.hasSingleSelection || selection.first().executing}"><a class="dropdown-item" (click)="openEditSnapshotModal()"><i class="fa fa-fw fa-pencil"></i><span i18n>Rename</span></a></li>
        <li role="menuitem"
            [ngClass]="{'disabled': !selection.hasSingleSelection || selection.first().executing}">
          <a class="dropdown-item" (click)="toggleProtection()">
            <span *ngIf="!selection.first()?.is_protected"><i class="fa fa-fw fa-lock"></i><span i18n>Protect</span></span>
            <span *ngIf="selection.first()?.is_protected"><i class="fa fa-fw fa-unlock"></i><span i18n>Unprotect</span></span>
          </a>
        </li>
        <li role="menuitem"
            [ngClass]="{'disabled': !selection.hasSingleSelection || selection.first().executing}">
          <a class="dropdown-item" routerLink="/rbd/clone/{{ poolName }}/{{ rbdName }}/{{ selection.first()?.name }}">
            <i class="fa fa-fw fa-clone"></i><span i18n>Clone</span>
          </a>
        </li>
        <li role="menuitem"
            [ngClass]="{'disabled': !selection.hasSingleSelection || selection.first().executing}">
          <a class="dropdown-item" routerLink="/rbd/copy/{{ poolName }}/{{ rbdName }}/{{ selection.first()?.name }}">
            <i class="fa fa-fw fa-copy"></i><span i18n>Copy</span>
          </a>
        </li>
        <li role="menuitem"
            [ngClass]="{'disabled': !selection.hasSingleSelection || selection.first().executing}">
          <a class="dropdown-item" (click)="rollbackModal()"><i class="fa fa-fw fa-undo"></i><span i18n>Rollback</span></a>
        </li>
        <li role="menuitem"
            [ngClass]="{'disabled': !selection.hasSingleSelection || selection.first().executing || selection.first().is_protected}">
          <a class="dropdown-item" (click)="deleteSnapshotModal()"><i class="fa fa-fw fa-trash-o"></i><span i18n>Delete</span></a>
        </li>
      </ul>
    </div>
  </div>
</cd-table>

<ng-template #protectTpl
             let-value="value">
  <span *ngIf="value" class="label label-success">PROTECTED</span>
  <span *ngIf="!value" class="label label-info">UNPROTECTED</span>
</ng-template>
