<.table
  id="table-single-cell-types"
  rows={[%{id: 1, label: "Row One"}, %{id: 2, label: "Row Two"}]}
>
  <:col :let={i} label="Text">
    <.text_cell label={i.label} sublabel="(Internal)" icon="alert_circle" />
  </:col>
  <:col :let={i} label="Text and description">
    <.text_and_description_cell label={i.label} description="An internal identifier" icon="alert_circle" />
  </:col>
  <:col :let={i} label="Text and description with image">
    <.text_and_description_cell label={i.label} description="Look, an image!" secondary_description="So pretty.">
      <:image>
        <img src="/images/tuist_social.jpeg" />
      </:image>
    </.text_and_description_cell>
  </:col>
  <:col :let={i} label="Tag">
    <.tag_cell label={i.label} icon="category" />
  </:col>
  <:col :let={i} label="Badge">
    <.badge_cell label={i.label} color="warning" style="light-fill" />
  </:col>
  <:col :let={i} label="Status badge">
    <.status_badge_cell label={i.label} status="success" />
  </:col>
  <:col :let={i} label="Button">
    <.button_cell>
  <:button>
  <.button label={i.label} variant="secondary"/>
  </:button>
  </.button_cell>
  </:col>
  <:col :let={i} label="Button with multiple buttons">
    <.button_cell>
      <:button>
        <.button variant="secondary" icon_only><.pencil /></.button>
      </:button>
      <:button>
        <.button variant="secondary" icon_only><.trash /></.button>
      </:button>
    </.button_cell>
  </:col>
  <:col :let={i} label="Link button">
    <.link_button_cell label={i.label} variant="secondary" underline={true}>
      <:icon_left>
        <.chevron_left />
      </:icon_left>
    </.link_button_cell>
  </:col>
  <:col :let={i} label="Time">
    <.time_cell time={~U[2023-01-01 12:00:00Z]} />
  </:col>
</.table>

<.table
  id="table-single-example"
  rows={[%{command: "test TuistKitAcceptanceTests", status: "Success", duration: "5s", created_at: "2 hours ago", ran_by: "CI"}]}
>
  <:col :let={i} label="Command">
    <.text_cell label={i.command} />
  </:col>
  <:col :let={i} label="Status">
    <.status_badge_cell label={i.status} status={String.downcase(i.status)} />
  </:col>
  <:col :let={i} label="Ran by">
    <.badge_cell label={i.ran_by} color="information" style="light-fill" />
  </:col>
  <:col :let={i} label="Duration" icon="square_rounded_arrow_down">
    <.text_cell label={i.duration} />
  </:col>
  <:col :let={i} label="Created at">
    <.text_cell sublabel={i.created_at} />
  </:col>
</.table>

<.table
  id="table-single-expandable-rows"
  rows={[%{id: "task-1", type: "Clang", cache_key: "0-9wL-pE6ciuBQsAiC...", dependencies: [%{description: "CAS output swift dependencies: 0311864a9d4c1dsf1sa... (in target \"App\" from project \"App\")"}, %{description: "CAS output swift dependencies: 0311864a9d4c1dsf1sa... (in target \"App\" from project \"App\")"}], expandable: true, hit: "Remote", task: "GeneratedAssetSymbols.swift"}, %{id: "task-2", type: "Swift", cache_key: "0-9wL-pE6ciuBQsAiC...", dependencies: [], expandable: true, hit: "Local", task: "CompileSwiftSources.swift"}, %{id: "task-3", type: "Clang", cache_key: "0-213dadsdasdfaBOs...", expandable: false, hit: "Missed", task: "LinkBinary"}]}
  row_expandable={fn row -> Map.get(row, :expandable, false) end}
  expanded_rows={["task-1"]}
>
  <:col :let={i} label="Task">
    <.text_cell label={i.task} />
  </:col>
  <:col :let={i} label="Hit">
    <.badge_cell
      label={i.hit}
      color={case i.hit do
        "Remote" -> "primary"
        "Local" -> "success"
        "Missed" -> "warning"
      end}
      style="light-fill"
    />
  </:col>
  <:expanded_content :let={row}>
    <div :for={dep <- row.dependencies} style="margin-bottom: 12px; padding: 12px; background-color: var(--color-neutral-background-primary); border-radius: 6px;">
      <div style="color: var(--color-neutral-text-secondary); font-size: 14px;">
        {dep.description}
      </div>
    </div>
  </:expanded_content>
</.table>