@if (isModalButton) {
    <ng-container *ngTemplateOutlet="modalButtonTemplate"></ng-container>
} @else {
    <ng-container *ngTemplateOutlet="buttonTemplate"></ng-container>
}

<ng-template #modalButtonTemplate>
    <div class="d-block" [class.cursor-wait]="isSpinnerShown">
        <button
            class="ca-modal-btn ca-font-bold text-size-14 has-animation"
            [class.loading]="isSpinnerShown"
            [ngClass]="type | modalButtonClass: size : isValid"
            type="button"
            [disabled]="isSpinnerShown"
        >
            <span
                class="button-text has-animation"
                [class.hidden-text]="isSpinnerShown"
            >
                {{ text }}
            </span>
            @if (isSpinnerShown) {
                <span class="button-text loading-text">
                    {{ loadingText
                    }}<span class="loading-dots">
                        <span class="dot">.</span>
                        <span class="dot">.</span>
                        <span class="dot">.</span>
                    </span>
                </span>
            }
        </button>
    </div>
</ng-template>

<ng-template #buttonTemplate>
    <button
        class="d-flex align-items-center justify-content-center ca-font-bold text-size-14 ca-modal-btn"
        [class.text-and-spinner-shown]="isSpinnerShown && hasBothSpinnerAndText"
        [ngClass]="type | modalButtonClass: size : isValid"
        type="button"
        [disabled]="isSpinnerShown"
    >
        <span
            class="button-text"
            [class.hidden-text]="isSpinnerShown && !hasBothSpinnerAndText"
        >
            {{ text }}
        </span>
        @if (isSpinnerShown) {
            @if (hasBothSpinnerAndText) {
                <span class="spinner-wrapper">
                    <app-ca-spinner
                        [size]="'small'"
                        [color]="'white'"
                    ></app-ca-spinner>
                </span>
            } @else {
                <span class="spinner-absolute">
                    <app-ca-spinner
                        [size]="'small'"
                        [color]="'white'"
                    ></app-ca-spinner>
                </span>
            }
        }
    </button>
</ng-template>