@if (framed()) {
<p-card class="metric-list surface-card h-full border border-surface-200 shadow-sm dark:border-surface-700">
    <ng-container *ngTemplateOutlet="metricListContent" />
</p-card>
} @else {
<div class="metric-list metric-list--plain">
    <ng-container *ngTemplateOutlet="metricListContent" />
</div>
}

<ng-template #metricListContent>
    @if (showHeader()) {
    <div class="metric-list__header">
        <div class="metric-list__title-wrap">
            <i [class]="'pi ' + icon() + ' metric-list__title-icon'" aria-hidden="true"></i>
            <h3 class="metric-list__title">{{ title() }}</h3>
        </div>
    </div>
    } @if (isLoading()) {
    <div [class]="scrollShellClass()">
        <div #scrollFrame class="metric-list__scroll-frame" (scroll)="onScrollFrame()">
            <div class="metric-list__skeletons">
                @for (i of [1, 2, 3, 4, 5]; track i) {
                <p-skeleton height="2.5rem" styleClass="w-full" />
                }
            </div>
        </div>
        <div class="metric-list__scrollbar" aria-hidden="true">
            <div class="metric-list__scrollbar-thumb" [style.top.%]="scrollThumbTop()" [style.height.%]="scrollThumbHeight()"></div>
        </div>
        <div class="metric-list__scroll-fade" aria-hidden="true"></div>
    </div>
    } @else if (!data() || data().length === 0) {
    <div [class]="scrollShellClass()">
        <div #scrollFrame class="metric-list__scroll-frame" (scroll)="onScrollFrame()">
            <ul class="metric-list__rows">
                <li class="metric-list__row metric-list__row--empty">
                    <span class="metric-list__empty-label">{{ "common.empty.noDataTitle" | transloco }}</span>
                </li>
            </ul>
        </div>
        <div class="metric-list__scrollbar" aria-hidden="true">
            <div class="metric-list__scrollbar-thumb" [style.top.%]="scrollThumbTop()" [style.height.%]="scrollThumbHeight()"></div>
        </div>
        <div class="metric-list__scroll-fade" aria-hidden="true"></div>
    </div>
    } @else {
    <div [class]="scrollShellClass()">
        <div #scrollFrame class="metric-list__scroll-frame" (scroll)="onScrollFrame()">
            <ul class="metric-list__rows metric-list__rows--compact">
                @for (item of data(); track item.name + ':' + $index) {
                <li
                    [class]="rowClass(item)"
                    [attr.role]="isRowClickable() ? 'button' : null"
                    [attr.tabindex]="isRowClickable() ? 0 : -1"
                    (click)="onRowClick(item)"
                    (keydown.enter)="onRowClick(item)"
                    (keydown.space)="$event.preventDefault(); onRowClick(item)"
                >
                    <div class="metric-list__row-fill" [style.width.%]="barWidth(item)"></div>
                    <div class="metric-list__row-content">
                        <div class="metric-list__row-main">
                            @if (showBrowserIcons()) {
                            <img [ngSrc]="browserIconUrl(item)" class="metric-list__flag" [width]="32" [height]="32" alt="" />
                            } @else if (showCountryFlags() && countryFlagUrl(item.name); as flagUrl) {
                            <img [ngSrc]="flagUrl" class="metric-list__flag" [width]="16" [height]="16" alt="" />
                            } @else if (showLanguageFlags() && languageFlagUrl(item.name); as flagUrl) {
                            <img [ngSrc]="flagUrl" class="metric-list__flag" [width]="16" [height]="16" alt="" />
                            } @if (linkInfo(item); as info) { @if (info.faviconUrl) {
                            <img [ngSrc]="info.faviconUrl" class="metric-list__favicon" [width]="16" [height]="16" alt="" />
                            }
                            <span class="metric-list__label" [title]="titleForItem(item)">{{ displayLabel(item) }}</span>
                            <a class="metric-list__link" [href]="info.href" target="_blank" rel="noopener noreferrer" (click)="$event.stopPropagation()" [attr.aria-label]="'common.openInNewTabAria' | transloco">
                                <i class="pi pi-external-link metric-list__link-icon" aria-hidden="true"></i>
                            </a>
                            } @else { @if (isDeviceMetric()) {
                            <i [class]="deviceIconClass(item) + ' metric-list__item-icon'" aria-hidden="true"></i>
                            }
                            <span class="metric-list__label" [title]="titleForItem(item)">{{ displayLabel(item) }}</span>
                            }
                        </div>

                        <div class="metric-list__meta">
                            <span class="metric-list__share">{{ shareForItem(item) | translocoDecimal: { maximumFractionDigits: 0 } }}%</span>
                            <span class="metric-list__value">{{ item.value | translocoDecimal }}</span>
                        </div>
                    </div>
                </li>
                }
            </ul>
        </div>
        <div class="metric-list__scrollbar" aria-hidden="true">
            <div class="metric-list__scrollbar-thumb" [style.top.%]="scrollThumbTop()" [style.height.%]="scrollThumbHeight()"></div>
        </div>
        <div class="metric-list__scroll-fade" aria-hidden="true"></div>
    </div>
    }
</ng-template>