<clr-modal [clrModalSize]="''" [(clrModalOpen)]="modalOpened">
  <h3 class="modal-title">{{title}}</h3>
  <div class="modal-body">
    <div class="alert alert-warning">
      <div class="alert-items">
        <div class="alert-item static">
          <div class="alert-icon-wrapper">
            <clr-icon class="alert-icon" shape="exclamation-circle"></clr-icon>
          </div>
          <span class="alert-text">
             {{'PVC.CREATE_MESSAGE' | translate}}
          </span>
        </div>
      </div>
    </div>
    <form #publishForm="ngForm">
      <section class="form-block">
        <div class="form-group" style="padding-left: 135px;">
          <label class="clr-col-md-3 form-group-label-override required">{{'TITLE.CLUSTER' | translate}}</label>
          <div *ngFor="let cluster of clusters;let i=index" style="padding-right: 20px" class="checkbox-inline">
            <input [(ngModel)]="cluster['checked']"
                   type="checkbox"
                   id="{{i}}-check"
                   name="{{i}}-check">
            <label for="{{i}}-check">{{cluster.name}}</label>
          </div>
        </div>
        <div *ngIf="actionType==3" class="form-group" style="padding-left: 135px;">
          <label class="clr-col-md-3 form-group-label-override">{{'ACTION.FORCE_DROP' | translate}}
            <a role="tooltip" aria-haspopup="true" class="tooltip tooltip-lg">
              <clr-icon shape="info-circle" size="24"></clr-icon>
              <span class="tooltip-content">{{'MESSAGE.FORCE_DROP' | translate}} </span>
            </a>
          </label>
          <div class="toggle-switch" style="top: .25rem">
            <input [(ngModel)]="forceOffline" type="checkbox" id="force-offline-id" name="force-offline">
            <label for="force-offline-id"></label>
          </div>
        </div>
      </section>
    </form>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-outline" (click)="onCancel()">{{'BUTTON.CANCEL' | translate}}</button>
    <button type="button" class="btn btn-primary" [disabled]="!isValid"
            (click)="onSubmit()">{{'BUTTON.CONFIRM' | translate}}</button>
  </div>
</clr-modal>
