<Layouts.app flash={@flash} current_user={@current_user}>
  <.header>
    {gettext("Members")}
    <:actions>
      <.button variant="primary" navigate={~p"/members/new"}>
        <.icon name="hero-plus" /> {gettext("New Member")}
      </.button>
    </:actions>
  </.header>

  <.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}
    dynamic_cols={@dynamic_cols}
    sort_field={@sort_field}
    sort_order={@sort_order}
  >
    
<!-- <:col :let={member} label="Id">{member.id}</:col> -->
    <: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>
    <:col
      :let={member}
      label={
        ~H"""
        <.live_component
          module={MvWeb.Components.SortHeaderComponent}
          id={:sort_first_name}
          field={:first_name}
          label={gettext("First name")}
          sort_field={@sort_field}
          sort_order={@sort_order}
        />
        """
      }
    >
      {member.first_name} {member.last_name}
    </:col>
    <:col :if={:email in @member_fields_visible} :let={member} label={
        ~H"""
        <.live_component
          module={MvWeb.Components.SortHeaderComponent}
          id={:sort_email}
          field={:email}
          label={gettext("Email")}
          sort_field={@sort_field}
          sort_order={@sort_order}
        />
        """
      }>
      {member.email}
    </:col>
    <:col :if={:street in @member_fields_visible} :let={member} label={
        ~H"""
        <.live_component
          module={MvWeb.Components.SortHeaderComponent}
          id={:sort_street}
          field={:street}
          label={gettext("Street")}
          sort_field={@sort_field}
          sort_order={@sort_order}
        />
        """
      }>
      {member.street}
    </:col>
    <:col :if={:house_number in @member_fields_visible} :let={member} label={
        ~H"""
        <.live_component
          module={MvWeb.Components.SortHeaderComponent}
          id={:sort_house_number}
          field={:house_number}
          label={gettext("House Number")}
          sort_field={@sort_field}
          sort_order={@sort_order}
        />
        """
      }>
      {member.house_number}
    </:col>
    <:col :if={:postal_code in @member_fields_visible} :let={member} label={
        ~H"""
        <.live_component
          module={MvWeb.Components.SortHeaderComponent}
          id={:sort_postal_code}
          field={:postal_code}
          label={gettext("Postal Code")}
          sort_field={@sort_field}
          sort_order={@sort_order}
        />
        """
      }>
      {member.postal_code}
    </:col>
    <:col :if={:city in @member_fields_visible} :let={member} label={
        ~H"""
        <.live_component
          module={MvWeb.Components.SortHeaderComponent}
          id={:sort_city}
          field={:city}
          label={gettext("City")}
          sort_field={@sort_field}
          sort_order={@sort_order}
        />
        """
      }>
      {member.city}
    </:col>
    <:col :if={:phone_number in @member_fields_visible} :let={member} label={
        ~H"""
        <.live_component
          module={MvWeb.Components.SortHeaderComponent}
          id={:sort_phone_number}
          field={:phone_number}
          label={gettext("Phone Number")}
          sort_field={@sort_field}
          sort_order={@sort_order}
        />
        """
      }>
      {member.phone_number}
    </:col>
    <:col :if={:join_date in @member_fields_visible} :let={member} label={
        ~H"""
        <.live_component
          module={MvWeb.Components.SortHeaderComponent}
          id={:sort_join_date}
          field={:join_date}
          label={gettext("Join Date")}
          sort_field={@sort_field}
          sort_order={@sort_order}
        />
        """
      }>
      {member.join_date}
    </:col>
    <:action :let={member}>
      <div class="sr-only">
        <.link navigate={~p"/members/#{member}"}>{gettext("Show")}</.link>
      </div>

      <.link navigate={~p"/members/#{member}/edit"}>{gettext("Edit")}</.link>
    </:action>

    <: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")}
      </.link>
    </:action>
  </.table>
</Layouts.app>