<!--
  ~  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.
  -->

<ng-container *ngIf="counterListingState$ | async; let counterListingState">
    <div *ngIf="isInitialLoading(counterListingState); else loaded">
        <ngx-skeleton-loader count="3"></ngx-skeleton-loader>
    </div>

    <ng-template #loaded>
        <div class="flex flex-col h-full gap-y-2">
            <div class="flex-1" *ngIf="currentUser$ | async as user">
                <counter-table
                    [counters]="counterListingState.counters"
                    [canModifyCounters]="user.countersPermissions.canWrite"
                    (resetCounter)="resetCounter($event)"></counter-table>
            </div>
            <div class="flex justify-between">
                <div class="refresh-container flex items-center gap-x-2">
                    <button class="nifi-button" (click)="refreshCounterListing()">
                        <i class="fa fa-refresh" [class.fa-spin]="counterListingState.status === 'loading'"></i>
                    </button>
                    <div>Last updated:</div>
                    <div class="refresh-timestamp">{{ counterListingState.loadedTimestamp }}</div>
                </div>
            </div>
        </div>
    </ng-template>
</ng-container>
