<%= if @live_action in [:new, :edit] do %> <%= live_modal @socket, Bones73kWeb.UserManagement.FormComponent, id: @user.id || :new, title: @page_title, action: @live_action, user: @user, current_user: @current_user %> <% end %> <%= if @delete_user do %> <%= live_modal @socket, Bones73kWeb.UserManagement.DeleteComponent, id: @delete_user.id, title: "Delete User", delete_user: @delete_user, current_user: @current_user %> <% end %>

<%= icon_div @socket, "bi-people", [class: "icon baseline"] %> Listing Users

<%# filtering and new item creation %>
<%= live_patch to: Routes.user_management_index_path(@socket, :new, Enum.into(@query, [])), class: "btn btn-primary mb-3 mb-sm-0" do %> <%= icon_div @socket, "bi-person-plus", [class: "icon baseline me-1"] %> New User <% end %>
<%= form_for :sort, "#", [phx_change: "sort-by-change"], fn srt -> %> <%= label srt, :sort_by, class: "visually-hidden" %>
<%= icon_div @socket, "bi-arrow-down-up", [class: "icon is-left text-muted fs-5", style: "z-index:1001;"], [style: "padding: 1px;"] %> <%= Phoenix.HTML.Form.select srt, :sort_by, ["Email": "email", "Role": "role", "Created at": "inserted_at"], value: @query.sort_by, class: "form-select" %>
<% end %>
<%= form_for :filter, "#", [phx_change: "filter-change"], fn flt -> %> <%= label flt, :filter, class: "visually-hidden" %>
<%= icon_div @socket, "bi-funnel", [class: "icon is-left text-muted fs-5"] %> <%= if @query.filter != "" do %> <%= icon_div @socket, "bi-x-circle-fill", [class: "icon is-right text-primary fs-5"], [role: "img", aria_hidden: false, aria_label: "Clear filter", class: "cursor-pointer pe-auto", phx_click: "filter-clear"] %> <% end %> <%= text_input flt, :filter, name: "filter", value: @query.filter, class: "form-control", placeholder: "Filter users", aria_label: "Filter users" %>
<% end %>
<%# mobile data cards %>
<%= if !@page do %>
<% else %> <%= for user <- @page.entries do %>
Email
<%= user.email %>
Role
<%= user.role |> Atom.to_string() |> String.capitalize() %>
Created at
<%= dt_out(user.inserted_at) %>
Confirmed? >
<%= if Roles.can?(@current_user, user, :edit) do %> <%= live_patch to: Routes.user_management_index_path(@socket, :edit, user.id, Enum.into(@query, [])), class: "btn btn-outline-primary btn-sm text-nowrap" do %> <%= icon_div @socket, "bi-pencil", [class: "icon baseline", style: "margin-right:0.125rem;"] %> Edit <% end %> <% end %> <%= if Roles.can?(@current_user, user, :delete) do %> <% end %>
<% end %> <% end %>
<%# non-mobile main data table %>
<%= if !@page do %> <% else %> <%= for user <- @page.entries do %> <% end %> <% end %>
Email <%= if @query.sort_by == "email", do: icon_div @socket, (@query.sort_order == "desc" && "bi-sort-up-alt" || "bi-sort-down-alt"), [class: "icon baseline ms-1"] %> Role <%= if @query.sort_by == "role", do: icon_div @socket, (@query.sort_order == "desc" && "bi-sort-up-alt" || "bi-sort-down-alt"), [class: "icon baseline ms-1"] %> Created at <%= if @query.sort_by == "inserted_at", do: icon_div @socket, (@query.sort_order == "desc" && "bi-sort-up-alt" || "bi-sort-down-alt"), [class: "icon baseline ms-1"] %> Confirmed?
<%= user.email %> <%= user.role |> Atom.to_string() |> String.capitalize() %> <%= dt_out(user.inserted_at) %> > <%= if Roles.can?(@current_user, user, :edit) do %> <%= live_patch to: Routes.user_management_index_path(@socket, :edit, user.id, Enum.into(@query, [])), class: "btn btn-outline-primary btn-sm text-nowrap" do %> <%= icon_div @socket, "bi-pencil", [class: "icon baseline", style: "margin-right:0.125rem;"] %> Edit <% end %> <% end %> <%= if Roles.can?(@current_user, user, :delete) do %> <% end %>
<%# pagination interface %> <%= if @page do %>
<%#
%> <%# items per page selector %>
<%= form_for :page_size, "#", [phx_change: "page-size-change"], fn pgsz -> %> <%= select pgsz, :page_size, [10, 15, 20, 30, 50, 100] |> Enum.map(fn n -> {"#{n} per page", n} end), value: @query.page_size, id: "table_page_size_page_size", name: "page_size", class: "form-select" %> <% end %> <%= @page.total_entries %> total
<%# main pagination %>
<% end %>