<div class="flex flex-col gap-3 p-3" ...attributes>
    <div class="flex items-start justify-between gap-3">
        <div class="min-w-0">
            <h2 class="text-base font-bold text-gray-900 dark:text-gray-100">Telemetry Events</h2>
            <p class="mt-0.5 text-xs text-gray-500 dark:text-gray-300">Recent device events, warning signals, and processing state.</p>
        </div>
        <Button @icon="refresh" @size="xs" @onClick={{this.refreshEvents}} @isLoading={{this.loadEvents.isRunning}} />
    </div>

    <Layout::Resource::Tabular
        @resource="device-event"
        @title="Telemetry Events"
        @data={{this.events}}
        @columns={{this.columns}}
        @controller={{this}}
        @pagination={{false}}
        @withoutHeader={{true}}
        @tableWrapperClass="no-table-extra-spacing"
        @emptyStateComponent={{component
            "table/empty-state"
            variant="compact"
            icon="bolt"
            title="No telemetry events"
            description="Events appear after this device reports provider activity."
            primaryText="Refresh"
            primaryIcon="refresh"
            primaryAction=this.refreshEvents
        }}
    />
</div>
