Table

<.table>
  <.table_head>
    <:col>Name</:col>
    <:col>Email</:col>
    <:col>Role</:col>
  </.table_head>
  <.table_body>
    <.table_row :for={user <- @users}>
      <:cell><%= user.name %></:cell>
      <:cell><%= user.email %></:cell>
      <:cell><%= user.role %></:cell>
    </.table_row>
  </.table_body>
</.table>

<.table>
  <.table_head>
    <:col>User</:col>
    <:col>Department</:col>
    <:col>Last Login</:col>
    <:col>Status</:col>
    <:col></:col>
  </.table_head>
  <.table_body>
    <.table_row :for={user <- @users}>
      <:cell class="w-full">
        <div class="flex items-center gap-3">
          <img src={user.avatar} class="size-9 rounded-full" />
          <div class="flex flex-col gap-0.5">
            <span class="font-semibold">{user.name}</span>
            <span class="text-foreground-softer text-sm">{user.role}</span>
          </div>
        </div>
      </:cell>
      <:cell>{user.department}</:cell>
      <:cell class="text-foreground-softer">{user.last_login}</:cell>
      <:cell>
        <.badge color={if user.status == "Active", do: "success", else: "warning"}>
          {user.status}
        </.badge>
      </:cell>
      <:cell>
        <.dropdown>
          <:toggle>
            <.button size="icon-sm" variant="ghost">
              <.icon name="hero-ellipsis-horizontal" class="icon" />
            </.button>
          </:toggle>
          <.dropdown_button><.icon name="hero-pencil" class="icon" /> Edit</.dropdown_button>
          <.dropdown_button><.icon name="hero-eye" class="icon" /> View</.dropdown_button>
          <.dropdown_button class="text-danger data-highlighted:bg-danger-soft/50">
            <.icon name="hero-trash" class="icon" /> Delete
          </.dropdown_button>
        </.dropdown>
      </:cell>
    </.table_row>
  </.table_body>
</.table>

<.table>
  <.table_head>
    <:col
      phx-click="sort"
      phx-value-column="name"
      class="cursor-pointer hover:bg-gray-50"
      data-sort="none"
    >
      <div class="flex items-center gap-1">
        Name
        <.icon name="hero-chevron-up-down" class="size-4 text-foreground-softer in-data-[sort=none]:block hidden" />
        <.icon name="hero-chevron-up" class="size-3 text-foreground-softer in-data-[sort=asc]:block hidden" />
        <.icon name="hero-chevron-down" class="size-3 text-foreground-softer in-data-[sort=desc]:block hidden" />
      </div>
    </:col>
    <:col
      phx-click="sort"
      phx-value-column="email"
      class="cursor-pointer hover:bg-gray-50"
      data-sort="asc"
    >
      <div class="flex items-center gap-1">
        Email
        <.icon name="hero-chevron-up-down" class="size-4 text-foreground-softer in-data-[sort=none]:block hidden" />
        <.icon name="hero-chevron-up" class="size-3 text-foreground-softer in-data-[sort=asc]:block hidden" />
        <.icon name="hero-chevron-down" class="size-3 text-foreground-softer in-data-[sort=desc]:block hidden" />
      </div>
    </:col>
    <:col
      phx-click="sort"
      phx-value-column="role"
      class="cursor-pointer hover:bg-gray-50"
      data-sort="desc"
    >
      <div class="flex items-center gap-1">
        Role
        <.icon name="hero-chevron-up-down" class="size-4 text-foreground-softer in-data-[sort=none]:block hidden" />
        <.icon name="hero-chevron-up" class="size-3 text-foreground-softer in-data-[sort=asc]:block hidden" />
        <.icon name="hero-chevron-down" class="size-3 text-foreground-softer in-data-[sort=desc]:block hidden" />
      </div>
    </:col>
    <:col>Status</:col>
  </.table_head>
  <.table_body>
    <.table_row :for={user <- @users}>
      <:cell><%= user.name %></:cell>
      <:cell><%= user.email %></:cell>
      <:cell><%= user.role %></:cell>
      <:cell>
        <.badge color="green">Active</.badge>
      </:cell>
    </.table_row>
  </.table_body>
</.table>

<.table>
  <.table_head>
    <:col>Lead</:col>
    <:col>Stage</:col>
    <:col>Contact</:col>
  </.table_head>
  <.table_body>
    <.table_row
      :for={lead <- @leads}
      id={"lead-#{lead.id}"}
      phx-click="remove-lead"
      phx-value-id={lead.id}
      class="cursor-pointer hover:bg-accent/50"
    >
      <:cell><%= lead.name %></:cell>
      <:cell><%= lead.stage %></:cell>
      <:cell><%= lead.contact %></:cell>
    </.table_row>
  </.table_body>
</.table>

<.table>
  <.table_head>
    <:col>Name</:col>
    <:col>Email</:col>
    <:col>Role</:col>
    <:col>Status</:col>
  </.table_head>
  <.table_body>
    <.table_row>
      <:cell colspan="4" class="text-center py-8">
        <div class="flex flex-col items-center gap-3">
          <.icon name="hero-users" class="size-8 text-foreground-softest" />
          <div>
            <h3 class="font-medium text-foreground">No users found</h3>
            <p class="text-sm text-foreground-softer">Get started by adding your first user.</p>
          </div>
          <.button size="sm">Add User</.button>
        </div>
      </:cell>
    </.table_row>
  </.table_body>
</.table>

<.table>
  <.table_head>
    <:col>Name</:col>
    <:col>Email</:col>
    <:col>Role</:col>
    <:col>Status</:col>
  </.table_head>
  <.table_body>
    <.table_row :for={_ <- 1..5}>
      <:cell>
        <div class="flex items-center gap-3">
          <div class="w-8 h-8 bg-accent rounded-full animate-pulse"></div>
          <div class="h-4 bg-accent rounded animate-pulse w-32"></div>
        </div>
      </:cell>
      <:cell>
        <div class="h-4 bg-accent rounded animate-pulse w-40"></div>
      </:cell>
      <:cell>
        <div class="h-4 bg-accent rounded animate-pulse w-24"></div>
      </:cell>
      <:cell>
        <div class="h-6 bg-accent rounded animate-pulse w-16"></div>
      </:cell>
    </.table_row>
  </.table_body>
</.table>

<.table class="text-sm">
  <.table_head>
    <:col class="py-2">Name</:col>
    <:col class="py-2">Email</:col>
    <:col class="py-2">Role</:col>
    <:col class="py-2">Status</:col>
  </.table_head>
  <.table_body>
    <.table_row :for={user <- @users}>
      <:cell class="py-2">
        <div class="flex items-center gap-2">
          <img src={user.avatar} class="size-6 rounded-full" />
          <span class="font-medium"><%= user.name %></span>
        </div>
      </:cell>
      <:cell class="py-2"><%= user.email %></:cell>
      <:cell class="py-2"><%= user.role %></:cell>
      <:cell class="py-2">
        <.badge size="sm" color="green"><%= user.status %></.badge>
      </:cell>
    </.table_row>
  </.table_body>
</.table>