<%# Property Card for External Listings %>
<article class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow duration-200">
  <%# Property Image %>
  <a href="<%= external_listing_path(reference: property.reference, listing_type: property.listing_type) %>" class="block relative">
    <% if property.main_image.present? %>
      <img src="<%= property.main_image %>"
           alt="<%= property.title %>"
           class="w-full h-48 object-cover"
           loading="lazy">
    <% else %>
      <div class="w-full h-48 bg-gray-200 flex items-center justify-center">
        <svg class="h-12 w-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/>
        </svg>
      </div>
    <% end %>

    <%# Status Badge %>
    <% if property.listing_type == :rental %>
      <span class="absolute top-2 left-2 bg-blue-600 text-white text-xs font-semibold px-2 py-1 rounded">
        <%= t("external_feed.listing_type.rental", default: "For Rent") %>
      </span>
    <% else %>
      <span class="absolute top-2 left-2 bg-green-600 text-white text-xs font-semibold px-2 py-1 rounded">
        <%= t("external_feed.listing_type.sale", default: "For Sale") %>
      </span>
    <% end %>

    <%# Price Reduced Badge %>
    <% if property.price_reduced? %>
      <span class="absolute top-10 right-2 bg-red-600 text-white text-xs font-semibold px-2 py-1 rounded">
        <%= t("external_feed.badges.reduced", default: "Reduced") %>
      </span>
    <% end %>

    <%# Favorite Button %>
    <button type="button"
            onclick="toggleFavorite(event, '<%= property.reference %>', '<%= property.title.gsub("'", "\\\\'") %>')"
            class="favorite-btn absolute top-2 right-2 p-2 bg-white/90 hover:bg-white rounded-full shadow-md transition-colors"
            data-reference="<%= property.reference %>"
            title="Save to favorites">
      <svg class="h-5 w-5 text-gray-400 hover:text-red-500 favorite-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
      </svg>
    </button>

    <%# Image Count %>
    <% if property.images.size > 1 %>
      <span class="absolute bottom-2 right-2 bg-black/60 text-white text-xs px-2 py-1 rounded flex items-center gap-1">
        <svg class="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/>
        </svg>
        <%= property.images.size %>
      </span>
    <% end %>
  </a>

  <%# Property Details %>
  <div class="p-4">
    <%# Price %>
    <div class="mb-2">
      <span class="text-xl font-bold text-gray-900">
        <%= property.formatted_price %>
      </span>
      <% if property.listing_type == :rental && property.price_frequency.present? %>
        <span class="text-sm text-gray-600">
          / <%= t("external_feed.frequency.#{property.price_frequency}", default: property.price_frequency.to_s) %>
        </span>
      <% end %>
    </div>

    <%# Title %>
    <h3 class="text-sm font-semibold text-gray-900 mb-1 line-clamp-1">
      <a href="<%= external_listing_path(reference: property.reference, listing_type: property.listing_type) %>" class="hover:text-blue-600">
        <%= property.title %>
      </a>
    </h3>

    <%# Location %>
    <p class="text-sm text-gray-600 mb-3 line-clamp-1">
      <svg class="inline-block h-4 w-4 mr-1 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/>
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
      </svg>
      <%= [property.location, property.province].compact.join(", ") %>
    </p>

    <%# Property Features %>
    <div class="flex items-center gap-4 text-sm text-gray-600 border-t pt-3">
      <% if property.bedrooms.present? && property.bedrooms > 0 %>
        <div class="flex items-center gap-1" title="<%= t('external_feed.features.bedrooms', default: 'Bedrooms') %>">
          <svg class="h-4 w-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/>
          </svg>
          <span><%= property.bedrooms %></span>
        </div>
      <% end %>

      <% if property.bathrooms.present? && property.bathrooms > 0 %>
        <div class="flex items-center gap-1" title="<%= t('external_feed.features.bathrooms', default: 'Bathrooms') %>">
          <svg class="h-4 w-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 14v3m4-3v3m4-3v3M3 21h18M3 10h18M3 7l9-4 9 4M4 10h16v11H4V10z"/>
          </svg>
          <span><%= property.bathrooms %></span>
        </div>
      <% end %>

      <% if property.built_area.present? && property.built_area > 0 %>
        <div class="flex items-center gap-1" title="<%= t('external_feed.features.built_area', default: 'Built Area') %>">
          <svg class="h-4 w-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4"/>
          </svg>
          <span><%= number_with_delimiter(property.built_area.to_i) %> m²</span>
        </div>
      <% end %>

      <% if property.property_type.present? %>
        <div class="flex items-center gap-1 ml-auto text-xs text-gray-500">
          <%= t("external_feed.property_types.#{property.property_type}", default: property.property_type.to_s.titleize) %>
        </div>
      <% end %>
    </div>
  </div>
</article>
