<div
  class="
    rounded-lg
    border
    border-gray-100
    <%= 'overflow-hidden' unless @search %>
  "
  data-controller="<%= stimulus_id %>"
  data-<%= stimulus_id %>-selected-row-class="bg-gray-15"
  data-<%= stimulus_id %>-mode-value="<%= initial_mode %>"
  data-<%= stimulus_id %>-sortable-value="<%= should_enable_sortable? %>"
  data-action="
    <%= component("ui/table/ransack_filter").stimulus_id %>:search-><%= stimulus_id %>#search
    <%= component("ui/table/ransack_filter").stimulus_id %>:showSearch-><%= stimulus_id %>#showSearch
  "
>
  <% if @search %>
    <div role="search">
      <%= render component("ui/table/toolbar").new("data-#{stimulus_id}-target": "searchToolbar", hidden: initial_mode != "search") do %>
        <%= form_with(
          url: @search.url,
          method: :get,
          html: {
            id: search_form_id,
            class: 'flex-grow',
            "data-turbo-action": "replace",
            "data-#{stimulus_id}-target": "searchForm",
            "data-action": "input->#{stimulus_id}#search change->#{stimulus_id}#search",
          },
        ) do |form| %>
          <%= hidden_field_tag @search.scope_param_name, @search.current_scope.name if @search.scopes.present? %>
          <%= render component('ui/forms/search_field').new(
            name: @search.searchbar_param_name,
            value: @search.value[@search.searchbar_key],
            placeholder: t('.search_placeholder', resources: @data.plural_name),
            "aria-label": t('.search_placeholder', resources: @data.plural_name),
            "data-#{stimulus_id}-target": "searchField",
            "data-turbo-permanent": "true",
            id: "#{stimulus_id}-search-field-#{@id}",
          ) %>
        <% end %>

        <% if @search.scopes.any? %>
          <div class="ml-4">
            <%= render component("ui/button").new(
              text: t('.cancel'),
              scheme: :ghost,
              "data-action": "#{stimulus_id}#resetSearchAndFilters",
            ) %>
          </div>
        <% end %>
      <% end %>

      <% if @search.filters.any? %>
        <%= render component("ui/table/toolbar").new("data-#{stimulus_id}-target": "filterToolbar", hidden: initial_mode != "search", class: "flex-wrap") do %>
          <% @search.filters.each_with_index do |filter, index| %>
            <%= render_ransack_filter_dropdown(filter, index) %>
          <% end %>
        <% end %>
      <% end %>

      <% if @search.scopes.any? %>
        <%= render component("ui/table/toolbar").new("data-#{stimulus_id}-target": "scopesToolbar", hidden: initial_mode != "scopes") do %>
          <div class="flex-grow">
            <%= form_with(url: @search.url, method: :get) do %>
              <% @search.scopes.each do |scope| %>
                <%= render component("ui/tab").new(
                  tag: :button,
                  type: :submit,
                  text: scope.label,
                  current: scope == @search.current_scope,
                  name: @search.scope_param_name,
                  value: scope.name,
                ) %>
              <% end %>
            <% end %>
          </div>

          <%= render component("ui/button").new(
            'aria-label': t('.filter'),
            icon: "filter-3-line",
            scheme: :secondary,
            "data-action": "#{stimulus_id}#showSearch",
          ) %>
        <% end %>
      <% end %>
    </div>
  <% end %>

  <%= render component("ui/table/toolbar").new("data-#{stimulus_id}-target": "batchToolbar", role: "toolbar", "aria-label": t(".batch_actions"), hidden: true) do %>
    <%= form_tag '', id: batch_actions_form_id %>
    <% @data.batch_actions.each do |batch_action| %>
      <%= render_batch_action_button(batch_action) %>
    <% end %>
  <% end %>

  <table class="table-fixed w-full border-collapse">
    <colgroup>
      <% @data.columns.each do |column| %>
        <col <%= tag.attributes(**column.col) if column.col %>">
      <% end %>
    </colgroup>

    <thead
      class="bg-gray-15 text-gray-700 text-left text-small"
      data-<%= stimulus_id %>-target="defaultHeader"
    >
      <tr>
        <% @data.columns.each do |column| %>
          <%= render_header_cell(column.header) %>
        <% end %>
      </tr>
    </thead>

    <% if @data.batch_actions && @data.rows.any? %>
      <thead
        data-<%= stimulus_id %>-target="batchHeader"
        class="bg-white color-black text-xs leading-none text-left"
        hidden
      >
        <tr>
          <%= render_header_cell(selectable_column.header) %>
          <%= render_header_cell(content_tag(:div, safe_join([
            content_tag(:span, "0", "data-#{stimulus_id}-target": "selectedRowsCount"),
            " #{t('.rows_selected')}.",
          ])), colspan: @data.columns.count - 1) %>
        </tr>
      </thead>
    <% end %>

    <tbody
      class="bg-white text-3.5 line-[150%] text-black"
      data-<%= stimulus_id %>-target="tableBody"
      <%= "data-controller=sortable" if should_enable_sortable? %>
      <%= "data-sortable-param-value=#{@sortable.param}" if @sortable&.param %>
      <%= "data-sortable-handle-value=#{@sortable.handle}" if @sortable&.handle %>
      <%= "data-sortable-animation-value=#{@sortable.animation}" if @sortable&.animation %>
    >
      <% @data.rows.each do |row| %>
        <tr
          class="border-b border-gray-100 last:border-0 hover:bg-gray-50 cursor-pointer <%= 'bg-gray-15 text-gray-700' if @data.fade&.call(row) %>"
          <% if @data.url %>
            data-action="click-><%= stimulus_id %>#rowClicked"
            data-<%= stimulus_id %>-url-param="<%= @data.url.call(row) %>"
            <%= "data-sortable-url=#{@sortable.url.call(row)}" if @sortable&.url %>
          <% end %>
        >
          <% @data.columns.each do |column| %>
            <%= render_data_cell(column, row) %>
          <% end %>
        </tr>
      <% end %>

      <% if @data.rows.empty? && @data.plural_name %>
        <tr>
          <td
            colspan="<%= @data.columns.size %>"
            class="text-center py-4 text-3.5 line-[150%] text-black bg-white rounded-b-lg"
          >
            <%= t('.no_resources_found', resources: @data.plural_name) %>
          </td>
        </tr>
      <% end %>
    </tbody>

    <% if @data.prev || @data.next %>
      <tfoot>
        <tr>
          <td colspan="<%= @data.columns.size %>" class="py-4 bg-white rounded-b-lg border-t border-gray-100">
            <div class="flex justify-center">
              <%= render component('ui/table/pagination').new(
                prev_link: @data.prev,
                next_link: @data.next
              ) %>
            </div>
          </td>
        </tr>
      </tfoot>
    <% end %>

  </table>
</div>
