<div
  id={"#{@id}"}
  class="py-4 px-2"
  phx-hook="MavuListColumnChooserHook"
  x-data="mavu_list_column_chooser_component()"
>
  <.form let={f} for={:fdata} url="#" phx_submit="list.set_columns" phx_target={@target}>
    <%= hidden_input(f, :col_order) %>

    <div x-ref="items">
      <%= for col_f <-  inputs_for(f, :columns, default: @columns) do %>
        <div class="border rounded my-1 px-2 py-1 flex space-x-2  text-sm">
          <div>
            <%= if col_f.data.editable  do %>
              <%= checkbox(col_f, :visible) %>
            <% else %>
              <%= hidden_input(col_f, :visible) %>
              <%= checkbox(col_f, :visible, disabled: true) %>
            <% end %>
          </div>
          <label for={input_id(col_f, :visible)} class="flex-auto ">
            <%= MavuList.get_label(col_f.data, col_f.data.name) %>
          </label>
          <div class="flex items-center self-stretch drag-handle cursor-grab">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              class="w-4 h-4 opacity-20"
              viewBox="0 0 20 20"
              fill="currentColor"
            >
              <path d="M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z" />
            </svg>
            <%= hidden_input(col_f, :name) %>
          </div>
        </div>
      <% end %>
    </div>

    <div class="text-center">
      <%= content_tag(:button, "OK",
        class: "bg-gray-200 py-2  px-8 text-xs hover:bg-gray-300",
        phx_click: JS.dispatch("click", to: "##{@close_button_id}", bubbles: true)
      ) %>
    </div>
  </.form>
</div>
