<!--
~  Licensed to the Apache Software Foundation (ASF) under one or more
~  contributor license agreements.  See the NOTICE file distributed with
~  this work for additional information regarding copyright ownership.
~  The ASF licenses this file to You under the Apache License, Version 2.0
~  (the "License"); you may not use this file except in compliance with
~  the License.  You may obtain a copy of the License at
~
~     http://www.apache.org/licenses/LICENSE-2.0
~
~  Unless required by applicable law or agreed to in writing, software
~  distributed under the License is distributed on an "AS IS" BASIS,
~  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
~  See the License for the specific language governing permissions and
~  limitations under the License.
-->

<div class="bulletin-board-list-container h-full flex flex-col">
    <div class="bulletin-board-list-filter-container">
        <form [formGroup]="filterForm" class="my-2">
            <div class="flex">
                <div class="mr-2">
                    <mat-form-field subscriptSizing="dynamic">
                        <mat-label>Filter</mat-label>
                        <input matInput type="text" class="small" formControlName="filterTerm" />
                    </mat-form-field>
                </div>
                <div>
                    <mat-form-field subscriptSizing="dynamic">
                        <mat-label>Filter By</mat-label>
                        <mat-select formControlName="filterColumn">
                            <mat-option value="message"> message </mat-option>
                            <mat-option value="name"> name </mat-option>
                            <mat-option value="id"> id </mat-option>
                            <mat-option value="groupId"> group id </mat-option>
                        </mat-select>
                    </mat-form-field>
                </div>
            </div>
        </form>
    </div>

    <div class="flex-1 relative">
        <div class="overflow-y-auto absolute inset-0 border-2 p-4" #scrollContainer>
            <ul class="flex flex-wrap gap-y-2">
                @for (item of bulletinBoardItems; track item) {
                    <!-- each item can either be a BulletinEntity or BulletinBoardEvent -->
                    @if (isBulletin(item)) {
                        @if (asBulletin(item); as bulletin) {
                            @if (bulletin.canRead) {
                                <li>
                                    <div class="inline-flex flex-wrap gap-x-1.5">
                                        <div>{{ bulletin.timestamp }}</div>
                                        <div class="font-bold {{ getSeverity(bulletin.bulletin.level) }}">
                                            {{ bulletin.bulletin.level }}
                                        </div>
                                        @if (getRouterLink(bulletin); as link) {
                                            <div>
                                                <a class="link" [routerLink]="link">{{ bulletin.bulletin.sourceId }}</a>
                                            </div>
                                        } @else {
                                            <div>{{ bulletin.bulletin.sourceId }}</div>
                                        }
                                        @if (!!bulletin.nodeAddress) {
                                            <div>{{ bulletin.nodeAddress }}</div>
                                        }
                                        <pre class="whitespace-pre-wrap">{{ bulletin.bulletin.message }}</pre>
                                    </div>
                                </li>
                            }
                        }
                    } @else {
                        @if (asBulletinEvent(item); as event) {
                            <li class="w-full mt-4">
                                <div class="bulletin-board-event border-b-2 flex-1 p-2">
                                    {{ event.message }}
                                </div>
                            </li>
                        }
                    }
                }
            </ul>
        </div>
    </div>
</div>
