<%# Unavailable Property Page %>
<div class="external-listing-unavailable min-h-screen bg-gray-50">
  <%# Breadcrumb %>
  <nav class="bg-white border-b" aria-label="Breadcrumb">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-3">
      <ol class="flex items-center space-x-2 text-sm">
        <li>
          <a href="<%= root_path %>" class="text-gray-500 hover:text-gray-700">
            <%= t("external_feed.breadcrumb.home", default: "Home") %>
          </a>
        </li>
        <li class="flex items-center">
          <svg class="h-5 w-5 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
            <path fill-rule="evenodd" d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z" clip-rule="evenodd"/>
          </svg>
          <a href="<%= external_listings_path %>" class="ml-2 text-gray-500 hover:text-gray-700">
            <%= t("external_feed.breadcrumb.properties", default: "Properties") %>
          </a>
        </li>
        <li class="flex items-center">
          <svg class="h-5 w-5 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
            <path fill-rule="evenodd" d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z" clip-rule="evenodd"/>
          </svg>
          <span class="ml-2 text-gray-900 font-medium">
            <%= t("external_feed.status.unavailable_title", default: "Property Unavailable") %>
          </span>
        </li>
      </ol>
    </div>
  </nav>

  <div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
    <div class="text-center">
      <%# Status Icon %>
      <div class="mx-auto flex items-center justify-center h-24 w-24 rounded-full bg-yellow-100 mb-8">
        <svg class="h-12 w-12 text-yellow-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
        </svg>
      </div>

      <%# Status Message %>
      <h1 class="text-3xl font-bold text-gray-900 mb-4">
        <%= t("external_feed.status.unavailable_title", default: "Property No Longer Available") %>
      </h1>

      <p class="text-lg text-gray-600 mb-8">
        <%= @status_message || t("external_feed.status.unavailable", default: "This property is no longer available.") %>
      </p>

      <%# Property Reference %>
      <% if @listing.present? %>
        <div class="bg-white rounded-lg shadow-sm p-6 mb-8 text-left">
          <h2 class="text-lg font-semibold text-gray-900 mb-4">
            <%= t("external_feed.status.property_details", default: "Property Details") %>
          </h2>
          <dl class="grid grid-cols-1 gap-3 text-sm">
            <div class="flex justify-between py-2 border-b border-gray-100">
              <dt class="text-gray-600"><%= t("external_feed.property.reference", default: "Reference") %></dt>
              <dd class="font-medium text-gray-900"><%= @listing.reference %></dd>
            </div>
            <% if @listing.title.present? %>
              <div class="flex justify-between py-2 border-b border-gray-100">
                <dt class="text-gray-600"><%= t("external_feed.property.title", default: "Title") %></dt>
                <dd class="font-medium text-gray-900"><%= @listing.title %></dd>
              </div>
            <% end %>
            <% if @listing.location.present? %>
              <div class="flex justify-between py-2 border-b border-gray-100">
                <dt class="text-gray-600"><%= t("external_feed.property.location", default: "Location") %></dt>
                <dd class="font-medium text-gray-900"><%= @listing.location %></dd>
              </div>
            <% end %>
            <div class="flex justify-between py-2">
              <dt class="text-gray-600"><%= t("external_feed.property.status", default: "Status") %></dt>
              <dd>
                <% case @listing.status %>
                <% when :sold %>
                  <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800">
                    <%= t("external_feed.status.sold", default: "Sold") %>
                  </span>
                <% when :rented %>
                  <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
                    <%= t("external_feed.status.rented", default: "Rented") %>
                  </span>
                <% else %>
                  <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800">
                    <%= t("external_feed.status.unavailable", default: "Unavailable") %>
                  </span>
                <% end %>
              </dd>
            </div>
          </dl>
        </div>
      <% end %>

      <%# Actions %>
      <div class="space-y-4">
        <a href="<%= external_listings_path %>"
           class="inline-flex items-center justify-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 transition-colors">
          <svg class="h-5 w-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <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>
          <%= t("external_feed.status.search_similar", default: "Search Similar Properties") %>
        </a>

        <p class="text-sm text-gray-500">
          <%= t("external_feed.status.contact_help",
                default: "Need help finding a property? Contact us and we'll assist you.") %>
        </p>
      </div>
    </div>

    <%# Similar Properties Suggestion %>
    <% if @similar.present? && @similar.any? %>
      <div class="mt-16 pt-12 border-t">
        <h2 class="text-2xl font-bold text-gray-900 mb-6 text-center">
          <%= t("external_feed.status.you_might_like", default: "You Might Also Like") %>
        </h2>
        <%= render "similar", properties: @similar %>
      </div>
    <% end %>
  </div>
</div>
