<!-- Brisbane Luxury Theme - Property Search Form -->
<div class="card-luxury bg-white overflow-hidden">
  <!-- Elegant Header -->
  <div class="bg-luxury-navy px-8 py-5">
    <h2 class="font-serif text-xl text-luxury-cream tracking-wide"><%= I18n.t "findAProperty" %></h2>
  </div>

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

    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
      <div>
        <label class="block text-xs font-medium text-luxury-charcoal uppercase tracking-wider mb-2">
          <%= 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-xs font-medium text-luxury-charcoal uppercase tracking-wider mb-2">
          <%= 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-6 mb-8">
      <div>
        <label class="block text-xs font-medium text-luxury-charcoal uppercase tracking-wider mb-2">
          <%= 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-xs font-medium text-luxury-charcoal uppercase tracking-wider mb-2">
          <%= 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: "btn-luxury flex items-center justify-center",
          id: "btn_buscar_inmuebles" do %>
        <%= icon(:search, size: :sm, class: "mr-3") %>
        <%= I18n.t("search") %>
      <% end %>
    </div>
  <% end %>
</div>

