@if (network) {
    <div class="flex flex-wrap">
        @if (network.addrUtilization || hasAddressPools) {
            <div class="min-w-0 overflow-auto">
                <app-utilization-stats-chart
                    title="Total"
                    leaseType="na"
                    [network]="network"
                ></app-utilization-stats-chart>
            </div>
        }
        @if (network.pdUtilization || hasPrefixPools) {
            <div class="min-w-0 overflow-auto">
                <app-utilization-stats-chart
                    title="Total"
                    leaseType="pd"
                    [network]="network"
                ></app-utilization-stats-chart>
            </div>
        }
        @if (localSubnets && localSubnets.length > 1) {
            @for (localSubnet of localSubnets; track localSubnet) {
                @if (localSubnet.pools?.length > 0) {
                    <div class="min-w-0 overflow-auto">
                        <app-utilization-stats-chart
                            [title]="localSubnet.daemonLabel"
                            leaseType="na"
                            [network]="localSubnet"
                        ></app-utilization-stats-chart>
                    </div>
                }
                @if (localSubnet.prefixDelegationPools?.length > 0) {
                    <div class="min-w-0 overflow-auto">
                        <app-utilization-stats-chart
                            [title]="localSubnet.daemonLabel"
                            leaseType="pd"
                            [network]="localSubnet"
                        ></app-utilization-stats-chart>
                    </div>
                }
            }
        }
    </div>
    <p-divider></p-divider>
    <span class="font-italic text-sm"
        >Statistics collected at {{ network.statsCollectedAt | date: 'short' | placeholder: 'never' }}</span
    >
} @else {
    <div>Statistics data unavailable.</div>
}