<!-- Bristol Theme Search Form Landing - Tailwind CSS -->
<div class="bg-white rounded-lg shadow-lg">
  <div class="bg-blue-600 px-6 py-4 rounded-t-lg">
    <h2 class="text-xl font-bold text-white"><%= I18n.t "findAProperty" %></h2>
  </div>

  <%= simple_form_for :search, url: "/#{I18n.locale}/buy", method: 'get',
      html: { class: 'p-6' }, remote: false do |f| %>

    <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
      <div>
        <label class="block text-sm font-medium text-gray-700 mb-1">
          <%= I18n.t("simple_form.labels.search.for_sale_price_from") %>
        </label>
        <%= render partial: "pwb/shared/flowbite_select", locals: {
            name: "search[for_sale_price_from]",
            id: "search_for_sale_price_from",
            options: @prices_collection.map { |p| p.blank? ? ["Any", ""] : [p, p] },
            selected: '50.000',
            placeholder: "Any"
        } %>
      </div>
      <div>
        <label class="block text-sm font-medium text-gray-700 mb-1">
          <%= I18n.t("simple_form.labels.search.for_sale_price_till") %>
        </label>
        <%= render partial: "pwb/shared/flowbite_select", locals: {
            name: "search[for_sale_price_till]",
            id: "search_for_sale_price_till",
            options: @prices_collection.map { |p| p.blank? ? ["Any", ""] : [p, p] },
            selected: '150.000',
            placeholder: "Any"
        } %>
      </div>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
      <div>
        <label class="block text-sm font-medium text-gray-700 mb-1">
          <%= I18n.t("simple_form.labels.search.property_type") %>
        </label>
        <%= render partial: "pwb/shared/flowbite_select", locals: {
            name: "search[property_type]",
            id: "search_property_type",
            options: [["Any", ""]] + @property_types.map { |pt| [pt.label, pt.value] },
            selected: "",
            placeholder: "Any"
        } %>
      </div>
      <div>
        <label class="block text-sm font-medium text-gray-700 mb-1">
          <%= I18n.t("simple_form.labels.search.num_bedrooms") %>
        </label>
        <%= render partial: "pwb/shared/flowbite_select", locals: {
            name: "search[num_bedrooms]",
            id: "search_num_bedrooms",
            options: [["Any", ""]] + (0..50).map { |n| [n, n] },
            selected: '2',
            placeholder: "Any"
        } %>
      </div>
    </div>

    <div class="flex justify-center">
      <%= f.button :button, class: "bg-blue-600 text-white font-medium py-3 px-8 rounded-lg hover:bg-blue-700 transition flex items-center",
          id: "btn_buscar_inmuebles" do %>
        <%= icon(:search, size: :sm, class: "mr-2") %>
        <%= I18n.t("search") %>
      <% end %>
    </div>
  <% end %>
</div>

