<Layouts.admin flash={@flash}>
  <div class="space-y-6">
    <div>
      <h1 class="text-2xl font-bold text-zinc-900">All Organizations</h1>
      <p class="text-zinc-600">Manage organizations</p>
    </div>

    <div class="bg-white rounded-lg border border-zinc-200">
      <.table id="organizations" rows={@organizations}>
        <:col :let={org} label="Name">{org.name}</:col>
        <:col :let={org} label="Slug">{org.slug}</:col>
        <:col :let={org} label="Members">{length(org.memberships)}</:col>
        <:col :let={org} label="Created">{Calendar.strftime(org.inserted_at, "%Y-%m-%d")}</:col>
        <:col :let={org} label="">
          <button
            phx-click="delete_org"
            phx-value-id={org.id}
            data-confirm="Are you sure? This will delete all sites, device, and data for this organization."
            class="text-sm text-red-600 hover:text-red-800"
          >
            Delete
          </button>
        </:col>
      </.table>
    </div>
  </div>
</Layouts.admin>
