<Layouts.app flash={@flash} current_user={@current_user}>
  <.header>
    {gettext("Listing Users")}
    <:actions>
      <%= if can?(@current_user, :create, Mv.Accounts.User) do %>
        <.button variant="primary" navigate={~p"/users/new"} data-testid="user-new">
          <.icon name="hero-plus" /> {gettext("New User")}
        </.button>
      <% end %>
    </:actions>
  </.header>

  <.table
    id="users"
    rows={@users}
    row_id={fn user -> "row-#{user.id}" end}
    row_click={fn user -> JS.navigate(~p"/users/#{user}") end}
    sort_field={@sort_field}
    sort_order={@sort_order}
  >
    <:col
      :let={user}
      label={
        ~H"""
        <.input
          type="checkbox"
          name="select_all"
          phx-click="select_all"
          checked={Enum.sort(@selected_users) == Enum.map(@users, &to_string(&1.id)) |> Enum.sort()}
          aria-label={gettext("Select all users")}
          role="checkbox"
        />
        """
      }
    >
      <.input
        type="checkbox"
        name={to_string(user.id)}
        phx-click="select_user"
        phx-value-id={to_string(user.id)}
        checked={to_string(user.id) in @selected_users}
        phx-capture-click
        phx-stop-propagation
        aria-label={gettext("Select user")}
        role="checkbox"
      />
    </:col>
    <:col
      :let={user}
      sort_field={:email}
      label={
        sort_button(%{
          field: :email,
          label: gettext("Email"),
          sort_field: @sort_field,
          sort_order: @sort_order
        })
      }
    >
      {user.email}
    </:col>
    <:col :let={user} label={gettext("Role")}>
      {user.role.name}
    </:col>
    <:col :let={user} label={gettext("Linked Member")}>
      <%= if user.member do %>
        {MvWeb.Helpers.MemberHelpers.display_name(user.member)}
      <% else %>
        <span class="text-base-content/70">{gettext("No member linked")}</span>
      <% end %>
    </:col>
    <:col :let={user} label={gettext("Password")}>
      <%= if MvWeb.Helpers.UserHelpers.has_password?(user) do %>
        <span>{gettext("Enabled")}</span>
      <% else %>
        <span class="text-base-content/70">—</span>
      <% end %>
    </:col>
    <:col :let={user} label={gettext("OIDC")}>
      <%= if MvWeb.Helpers.UserHelpers.has_oidc?(user) do %>
        <span>{gettext("Linked")}</span>
      <% else %>
        <span class="text-base-content/70">—</span>
      <% end %>
    </:col>

    <:action :let={user}>
      <div class="sr-only">
        <.link navigate={~p"/users/#{user}"}>{gettext("Show")}</.link>
      </div>

      <%= if can?(@current_user, :update, user) do %>
        <.link navigate={~p"/users/#{user}/edit"} data-testid="user-edit">
          {gettext("Edit")}
        </.link>
      <% end %>
    </:action>

    <:action :let={user}>
      <%= if can?(@current_user, :destroy, user) do %>
        <.link
          phx-click={JS.push("delete", value: %{id: user.id}) |> hide("#row-#{user.id}")}
          data-confirm={gettext("Are you sure?")}
          data-testid="user-delete"
        >
          {gettext("Delete")}
        </.link>
      <% end %>
    </:action>
  </.table>
</Layouts.app>
