<div [@skySlideDissolve]="showForm">
  @if (!showForm) {
    <div class="sky-slide-dissolve-first">
      <ng-content />
    </div>
  } @else if (template) {
    <div class="sky-slide-dissolve-last">
      <div class="sky-inline-form sky-shadow sky-box sky-elevation-3">
        <div class="sky-inline-form-content">
          <ng-container [ngTemplateOutlet]="template" />
        </div>
        <div class="sky-inline-form-footer">
          @for (button of buttons; track button) {
            <button
              type="button"
              class="sky-btn {{ 'sky-btn-' + button.styleType }}"
              [disabled]="button.disabled ? true : null"
              [ngClass]="{ 'sky-btn-disabled': button.disabled }"
              (click)="closeInlineForm(button)"
            >
              {{ button.text }}
            </button>
          }
        </div>
      </div>
    </div>
  }
</div>
