@if (!isClosed) {
  <div
    class="frg-card"
    [ngClass]="{
      'frg-card__primary': styleType === 'primary',
      'frg-card__secondary': styleType === 'secondary',
      'frg-card__tertiary': styleType === 'tertiary',
      'frg-card__dark': styleType === 'dark',
      'frg-card__light': styleType === 'light',
      'frg-card__success': styleType === 'success',
      'frg-card__warning': styleType === 'warning',
      'frg-card__danger': styleType === 'danger',
      'frg-card__outline-primary': styleType === 'outline-primary',
      'frg-card__outline-secondary': styleType === 'outline-secondary',
      'frg-card__outline-tertiary': styleType === 'outline-tertiary',
      'frg-card__outline-dark': styleType === 'outline-dark',
      'frg-card__outline-light': styleType === 'outline-light',
      'frg-card__outline-success': styleType === 'outline-success',
      'frg-card__outline-warning': styleType === 'outline-warning',
      'frg-card__outline-danger': styleType === 'outline-danger'
    }"
  >
    @if(hasCloseCard) {
      <button
        type="button"
        class="frg-card__close-btn"
        (click)="onCloseCard()"
        aria-label="Close"
      >
        &times;
      </button>
    }

    <div class="frg-card__head">
      <ng-content select="[frg-card-head]"></ng-content>
    </div>
    <div class="frg-card__body">
      <ng-content select="[frg-card-body]"></ng-content>
    </div>
    <div class="frg-card__footer">
      <ng-content select="[frg-card-footer]"></ng-content>
    </div>
  </div>
}