<.live_component
  module={Table}
  headers={[id: "ID", name: "Name", lorem: "Lorem", actions: ""]}
  filterable={[id: [odd: "Odd IDs", even: "Even IDs"]]}
  sortable={[:id, :name]}
  mobile_hidden={[:lorem, :actions]}
>
  <%= for i <- 1..5 do %>
    <.table_row>
      <.table_cell>
        <%= i %>
      </.table_cell>
      <.table_cell>
        record #<%= i %>
      </.table_cell>
      <.table_cell class="hidden md:table-cell">
        ipsum dolor sit amet
      </.table_cell>
      <.table_button_cell class="hidden md:table-cell">
        <.table_button icon="fas fa-pencil-alt" />
        <.table_button icon="fas fa-trash text-danger-txt" class="hover:bg-danger-bg-hover" />
      </.table_button_cell>
    </.table_row>
  <% end %>
</.live_component>

<.live_component module={Table} selectable={:checkbox}>
  <%= for i <- 1..5 do %>
    <.table_row selectable={:checkbox} select_id={i} selected={i in [1, 3]}>
      <.table_cell>
        <%= i %>
      </.table_cell>
      <.table_cell>
        record #<%= i %>
      </.table_cell>
      <.table_cell>
        ipsum dolor sit amet
      </.table_cell>
    </.table_row>
  <% end %>
</.live_component>

<.live_component module={Table} disabled selectable={:checkbox} selected_count={0}>
  <%= for i <- 1..5 do %>
    <.table_row disabled={true} selectable={:checkbox} select_id={i} selected={i in [1, 3]}>
      <.table_cell>
        <%= i %>
      </.table_cell>
      <.table_cell>
        record #<%= i %>
      </.table_cell>
      <.table_cell>
        ipsum dolor sit amet
      </.table_cell>
    </.table_row>
  <% end %>
</.live_component>

<.live_component module={Table} selectable={:radio}>
  <%= for i <- 1..5 do %>
    <.table_row select_id={i} selectable={:radio}>
      <.table_cell>
        <%= i %>
      </.table_cell>
      <.table_cell>
        record #<%= i %>
      </.table_cell>
      <.table_cell>
        ipsum dolor sit amet
      </.table_cell>
    </.table_row>
  <% end %>
</.live_component>

<.live_component
  module={Table}
  headers={[name: "Product", quantity: %{label: "Quantity", type: :number}, price: %{label: "Price", type: :number}]}
>
  <.table_row>
    <.table_cell>HONEY SWEET BBQ SAUCE</.table_cell>
    <.table_cell class="text-right">12</.table_cell>
    <.table_cell class="text-right">9.00</.table_cell>
  </.table_row>
  <.table_row>
    <.table_cell>Instant Pot Duo 7-in-1</.table_cell>
    <.table_cell class="text-right">1</.table_cell>
    <.table_cell class="text-right">126.57</.table_cell>
  </.table_row>
</.live_component>