@if (messageOfTheDay.messageOtd) {
    <c-modal id="messageOfTheDayModal"
             size="lg">
        <ng-container *transloco="let t">
            <c-modal-header [class]="'bg-' + messageOfTheDay.messageOtd.style">
                <h5 class="text-white">
                    {{ t('Message of the day!') }}
                </h5>
                <button (click)="hideModal()" cButtonClose></button>
            </c-modal-header>
            <c-modal-body>
                <div class="d-flex">
                    <div class="alert-icon">
                        <span class="icon-stack icon-stack-lg">
                            <i class="base base-comment icon-stack-3x opacity-100"
                               [ngClass]="'text-'+messageOfTheDay.messageOtd.style"></i>
                            @if (messageOfTheDay.messageOtd.style == 'primary' || messageOfTheDay.messageOtd.style == 'info') {
                                <i class="fas fa-info icon-stack-1x opacity-100 text-white mb-2"
                                ></i>
                            }
                            @if (messageOfTheDay.messageOtd.style == 'success') {
                                <i class="fas fa-check icon-stack-1x opacity-100 text-white mb-2"
                                ></i>
                            }
                            @if (messageOfTheDay.messageOtd.style == 'warning' || messageOfTheDay.messageOtd.style == 'danger') {
                                <i class="fas fa-exclamation icon-stack-1x opacity-100 text-white mb-2"
                                ></i>
                            }
                        </span>
                    </div>
                    <div class="flex-1 ps-3">
                        <h4 [class]="'title-border title-border-bottom-' + messageOfTheDay.messageOtd.style + ' text-' + messageOfTheDay.messageOtd.style">
                            {{ messageOfTheDay.messageOtd.title }}
                        </h4>
                        <div class="italic mb-3">
                            {{ messageOfTheDay.messageOtd.description }}
                        </div>
                        <div class="text-break" [innerHTML]="html | trustAsHtml"></div>
                    </div>
                </div>
            </c-modal-body>
        </ng-container>
    </c-modal>
}