<% page_title @page_title %>
<%= render 'pwb/shared/leaflet_assets' %>

<%# Barcelona Theme - Property Rental Search Page %>
<%# Mediterranean design with coastal blues and warm accents %>

<%# Canonical URL for SEO %>
<% content_for :head do %>
  <% if @canonical_url.present? %>
    <link rel="canonical" href="<%= @canonical_url %>">
  <% end %>
<% end %>

<!-- Page Header -->
<section class="bg-gradient-to-br from-terra-50 via-white to-gold-50 border-b border-warm-100">
  <div class="container mx-auto px-6 py-10">
    <div class="flex flex-col md:flex-row md:items-center md:justify-between">
      <div>
        <nav class="mb-4">
          <ol class="flex items-center space-x-2 text-sm">
            <li>
              <a href="<%= root_path %>" class="text-warm-500 hover:text-med-600 transition-colors">
                <%= icon(:home, size: :xs, class: "mr-1") %>
                <%= t('pwb.breadcrumb.home', default: 'Home') %>
              </a>
            </li>
            <li class="text-warm-400">
              <%= icon(:chevron_right, size: :xs) %>
            </li>
            <li class="text-warm-900 font-medium">
              <%= t('pwb.breadcrumb.rent', default: 'Rent') %>
            </li>
          </ol>
        </nav>
        <h1 class="font-display text-3xl md:text-4xl font-bold text-warm-900 mb-2">
          <%= t('searchPropertiesForRent', default: 'Properties for Rent') %>
        </h1>
        <p class="text-warm-500">
          <%= t('pwb.search.find_rental', default: 'Find your perfect rental property') %>
        </p>
      </div>
      <div class="mt-6 md:mt-0">
        <span class="inline-flex items-center px-4 py-2 bg-terra-100 text-terra-700 rounded-soft text-sm font-medium">
          <%= icon(:vpn_key, size: :sm, class: "mr-2") %>
          <%= t('pwb.search.for_rent', default: 'For Rent') %>
        </span>
      </div>
    </div>
  </div>
</section>

<%# Main Content with URL-based Stimulus controller %>
<section class="bg-warm-50"
         data-controller="search"
         data-search-operation-value="rent"
         data-search-locale-value="<%= I18n.locale %>">
  <div class="container mx-auto px-6 py-10">
    <div class="search-layout flex flex-wrap -mx-4">
      <!-- Sidebar Filters - Desktop: always visible, Mobile: toggleable -->
      <aside class="search-sidebar w-full lg:w-1/4 px-4 mb-8 lg:mb-0">
        <!-- Mobile Filter Toggle -->
        <div class="filter-toggle lg:hidden mb-4">
          <button type="button"
                  data-action="click->search#toggleFilters"
                  data-search-target="filterToggle"
                  aria-expanded="false"
                  aria-controls="sidebar-filters"
                  class="w-full flex items-center justify-center px-6 py-3 bg-white text-warm-700 font-medium rounded-soft shadow-soft hover:shadow-medium transition-all duration-300">
            <%= icon(:filter_list, size: :sm, class: "mr-2 text-terra-500") %>
            <%= t('filter', default: 'Filters') %>
            <% if @search_criteria_for_view.present? %>
              <% active_count = @search_criteria_for_view.reject { |k, v| v.blank? || k == :page }.size %>
              <% if active_count > 0 %>
                <span class="ml-2 inline-flex items-center justify-center px-2 py-1 text-xs font-bold leading-none text-white bg-terra-600 rounded-full">
                  <%= active_count %>
                </span>
              <% end %>
            <% end %>
            <%= icon(:keyboard_arrow_down, size: :sm, class: "ml-2") %>
          </button>
        </div>

        <!-- Filter Panel - hidden on mobile, visible on desktop -->
        <div id="sidebar-filters"
             class="filter-content hidden lg:block"
             data-search-target="filterPanel">
          <div class="bg-white rounded-softer shadow-soft p-6 sticky top-28">
            <div class="flex items-center justify-between mb-6">
              <div class="flex items-center">
                <%= icon(:tune, size: :md, class: "text-terra-500 mr-3") %>
                <h3 class="font-display font-semibold text-lg text-warm-900">
                  <%= t('pwb.search.filters', default: 'Filters') %>
                </h3>
              </div>
              <button type="button"
                      class="text-sm text-terra-600 hover:text-terra-800 font-medium"
                      data-action="click->search#clearFilters">
                <%= I18n.t("search.clear_all", default: "Clear all") %>
              </button>
            </div>
            <%= render 'pwb/search/search_form_for_rent' %>
          </div>
        </div>
      </aside>

      <!-- Results Column -->
      <main class="search-results w-full lg:w-3/4 px-4 relative">
        <%= render 'pwb/search/search_results_frame' %>
      </main>
    </div>
  </div>
</section>

<%# Map Section with Stimulus controller %>
<% if @map_markers.present? && @map_markers.length > 0 %>
  <section class="border-t border-warm-200 bg-white">
    <div class="container mx-auto px-6 py-8">
      <div class="flex items-center mb-6">
        <span class="w-10 h-10 flex items-center justify-center bg-gold-100 rounded-full mr-3">
          <%= icon(:map, size: :sm, class: "text-gold-600") %>
        </span>
        <h2 class="font-display text-xl font-bold text-warm-900">
          <%= t('pwb.search.map_view', default: 'Map View') %>
        </h2>
      </div>
    </div>
    <div class="w-full" style="height: 500px;">
      <div id="search-map"
           class="w-full h-full"
           data-controller="map"
           data-map-target="canvas"
           data-map-markers-value="<%= @map_markers.to_json %>"
           data-search-target="map">
      </div>
    </div>
  </section>
<% end %>

<%# Mobile filter backdrop %>
<div class="fixed inset-0 bg-black bg-opacity-50 z-40 hidden lg:hidden"
     data-search-target="backdrop"
     data-action="click->search#toggleFilters">
</div>
