<% filter = @filter || "" %>
<% sort = @sort || %{by: :number, dir: :asc} %>
<% selected_ids = @selected_ids || MapSet.new([1002]) %>
<% page = @page || %{number: 1, total: 4, prev_path: nil, next_path: "/orders?page=2"} %>
<% orders = @orders || [
%{id: 1001, number: "ORD-1001", customer: "Mira Chen", status: :paid, total: "$240.00"},
%{id: 1002, number: "ORD-1002", customer: "Ari Patel", status: :pending, total: "$88.50"},
%{id: 1003, number: "ORD-1003", customer: "Levi Buzolic", status: :paid, total: "$149.00"}
] %>
<div class="space-y-4">
<form phx-change="filter" phx-submit="filter" class="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
<.input
id="orders-filter"
name="q"
value={filter}
placeholder="Filter orders..."
class="sm:max-w-xs"
/>
<.button type="submit" variant={:outline} size={:sm}>Apply filters</.button>
</form>
<.table>
<.table_caption>
Showing page {page.number} of {page.total}. Sorting and filtering stay in LiveView assigns.
</.table_caption>
<.table_header>
<.table_row>
<.table_head class="w-10">
<.checkbox id="select-all-orders" name="select_all" aria-label="Select all orders" />
</.table_head>
<.table_head>
<.button
type="button"
variant={:ghost}
size={:sm}
class="-ml-3"
phx-click="sort"
phx-value-by="number"
>
Order
<.icon :if={sort.by == :number && sort.dir == :asc} name="chevron-up" class="size-3" />
<.icon :if={sort.by == :number && sort.dir == :desc} name="chevron-down" class="size-3" />
</.button>
</.table_head>
<.table_head>Customer</.table_head>
<.table_head>Status</.table_head>
<.table_head class="text-right">Total</.table_head>
<.table_head class="w-10"><span class="sr-only">Actions</span></.table_head>
</.table_row>
</.table_header>
<.table_body>
<.table_row :for={order <- orders} state={if MapSet.member?(selected_ids, order.id), do: "selected"}>
<.table_cell>
<.checkbox
id={"select-order-" <>> to_string(order.id)}
name="selected_order_ids[]"
value={to_string(order.id)}
checked={MapSet.member?(selected_ids, order.id)}
aria-label={"Select " <> order.number}
/>
</.table_cell>
<.table_cell class="font-medium">{order.number}</.table_cell>
<.table_cell>{order.customer}</.table_cell>
<.table_cell>
<.badge color={if(order.status == :paid, do: :success, else: :warning)} variant={:outline}>
{Phoenix.Naming.humanize(order.status)}
</.badge>
</.table_cell>
<.table_cell class="text-right">{order.total}</.table_cell>
<.table_cell>
<.button
type="button"
variant={:ghost}
size={:icon}
aria-label={"Open actions for " <>> order.number}
>
<.icon name="ellipsis-vertical" class="size-4" />
</.button>
</.table_cell>
</.table_row>
</.table_body>
</.table>
<.pagination>
<.pagination_content>
<.pagination_item>
<.pagination_previous href={page.prev_path || "#"} aria-disabled={is_nil(page.prev_path)} />
</.pagination_item>
<.pagination_item>
<.pagination_link href="#" active>{page.number}</.pagination_link>
</.pagination_item>
<.pagination_item><.pagination_ellipsis /></.pagination_item>
<.pagination_item>
<.pagination_link href={"/orders?page=" <>> to_string(page.total)}>{page.total}</.pagination_link>
</.pagination_item>
<.pagination_item>
<.pagination_next href={page.next_path || "#"} aria-disabled={is_nil(page.next_path)} />
</.pagination_item>
</.pagination_content>
</.pagination>
</div>