<div class="sfng-confirm-dialog">
  <caption *ngIf="config.caption">{{config.caption}}</caption>
  <svg xmlns="http://www.w3.org/2000/svg" *ngIf="config.canCancel" class="w-5 h-5 close-icon" viewBox="0 0 20 20"
    fill="currentColor" (click)="select()">
    <path fill-rule="evenodd"
      d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
      clip-rule="evenodd" />
  </svg>


  <h1 *ngIf="config.header">{{config.header}}</h1>

  <span class="message" *ngIf="config.message">{{ config.message }}</span>

  <input *ngIf="!!config.inputType" [attr.type]="config.inputType" [(ngModel)]="config.inputModel"
    [attr.placeholder]="config.inputPlaceholder || null">

  <div class="actions" *ngIf="!!config.buttons">
    <button *ngFor="let button of config.buttons" (click)="select(button.id)" type="button"
      class="action-button {{button.class}}">{{button.text}}</button>
  </div>
</div>
