<!--
  ~ 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="port-cluster-table relative h-full">
    <div class="listing-table absolute inset-0 overflow-y-auto">
        <table
            mat-table
            [dataSource]="dataSource"
            matSort
            matSortDisableClear
            (matSortChange)="sortData($event)"
            [matSortActive]="initialSortColumn"
            [matSortDirection]="initialSortDirection">
            <!-- Node Column -->
            <ng-container matColumnDef="node">
                <th mat-header-cell *matHeaderCellDef mat-sort-header>
                    <div class="overflow-ellipsis overflow-hidden whitespace-nowrap">Node</div>
                </th>
                <td mat-cell *matCellDef="let item" [title]="formatNode(item)">
                    <div class="overflow-ellipsis overflow-hidden whitespace-nowrap">{{ formatNode(item) }}</div>
                </td>
            </ng-container>

            <!-- Run Status column -->
            <ng-container matColumnDef="runStatus">
                <th mat-header-cell *matHeaderCellDef mat-sort-header>Run Status</th>
                <td mat-cell *matCellDef="let item">
                    <div
                        class="inline-block overflow-hidden overflow-ellipsis whitespace-nowrap space-x-1.5 align-middle">
                        <span [ngClass]="getRunStatusIcon(item)"></span>
                        <span [title]="formatRunStatus(item)">{{ formatRunStatus(item) }}</span>

                        @if (item.statusSnapshot; as pg) {
                            @if (pg.terminatedThreadCount > 0) {
                                <span title="Threads: (Active / Terminated)"
                                    >({{ pg.activeThreadCount }}/{{ pg.terminatedThreadCount }})</span
                                >
                            } @else {
                                @if (pg.activeThreadCount > 0) {
                                    <span title="Active Threads">({{ pg.activeThreadCount }})</span>
                                }
                            }
                        }
                    </div>
                </td>
            </ng-container>

            <!-- Input column -->
            <ng-container matColumnDef="in">
                <th mat-header-cell *matHeaderCellDef mat-sort-header title="Count / data size in the last 5 minutes">
                    <div class="inline-block overflow-hidden overflow-ellipsis whitespace-nowrap space-x-1">
                        <span [ngClass]="{ underline: multiSort.active === 'in' && multiSort.sortValueIndex === 0 }"
                            >In</span
                        >
                        <span [ngClass]="{ underline: multiSort.active === 'in' && multiSort.sortValueIndex === 1 }"
                            >(Size)</span
                        >
                        <span class="font-light">5 min</span>
                    </div>
                </th>
                <td mat-cell *matCellDef="let item" [title]="formatIn(item)">
                    {{ formatIn(item) }}
                </td>
            </ng-container>

            <!-- Output column -->
            <ng-container matColumnDef="out">
                <th mat-header-cell *matHeaderCellDef mat-sort-header title="Count / data size in the last 5 minutes">
                    <div class="inline-block overflow-hidden overflow-ellipsis whitespace-nowrap space-x-1">
                        <span [ngClass]="{ underline: multiSort.active === 'out' && multiSort.sortValueIndex === 0 }"
                            >Out</span
                        >
                        <span [ngClass]="{ underline: multiSort.active === 'out' && multiSort.sortValueIndex === 1 }"
                            >(Size)</span
                        >
                        <span class="font-light">5 min</span>
                    </div>
                </th>
                <td mat-cell *matCellDef="let item" [title]="formatOut(item)">
                    {{ formatOut(item) }}
                </td>
            </ng-container>

            <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
            <tr
                mat-row
                *matRowDef="let row; let even = even; columns: displayedColumns"
                [class.even]="even"
                (click)="select(row)"
                [class.selected]="isSelected(row)"></tr>
        </table>
    </div>
</div>
