@if (open) {
  <div class="confirm-backdrop" (click)="onCancel()">
    <div class="confirm-modal"
      role="dialog"
      aria-modal="true"
      [attr.aria-label]="title"
      [class.variant-warning]="variant === 'warning'"
      [class.variant-danger]="variant === 'danger'"
      [class.variant-info]="variant === 'info'"
      (click)="$event.stopPropagation()">
      <div class="confirm-header">
        <div class="confirm-icon">
          <lucide-icon [img]="TriangleAlert" [size]="22"></lucide-icon>
        </div>
        <h2>{{ title }}</h2>
        <button type="button" class="btn-close" (click)="onCancel()" aria-label="Fermer">
          <lucide-icon [img]="X" [size]="18"></lucide-icon>
        </button>
      </div>
      <div class="confirm-body">
        <p class="confirm-message">{{ message }}</p>
        @if (details.length > 0) {
          <ul class="confirm-details">
            @for (line of details; track line) {
              <li>{{ line }}</li>
            }
          </ul>
        }
      </div>
      <div class="confirm-actions">
        <button type="button" class="btn-secondary" (click)="onCancel()">{{ cancelLabel }}</button>
        <button type="button" class="btn-confirm" (click)="onConfirm()">{{ confirmLabel }}</button>
      </div>
    </div>
  </div>
}
