<div class="mt-8 mb-2 max-w-2xl mx-auto">
  <%= form_with url: cities_path, method: :get,
                class: "relative",
                data: {
                  controller: "search",
                  turbo_frame: "cities_results",
                  turbo_action: "advance"
                } do |f| %>
    <div class="relative">
      <!-- 搜索图标 -->
      <div class="absolute inset-y-0 left-0 flex items-center pl-4 z-10">
        <svg class="w-5 h-5 text-base-content/70" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
        </svg>
      </div>

      <!-- 搜索输入框 -->
      <%= f.text_field :query,
                       value: params[:query] ? URI.decode_www_form_component(params[:query]) : nil,
                       class: "w-full pl-12 pr-12 py-3 rounded-full bg-base-200/80 backdrop-blur border border-base-300 focus:outline-none focus:ring-2 focus:ring-primary/50 transition",
                       placeholder: "Search cities...",
                       autocomplete: "off",
                       data: {
                         action: "input->search#submit",
                         search_target: "input"
                       } %>

      <!-- 右侧按钮区域（清除按钮或加载动画） -->
      <!-- 更简单的环形 loading 图标版本 -->
      <div class="absolute inset-y-0 right-0 flex items-center pr-4 z-10"
           data-search-target="statusIcon">
        <% if params[:query].present? %>
          <%= link_to cities_path,
                      class: "text-base-content/50 hover:text-base-content transition",
                      data: { search_target: "clearButton" } do %>
            <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
            </svg>
          <% end %>
        <% end %>
        <!-- 简单的环形 loading -->
        <div class="hidden" data-search-target="spinner">
          <div class="w-5 h-5 border-2 border-base-content/20 border-t-base-content/70 rounded-full animate-spin"></div>
        </div>
      </div>

    </div>

    <%= f.hidden_field :region, value: params[:region] if params[:region] %>
    <%= f.hidden_field :country, value: params[:country] if params[:country] %>
  <% end %>
</div>