<div class="flex flex-col gap-3 p-3">
    <div class="flex flex-col gap-1">
        <h2 class="text-base font-bold text-gray-900 dark:text-gray-100">Sensor Inventory + Health</h2>
        <p class="text-xs text-gray-500 dark:text-gray-300">Readings, thresholds, and reporting health for this device.</p>
    </div>

    <section class="grid grid-cols-1 gap-2 sm:grid-cols-2 lg:grid-cols-4">
        {{#each this.metrics as |metric|}}
            <div class="fleet-ops-widget fleet-ops-kpi-tile fleetops-connectivity-kpi-tile {{metric.accentClass}} relative min-h-[82px] overflow-hidden rounded-md border bg-white shadow-sm dark:bg-gray-800">
                <div class="flex h-full items-start justify-between gap-2 p-3">
                    <div class="min-w-0">
                        <div class="truncate text-[10px] font-bold uppercase text-gray-500 dark:text-gray-400">{{metric.label}}</div>
                        <div class="mt-1 text-xl font-extrabold leading-none text-gray-900 dark:text-gray-50">{{metric.value}}</div>
                    </div>
                    <div class="fleetops-connectivity-kpi-icon flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-md text-[13px]">
                        <FaIcon @icon={{metric.icon}} />
                    </div>
                </div>
            </div>
        {{/each}}
    </section>

    <section class="overflow-hidden rounded-md border border-gray-200 bg-white shadow-sm dark:border-gray-700 dark:bg-gray-800">
        <div class="fleetops-provider-connections-header border-b border-gray-200 px-3 py-2 dark:border-gray-700">
            <div>
                <h3 class="text-sm font-bold text-gray-900 dark:text-gray-100">Device Sensors</h3>
                <p class="mt-1 text-xs text-gray-500 dark:text-gray-300">Filter by type, status, and last reading.</p>
            </div>
            <div class="fleetops-provider-connections-actions flex min-w-0 flex-wrap items-center gap-2 lg:ml-auto lg:flex-nowrap lg:justify-end">
                <Layout::Resource::TabularActions
                    @title="Device Sensors"
                    @searchQuery={{this.sensors_query}}
                    @onSearch={{perform this.searchTask}}
                    @columns={{this.columns}}
                    @page={{this.sensors_page}}
                    @onPageChange={{fn (mut this.sensors_page)}}
                    @actionButtons={{this.actionButtons}}
                    @bulkActions={{this.bulkActions}}
                    @controller={{this}}
                    @searchInputClass="fleetops-provider-connections-search"
                    @filterPickerButtonClass="fleetops-provider-connections-action-button"
                    @columnPickerButtonClass="fleetops-provider-connections-action-button"
                    @filterPickerSize="sm"
                    @columnPickerSize="sm"
                />
            </div>
        </div>

        <Layout::Resource::Tabular
            @resource="sensor"
            @title="Device Sensors"
            @data={{@model}}
            @columns={{this.columns}}
            @page={{this.sensors_page}}
            @onPageChange={{fn (mut this.sensors_page)}}
            @controller={{this}}
            @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."
                filteredTitle="No sensors match your filters"
                filteredDescription="Adjust the search or filters to find another sensor."
                primaryText="Refresh"
                primaryIcon="refresh"
                primaryAction=this.refresh
            }}
        />
    </section>
</div>
