@php
    $stats = $this->stats;
    $counts = $this->counts;
    $rows = $this->rows;
@endphp

{{-- Polls on its own so the page keeps up with the network without anybody
     pressing anything; the Refresh button is for when they want it now. --}}
<div class="subs" wire:poll.15s>

    <div class="subs-head">
        <div>
            <div class="subs-crumb">{{ __('Network') }} <span>—</span> {{ __('Live sessions') }}</div>
            <h1 class="subs-title">{{ __('Currently') }} <em>{{ __('online.') }}</em></h1>
            <p class="subs-lead">
                {{ __('Everyone currently connected to your network, updated live as sessions change.') }}
            </p>
        </div>

        <div class="subs-head__actions">
            <span class="sub-card__sub">
                {{ __('Refreshed :n ago', ['n' => $this->secondsSinceRefresh() < 60
                    ? $this->secondsSinceRefresh().'s'
                    : round($this->secondsSinceRefresh() / 60).'m']) }}
            </span>
            <button type="button" class="subs-btn" wire:click="refresh"
                wire:loading.attr="disabled" wire:target="refresh">
                <i class="bi bi-arrow-clockwise" wire:loading.class="spin" wire:target="refresh"></i>
                {{ __('Refresh') }}
            </button>
        </div>
    </div>

    <div class="subs-stats">
        <div class="subs-stat">
            <span class="subs-stat__label">{{ __('Online') }}</span>
            <span class="subs-stat__value">{{ number_format($stats['online']) }}</span>
            <span class="subs-stat__sub">{{ __('currently connected') }}</span>
        </div>
        <div class="subs-stat">
            <span class="subs-stat__label">{{ __('Download') }}</span>
            <span class="subs-stat__value">{{ bytes_human($stats['down']) }}</span>
            <span class="subs-stat__sub">{{ __('across open sessions') }}</span>
        </div>
        <div class="subs-stat">
            <span class="subs-stat__label">{{ __('Upload') }}</span>
            <span class="subs-stat__value">{{ bytes_human($stats['up']) }}</span>
            <span class="subs-stat__sub">{{ __('across open sessions') }}</span>
        </div>
        <div class="subs-stat">
            <span class="subs-stat__label">{{ __('Total traffic') }}</span>
            <span class="subs-stat__value">{{ bytes_human($stats['total']) }}</span>
            <span class="subs-stat__sub">{{ __('in + out · this session') }}</span>
        </div>
    </div>

    <div class="subs-toolbar">
        <div class="subs-pills">
            @foreach ([
                'all' => [__('All'), $counts['all']],
                'pppoe' => [__('PPPoE'), $counts['pppoe']],
                'hotspot' => [__('Hotspot'), $counts['hotspot']],
            ] as $key => [$label, $count])
                <button type="button" class="subs-pill {{ $tab === $key ? 'is-active' : '' }}"
                    wire:click="setTab('{{ $key }}')">
                    {{ $label }} <span>{{ number_format($count) }}</span>
                </button>
            @endforeach
        </div>

        <div class="subs-tools">
            <button type="button" class="subs-icon-btn" title="{{ __('Filter') }}">
                <i class="bi bi-funnel"></i>
            </button>
            <div class="subs-search">
                <i class="bi bi-search"></i>
                <input type="search" wire:model.live.debounce.300ms="search"
                    placeholder="{{ __('Search name, phone, username, IP...') }}">
            </div>
        </div>
    </div>

    <div class="subs-table-wrap">
        <table class="subs-table">
            <thead>
                <tr>
                    <th class="subs-table__check"></th>
                    <th>{{ __('Subscriber') }}</th>
                    <th>{{ __('Down · up') }}</th>
                    <th>{{ __('Device · IP') }}</th>
                    <th>{{ __('Router') }}</th>
                    <th>{{ __('Online for') }}</th>
                    <th>{{ __('Expiry') }}</th>
                    <th class="subs-table__end"></th>
                </tr>
            </thead>
            <tbody>
                @forelse ($rows as $row)
                    <tr class="subs-row {{ $row->url ? 'is-clickable' : '' }}" wire:key="{{ $row->key }}"
                        @if ($row->url)
                            x-data
                            x-on:click="
                                if ($event.target.closest('a, button, input, label')) return;
                                if (window.getSelection().toString() !== '') return;
                                $el.querySelector('[data-row-link]').click();
                            "
                        @endif>
                        <td class="subs-table__check">
                            <input type="checkbox" class="form-check-input" value="{{ $row->key }}">
                        </td>

                        <td>
                            <span class="subs-strong">
                                @if ($row->url)
                                    <a href="{{ $row->url }}" wire:navigate data-row-link
                                        class="text-reset text-decoration-none">{{ $row->label }}</a>
                                @else
                                    {{ $row->label }}
                                @endif
                            </span>
                            <span class="subs-sub">{{ $row->username }}</span>
                        </td>

                        <td class="sub-mono">
                            @if ($row->down === null)
                                {{-- PPPoE counters live on the interface, not the
                                     session — a zero here would read as "used
                                     nothing" rather than "not measured". --}}
                                <span class="subs-muted" title="{{ __('Not reported for PPPoE sessions') }}">—</span>
                            @else
                                <span class="sub-down">{{ bytes_human($row->down) }}</span>
                                <span class="text-secondary">·</span>
                                <span class="sub-up">{{ bytes_human($row->up) }}</span>
                            @endif
                        </td>

                        <td class="sub-mono">
                            {{ $row->mac ?: '—' }}
                            <span class="subs-sub">{{ $row->ip }}</span>
                        </td>

                        <td class="sub-mono">
                            {{ $row->router?->router_name ?: '—' }}
                            <span class="subs-sub">{{ $row->router?->managementAddress() }}</span>
                        </td>

                        <td>
                            {{ \Carbon\CarbonInterval::seconds($row->online_seconds)
                                ->cascade()->forHumans(['short' => true, 'parts' => 2]) }}
                        </td>

                        <td>
                            @if ($row->expires_at)
                                <span class="subs-strong {{ $row->expires_at->isPast() ? 'is-over' : '' }}">
                                    {{ $row->expires_at->format('M j, h:i A') }}
                                </span>
                                <span class="subs-sub">
                                    {{ $row->expires_at->isPast()
                                        ? __('expired')
                                        : __('in :when', ['when' => $row->expires_at->diffForHumans(null, true, true)]) }}
                                </span>
                            @else
                                <span class="subs-muted">—</span>
                            @endif
                        </td>

                        <td class="subs-table__end">
                            @if ($row->url)
                                <i class="bi bi-chevron-right subs-muted" style="font-size:0.8rem;"></i>
                            @endif
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="8" class="subs-empty">
                            <i class="bi bi-broadcast"></i>
                            @if ($search !== '')
                                {{ __('Nobody online matches ":term".', ['term' => $search]) }}
                            @else
                                {{ __('Nobody is connected right now.') }}
                            @endif
                        </td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>