<div phx-hook="Table" id="table-component">
  <div class="row align-items-center">
    <div class="col-6">
      <%= for action <- @actions do %>
        <button
          type="button"
          class="my-2 btn btn-danger btn-sm js-action"
          data-name={action.name}
          data-confirm_message={Map.get(action, :confirm)}
        >
          {action.label}
        </button>
      <% end %>
    </div>
    <div class="col-6">
      <.live_component
        config={@config}
        module={ExqUIWeb.PaginationComponent}
        id="pagination"
        total={@total}
        current_page={@current_page}
        page_size={@page_size}
      />
    </div>
  </div>
  <div class="row">
    <div class="col-12">
      <%= form_for :table, "#", [phx_submit: :action], fn f -> %>
        <button type="submit" class="btn btn-primary js-submit-button" style="display:none">
          Submit
        </button>
        <div class="submit-loader"></div>
        {hidden_input(f, :action, class: "js-hidden-submit")}
        <table class="table table-bordered" id={@id}>
          <thead>
            <tr>
              <th class="text-center">
                <input class="form-check-input js-select-all-rows" type="checkbox" value="" />
              </th>
              <%= for %{header: header} <- @columns do %>
                <th scope="col">{header}</th>
              <% end %>
            </tr>
          </thead>
          <tbody>
            <%= for item <- @items do %>
              <tr>
                <td class="text-center">
                  {checkbox(f, item.id,
                    hidden_input: false,
                    checked_value: item.raw,
                    class: "form-check-input js-select-row"
                  )}
                </td>
                <%= for %{accessor: accessor} = column <- @columns do %>
                  <td class={column[:text_break] && "text-break"}>{accessor.(item)}</td>
                <% end %>
              </tr>
            <% end %>
          </tbody>
        </table>
      <% end %>
    </div>
  </div>
</div>
