<!--
  ~ 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">
    <h3 class="queue-listing-header primary-color">{{ selectedConnection?.label }}</h3>
    <context-error-banner [context]="ErrorContextKey.QUEUE"></context-error-banner>
    <div class="flex justify-between mb-2">
        <div class="tertiary-color font-medium">
            Display {{ displayObjectCount }} of {{ formatCount(queueSizeObjectCount) }} ({{
                formatBytes(queueSizeByteCount)
            }}) bytes
        </div>
        <div class="listing-message error-color">
            @if (sourceRunning && destinationRunning) {
                The source and destination of this queue are currently running. This listing may no longer be accurate.
            } @else {
                @if (sourceRunning) {
                    The source of this queue is currently running. This listing may no longer be accurate.
                } @else {
                    @if (destinationRunning) {
                        The destination of this queue is currently running. This listing may no longer be accurate.
                    }
                }
            }
        </div>
    </div>
    <div class="flex-1 relative">
        <div class="listing-table absolute inset-0 overflow-y-auto">
            <table mat-table [dataSource]="dataSource">
                <!-- 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>

                <!-- Node Column -->
                @if (displayedColumns.includes('node')) {
                    <ng-container matColumnDef="node">
                        <th mat-header-cell *matHeaderCellDef>Node</th>
                        <td mat-cell *matCellDef="let item" [title]="item.clusterNodeAddress">
                            {{ item.clusterNodeAddress }}
                        </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 justify-end gap-x-2">
                            @if (
                                item.size > 0 ||
                                (contentViewerAvailable && item.size > 0) ||
                                currentUser.provenancePermissions.canRead
                            ) {
                                <button
                                    mat-icon-button
                                    type="button"
                                    [matMenuTriggerFor]="actionMenu"
                                    class="h-16 w-16 flex items-center justify-center icon global-menu">
                                    <i class="fa fa-ellipsis-v"></i>
                                </button>
                            }
                            <mat-menu #actionMenu="matMenu" xPosition="before">
                                <button mat-menu-item (click)="viewFlowFileClicked(item)">
                                    <i class="fa fa-info-circle primary-color mr-2"></i>
                                    View Details
                                </button>
                                @if (item.size > 0) {
                                    <button mat-menu-item (click)="downloadContentClicked(item)">
                                        <i class="fa fa-download primary-color mr-2"></i>
                                        Download content
                                    </button>
                                }
                                @if (contentViewerAvailable && item.size > 0) {
                                    <button mat-menu-item (click)="viewContentClicked(item)">
                                        <i class="fa fa-eye primary-color mr-2"></i>
                                        View content
                                    </button>
                                }
                                @if (selectedConnection && currentUser.provenancePermissions.canRead) {
                                    <button
                                        mat-menu-item
                                        [routerLink]="['/provenance']"
                                        [queryParams]="{ flowFileUuid: item.uuid }"
                                        [state]="{
                                            backNavigation: {
                                                route: ['/queue', selectedConnection.id],
                                                routeBoundary: ['/provenance'],
                                                context: 'Queue'
                                            }
                                        }">
                                        <i class="icon icon-provenance primary-color mr-2"></i>
                                        Provenance
                                    </button>
                                }
                            </mat-menu>
                        </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>
