<Layouts.authenticated
  flash={@flash}
  current_scope={@current_scope}
  current_organization={nil}
  timezone={@timezone}
>
  <.header>
    {@page_title}
    <:actions>
      <.button navigate={~p"/orgs/new"} variant="primary">
        <.icon name="hero-plus" class="h-5 w-5" /> New Organization
      </.button>
    </:actions>
  </.header>

  <div :if={@organizations != []} class="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
    <.link
      :for={org <- @organizations}
      navigate={~p"/orgs/#{org.slug}"}
      class="relative overflow-hidden rounded-lg border border-zinc-200 bg-white p-6 shadow-sm hover:shadow-md transition-shadow dark:border-zinc-800 dark:bg-zinc-900 cursor-pointer"
    >
      <h2 class="text-xl font-semibold text-zinc-900 dark:text-zinc-100">{org.name}</h2>
      <p class="mt-2 text-sm text-zinc-600 dark:text-zinc-400">
        {Enum.find(org.memberships, &(&1.user_id == @current_scope.user.id)).role
        |> to_string()
        |> String.capitalize()}
      </p>
    </.link>
  </div>

  <div :if={@organizations == []} class="text-center py-16">
    <.icon name="hero-building-office" class="mx-auto h-12 w-12 text-zinc-400 dark:text-zinc-600" />
    <h3 class="mt-4 text-lg font-semibold text-zinc-900 dark:text-zinc-100">No organizations</h3>
    <p class="mt-2 text-sm text-zinc-600 dark:text-zinc-400">
      Get started by creating a new organization.
    </p>
    <div class="mt-6">
      <.button navigate={~p"/orgs/new"} variant="primary">
        <.icon name="hero-plus" class="h-5 w-5" /> New Organization
      </.button>
    </div>
  </div>
</Layouts.authenticated>
