<!--
  ~ 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="flowfile-table h-full flex flex-col gap-y-2">
    <h3 class="text-xl bold queue-listing-header">{{ connectionLabel }}</h3>
    <div class="flex justify-between">
        <div class="value">
            Display {{ displayObjectCount }} of {{ formatCount(queueSizeObjectCount) }} ({{
                formatBytes(queueSizeByteCount)
            }}) bytes
        </div>
        <div class="listing-message">
            <ng-container *ngIf="sourceRunning && destinationRunning; else bothNotRunning">
                The source and destination of this queue are currently running. This listing may no longer be accurate.
            </ng-container>
            <ng-template #bothNotRunning>
                <ng-container *ngIf="sourceRunning; else sourceNotRunning">
                    The source of this queue is currently running. This listing may no longer be accurate.
                </ng-container>
            </ng-template>
            <ng-template #sourceNotRunning>
                <ng-container *ngIf="destinationRunning">
                    The destination of this queue is currently running. This listing may no longer be accurate.
                </ng-container>
            </ng-template>
        </div>
    </div>
    <div class="flex-1 relative">
        <div class="listing-table border absolute inset-0 overflow-y-auto">
            <table mat-table [dataSource]="dataSource">
                <!-- More Details Column -->
                <ng-container matColumnDef="moreDetails">
                    <th mat-header-cell *matHeaderCellDef></th>
                    <td mat-cell *matCellDef="let item">
                        <div
                            class="pointer fa fa-info-circle"
                            title="View Details"
                            (click)="viewFlowFileClicked(item)"></div>
                    </td>
                </ng-container>

                <!-- Position Column -->
                <ng-container matColumnDef="position">
                    <th mat-header-cell *matHeaderCellDef>Position</th>
                    <td mat-cell *matCellDef="let item">
                        {{ item.position }}
                    </td>
                </ng-container>

                <!-- FlowFile Uuid Column -->
                <ng-container matColumnDef="flowFileUuid">
                    <th mat-header-cell *matHeaderCellDef>UUID</th>
                    <td mat-cell *matCellDef="let item">
                        {{ item.uuid }}
                    </td>
                </ng-container>

                <!-- File Name Column -->
                <ng-container matColumnDef="fileName">
                    <th mat-header-cell *matHeaderCellDef>Filename</th>
                    <td mat-cell *matCellDef="let item">
                        {{ item.filename }}
                    </td>
                </ng-container>

                <!-- File Size Column -->
                <ng-container matColumnDef="fileSize">
                    <th mat-header-cell *matHeaderCellDef>File Size</th>
                    <td mat-cell *matCellDef="let item">
                        {{ formatBytes(item.size) }}
                    </td>
                </ng-container>

                <!-- Queued Duration Column -->
                <ng-container matColumnDef="queuedDuration">
                    <th mat-header-cell *matHeaderCellDef>Queued Duration</th>
                    <td mat-cell *matCellDef="let item">
                        {{ formatDuration(item.queuedDuration) }}
                    </td>
                </ng-container>

                <!-- Lineage Duration Column -->
                <ng-container matColumnDef="lineageDuration">
                    <th mat-header-cell *matHeaderCellDef>Lineage Duration</th>
                    <td mat-cell *matCellDef="let item">
                        {{ formatDuration(item.lineageDuration) }}
                    </td>
                </ng-container>

                <!-- Penalized Column -->
                <ng-container matColumnDef="penalized">
                    <th mat-header-cell *matHeaderCellDef>Penalized</th>
                    <td mat-cell *matCellDef="let item">
                        {{ item.penalized ? 'Yes' : 'No' }}
                    </td>
                </ng-container>

                <!-- Actions Column -->
                <ng-container matColumnDef="actions">
                    <th mat-header-cell *matHeaderCellDef></th>
                    <td mat-cell *matCellDef="let item">
                        <div class="flex items-center gap-x-3">
                            <div
                                *ngIf="item.size > 0"
                                class="pointer fa fa-download"
                                title="Download content"
                                (click)="downloadContentClicked(item)"></div>
                            <div
                                *ngIf="contentViewerAvailable && item.size > 0"
                                class="pointer fa fa-eye"
                                title="View content"
                                (click)="viewContentClicked(item)"></div>
                            <div
                                *ngIf="currentUser.provenancePermissions.canRead"
                                class="pointer icon icon-provenance"
                                title="Provenance"
                                [routerLink]="['/provenance']"
                                [queryParams]="{ flowFileUuid: item.uuid }"></div>
                        </div>
                    </td>
                </ng-container>

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