<.header> {gettext("Members")} <:actions> <.button variant="primary" navigate={~p"/members/new"}> <.icon name="hero-plus" /> {gettext("New Member")} <.live_component module={MvWeb.Components.SearchBarComponent} id="search-bar" query={@query} placeholder={gettext("Search...")} /> <.table id="members" rows={@members} row_click={fn member -> JS.navigate(~p"/members/#{member}") end} > <:col :let={member} label={ ~H""" <.input type="checkbox" name="select_all" phx-click="select_all" checked={Enum.sort(@selected_members) == Enum.map(@members, & &1.id) |> Enum.sort()} aria-label={gettext("Select all members")} role="checkbox" /> """ } > <.input type="checkbox" name={member.id} phx-click="select_member" phx-value-id={member.id} checked={member.id in @selected_members} phx-capture-click phx-stop-propagation aria-label={gettext("Select member")} role="checkbox" /> <:col :let={member} label={ sort_button(%{ field: :first_name, label: gettext("Name"), sort_field: @sort_field, sort_order: @sort_order }) } > {member.first_name} {member.last_name} <:col :let={member} label={gettext("Email")}>{member.email} <:col :let={member} label={gettext("Street")}>{member.street} <:col :let={member} label={gettext("House Number")}>{member.house_number} <:col :let={member} label={gettext("Postal Code")}>{member.postal_code} <:col :let={member} label={gettext("City")}>{member.city} <:col :let={member} label={gettext("Phone Number")}>{member.phone_number} <:col :let={member} label={gettext("Join Date")}>{member.join_date} <:action :let={member}> <.link navigate={~p"/members/#{member}/edit"}>{gettext("Edit")} <:action :let={member}> <.link phx-click={JS.push("delete", value: %{id: member.id}) |> hide("#row-#{member.id}")} data-confirm={gettext("Are you sure?")} > {gettext("Delete")}