<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">Sensor Inventory</h2>
            <p class="mt-0.5 text-xs text-gray-500 dark:text-gray-300">Recent sensor readings and health for this device.</p>
        </div>
        <Button @icon="refresh" @size="xs" @onClick={{this.refreshSensors}} @isLoading={{this.loadSensors.isRunning}} />
    </div>

    <Layout::Resource::Tabular
        @resource="sensor"
        @title="Device Sensors"
        @data={{this.sensors}}
        @columns={{this.columns}}
        @controller={{this}}
        @pagination={{false}}
        @withoutHeader={{true}}
        @tableWrapperClass="no-table-extra-spacing"
        @emptyStateComponent={{component
            "table/empty-state"
            variant="compact"
            icon="gauge-high"
            title="No sensors connected"
            description="Sensors appear here after provider telemetry links them to this device."
            primaryText="Refresh"
            primaryIcon="refresh"
            primaryAction=this.refreshSensors
        }}
    />
</div>
