Asymmetrik/ngx-starter

<section>
    <h1 class="mb-3">Notifications</h1>

    <!-- Alert Notifications -->
    <system-alert />

    <div class="pt-2 d-flex flex-column align-items-stretch">
        <asy-search-input
            class="mx-auto mb-4"
            placeholder="Search messages..."
            (applySearch)="onSearch($event)"
        />
        <div class="p-2">
            @if (newMessages()) {
                <div>
                    <button class="btn btn-sm btn-link" type="button" (click)="loadNewMessages()">
                        Load new messages
                    </button>
                </div>
            }
            @if (messages().length === 0) {
                <div>
                    <p class="text-center">No messages to display.</p>
                </div>
            }
            @for (message of messages(); track message) {
                <div class="card card-message mb-4">
                    <div class="row g-0">
                        <div class="col-alert-icon {{ messageType[message.type] | lowercase }}">
                            <span
                                class="fa-solid alert-icon d-flex align-items-center"
                                [ngClass]="{
                                    'fa-check': message.type === messageType.MOTD,
                                    'fa-info': message.type === messageType.INFO,
                                    'fa-exclamation': message.type === messageType.WARN,
                                    'fa-exclamation-triangle': message.type === messageType.ERROR
                                }"
                            ></span>
                        </div>
                        <div class="col-alert-body">
                            <div class="card-body">
                                <div class="d-flex">
                                    <h3 class="card-title">{{ message.title }}</h3>
                                    <span class="ms-auto">{{ message.created | agoDate }}</span>
                                </div>
                                <p class="mb-0" [innerHTML]="message.body"></p>
                            </div>
                        </div>
                    </div>
                </div>
            }
        </div>
    </div>
</section>