<div class="p-4 bg-white block sm:flex items-center justify-between border-b border-gray-200 lg:mt-1.5">
  <div class="w-full mb-1">
    <div class="mb-4">
      <nav class="flex mb-5" aria-label="Breadcrumb">
        <ol class="inline-flex items-center space-x-1 text-sm font-medium md:space-x-2">
          <li class="inline-flex items-center">
            <%= link_to tenant_admin_root_path, class: "inline-flex items-center text-gray-700 hover:text-blue-600" do %>
              <svg class="w-5 h-5 mr-2.5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"></path></svg>
              Dashboard
            <% end %>
          </li>
          <li>
            <div class="flex items-center">
              <svg class="w-6 h-6 text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
              <%= link_to "Properties", tenant_admin_props_path, class: "ml-1 text-gray-700 hover:text-blue-600 md:ml-2" %>
            </div>
          </li>
          <li>
            <div class="flex items-center">
              <svg class="w-6 h-6 text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
              <span class="ml-1 text-gray-400 md:ml-2" aria-current="page"><%= @prop.reference || "Property ##{@prop.id}" %></span>
            </div>
          </li>
        </ol>
      </nav>
      <h1 class="text-xl font-semibold text-gray-900 sm:text-2xl"><%= @prop.title || "Property ##{@prop.id}" %></h1>
    </div>
    <div class="flex items-center space-x-2 sm:space-x-3">
      <%= link_to "← Back to Properties", tenant_admin_props_path, class: "inline-flex items-center px-3 py-2 text-sm font-medium text-center text-gray-500 hover:text-gray-900" %>
    </div>
  </div>
</div>

<div class="grid grid-cols-1 gap-4 my-4 xl:grid-cols-2">
  <!-- Property Information Card -->
  <div class="p-4 bg-white border border-gray-200 rounded-lg shadow-sm">
    <div class="flex items-center justify-between mb-4">
      <h3 class="text-lg font-semibold text-gray-900">Property Information</h3>
    </div>
    <dl class="grid grid-cols-1 gap-x-4 gap-y-6 sm:grid-cols-2">
      <div>
        <dt class="text-sm font-medium text-gray-500">Reference</dt>
        <dd class="mt-1 text-sm text-gray-900"><%= @prop.reference || "N/A" %></dd>
      </div>
      <div>
        <dt class="text-sm font-medium text-gray-500">Title</dt>
        <dd class="mt-1 text-sm text-gray-900"><%= @prop.title || "N/A" %></dd>
      </div>
      <% if @prop.respond_to?(:website) && @prop.website %>
        <div>
          <dt class="text-sm font-medium text-gray-500">Website</dt>
          <dd class="mt-1 text-sm text-gray-900">
            <%= link_to @prop.website.subdomain, tenant_admin_website_path(@prop.website), class: "text-blue-600 hover:underline" %>
          </dd>
        </div>
      <% end %>
      <% if @prop.respond_to?(:price) %>
        <div>
          <dt class="text-sm font-medium text-gray-500">Price</dt>
          <dd class="mt-1 text-sm text-gray-900"><%= @prop.price || "N/A" %></dd>
        </div>
      <% end %>
      <div class="sm:col-span-2">
        <dt class="text-sm font-medium text-gray-500">Description</dt>
        <dd class="mt-1 text-sm text-gray-900"><%= @prop.respond_to?(:description) ? (@prop.description || "N/A") : "N/A" %></dd>
      </div>
      <div>
        <dt class="text-sm font-medium text-gray-500">Created</dt>
        <dd class="mt-1 text-sm text-gray-900"><%= format_date(@prop.created_at) %></dd>
      </div>
      <div>
        <dt class="text-sm font-medium text-gray-500">Last Updated</dt>
        <dd class="mt-1 text-sm text-gray-900"><%= format_date(@prop.updated_at) %></dd>
      </div>
    </dl>
  </div>

  <!-- Additional Details -->
  <div class="p-4 bg-white border border-gray-200 rounded-lg shadow-sm">
    <h3 class="mb-4 text-lg font-semibold text-gray-900">Additional Details</h3>
    <dl class="space-y-4">
      <% if @prop.respond_to?(:location) %>
        <div>
          <dt class="text-sm font-medium text-gray-500">Location</dt>
          <dd class="mt-1 text-sm text-gray-900"><%= @prop.location || "N/A" %></dd>
        </div>
      <% end %>
      <% if @prop.respond_to?(:bedrooms) %>
        <div>
          <dt class="text-sm font-medium text-gray-500">Bedrooms</dt>
          <dd class="mt-1 text-sm text-gray-900"><%= @prop.bedrooms || "N/A" %></dd>
        </div>
      <% end %>
      <% if @prop.respond_to?(:bathrooms) %>
        <div>
          <dt class="text-sm font-medium text-gray-500">Bathrooms</dt>
          <dd class="mt-1 text-sm text-gray-900"><%= @prop.bathrooms || "N/A" %></dd>
        </div>
      <% end %>
      <% if @prop.respond_to?(:surface_area) %>
        <div>
          <dt class="text-sm font-medium text-gray-500">Surface Area</dt>
          <dd class="mt-1 text-sm text-gray-900"><%= @prop.surface_area || "N/A" %></dd>
        </div>
      <% end %>
    </dl>
  </div>
</div>
