<script lang="ts">
  import BLEListItem from "./BLEListItem.svelte";
  import { pairedDevices } from "../lib/store";
</script>

<div class="bg-white shadow shadow-slate-300 rounded-lg border border-slate-100 overflow-hidden">
  <div class="p-6 pb-4 border-b border-slate-100">
    <h2 class="text-xl font-bold text-slate-800">Verfügbare Geräte</h2>
  </div>
  
  <div class="flex flex-col">
    {#if $pairedDevices.length > 0}
      {#each $pairedDevices as device (device.id)}
        <BLEListItem {device} />
      {/each}
    {:else}
      <div class="px-6 py-8 text-center text-slate-500 text-sm">
        Keine gepairten Geräte gefunden. Bitte pairen Sie zunächst ein Gerät.
      </div>
    {/if}
  </div>
</div>