<div
  class="w-full relative overflow-visible"
  data-controller="<%= stimulus_id %>"
  data-<%= stimulus_id %>-products-url-value="<%= solidus_admin.variants_for_order_path(@order) %>"
  data-action="
    <%= component('ui/forms/search').stimulus_id %>:search-><%= stimulus_id %>#search
    <%= component('ui/forms/search').stimulus_id %>:submit-><%= stimulus_id %>#selectResult
  "
>
  <%= render component('ui/panel').new(title: t('.title')) do |panel| %>
    <% panel.with_section do %>
      <%= render component('ui/forms/search').new(
        placeholder: t('.search_placeholder'),
        id: :order_cart,
      ) %>
    <% end %>

    <% panel.with_section(wide: true, high: true) do %>
      <div class="rounded-b-lg overflow-hidden">
        <table class="table-auto w-full" <%= :hidden if @order.line_items.empty? %>>
          <thead>
            <tr>
              <th class="text-left font-semibold text-sm text-gray-800 bg-gray-15 px-6 py-3 leading-none">Product</th>
              <th class="text-left font-semibold text-sm text-gray-800 bg-gray-15 px-6 py-3 leading-none w-16">Quantity</th>
              <th class="text-left font-semibold text-sm text-gray-800 bg-gray-15 px-6 py-3 leading-none w-16">Price</th>
              <th class="text-left font-semibold text-sm text-gray-800 bg-gray-15 px-6 py-3 leading-none w-16"><span class="sr-only">Actions</span></th>
            </tr>
          </thead>
          <tbody>
            <% @order.line_items.each do |line_item| %>
              <tr class="border-gray-100 border-t">
                <td class="px-6 py-4">
                  <%= render component("ui/resource_item").new(
                    thumbnail: (line_item.variant.images.first || line_item.variant.product.gallery.images.first)&.url(:small),
                    title: line_item.variant.name,
                    subtitle: "#{line_item.variant.sku}#{line_item.variant.options_text.presence&.prepend("- ")}",
                  ) %>
                </td>
                <td class="px-6 py-4">
                  <%= form_for(line_item, url: solidus_admin.order_line_item_path(@order, line_item), html: {
                    "data-controller": "readonly-when-submitting"
                  }) do |f| %>
                    <%= render component("ui/forms/input").new(
                      name: "#{f.object_name}[quantity]",
                      type: :number,
                      value: line_item.quantity,
                      "aria-label": "Quantity",
                      min: 0,
                      class: "!w-16 inline-block",
                      "data-action": "input->#{stimulus_id}#updateLineItem",
                    ) %>
                    <% render component("ui/button").new(type: :submit, text: "Update", class: "inline-block") %>
                  <% end %>
                </td>
                <td class="px-6 py-4">
                  <span class="text-gray-500 font-normal text-sm"><%= line_item.single_money.to_html %></span>
                </td>
                <td class="px-6 py-4 text-right">
                  <%= form_for(line_item, url: solidus_admin.order_line_item_path(@order, line_item), method: :delete) do |f| %>
                    <%= render component('ui/button').new(
                      scheme: :ghost,
                      size: :s,
                      title: t("spree.delete"),
                      icon: 'close-line',
                      "data-controller": "confirm",
                      "data-confirm-text-value": t("spree.are_you_sure"),
                    ) %>
                  <% end %>
                </td>
              </tr>
            <% end %>
          </tbody>
        </table>
    </div>
    <% end %>
  <% end %>
</div>
