<div class="mb-6">
  <%= link_to '← Back to Properties', site_admin_props_path, class: 'text-blue-600 hover:text-blue-800' %>
</div>

<!-- Property Header -->
<div class="bg-white rounded-lg shadow mb-6 p-6">
  <div class="flex items-center justify-between">
    <div class="flex items-center space-x-4">
      <%# Property Thumbnail - supports both ActiveStorage and external URLs %>
      <% primary_photo = @prop.ordered_photo(1) %>
      <% if primary_photo&.has_image? %>
        <div class="flex-shrink-0">
          <%= image_tag primary_photo.thumbnail_url(size: [80, 80]),
              class: 'w-20 h-20 rounded-lg object-cover shadow-sm',
              alt: @prop.reference %>
        </div>
      <% else %>
        <div class="flex-shrink-0 w-20 h-20 rounded-lg bg-gray-100 flex items-center justify-center">
          <svg class="w-8 h-8 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" 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 %>
      <div>
        <h1 class="text-2xl font-bold text-gray-900">Edit Property</h1>
        <p class="text-gray-600 mt-1">REF: <%= @prop.reference %></p>
      </div>
    </div>
    <div class="flex items-center space-x-4 text-gray-600">
      <span class="flex items-center">
        <svg class="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 20 20">
          <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>
        <%= @prop.count_bedrooms || 0 %>
      </span>
      <span class="flex items-center">
        <svg class="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 20 20">
          <path fill-rule="evenodd" d="M4 4a2 2 0 012-2h8a2 2 0 012 2v12a1 1 0 110 2h-3a1 1 0 01-1-1v-2a1 1 0 00-1-1H9a1 1 0 00-1 1v2a1 1 0 01-1 1H4a1 1 0 110-2V4zm3 1h2v2H7V5zm2 4H7v2h2V9zm2-4h2v2h-2V5zm2 4h-2v2h2V9z" clip-rule="evenodd"></path>
        </svg>
        <%= @prop.count_bathrooms || 0 %>
      </span>
      <span class="flex items-center">
        <svg class="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 20 20">
          <path d="M3 4a1 1 0 011-1h12a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1V4zM3 10a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H4a1 1 0 01-1-1v-6zM14 9a1 1 0 00-1 1v6a1 1 0 001 1h2a1 1 0 001-1v-6a1 1 0 00-1-1h-2z"></path>
        </svg>
        <%= @prop.constructed_area || 0 %> m²
      </span>
    </div>
  </div>

  <%# View on Site Links - Show active listings %>
  <% if @prop.for_sale? || @prop.for_rent? %>
    <div class="mt-4 pt-4 border-t border-gray-200">
      <div class="flex items-center space-x-4">
        <span class="text-sm font-medium text-gray-500">View on site:</span>
        <% if @prop.for_sale? %>
          <%= link_to @prop.contextual_show_path('for_sale'),
              class: 'inline-flex items-center px-3 py-1.5 text-sm font-medium text-green-700 bg-green-100 rounded-full hover:bg-green-200 transition-colors',
              target: '_blank' do %>
            <svg class="w-4 h-4 mr-1.5" fill="currentColor" viewBox="0 0 20 20">
              <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>
            For Sale
            <svg class="w-3.5 h-3.5 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
            </svg>
          <% end %>
        <% end %>
        <% if @prop.for_rent? %>
          <%= link_to @prop.contextual_show_path('for_rent'),
              class: 'inline-flex items-center px-3 py-1.5 text-sm font-medium text-blue-700 bg-blue-100 rounded-full hover:bg-blue-200 transition-colors',
              target: '_blank' do %>
            <svg class="w-4 h-4 mr-1.5" fill="currentColor" viewBox="0 0 20 20">
              <path d="M9 2a1 1 0 000 2h2a1 1 0 100-2H9z"></path>
              <path fill-rule="evenodd" d="M4 5a2 2 0 012-2 3 3 0 003 3h2a3 3 0 003-3 2 2 0 012 2v11a2 2 0 01-2 2H6a2 2 0 01-2-2V5zm3 4a1 1 0 000 2h.01a1 1 0 100-2H7zm3 0a1 1 0 000 2h3a1 1 0 100-2h-3zm-3 4a1 1 0 100 2h.01a1 1 0 100-2H7zm3 0a1 1 0 100 2h3a1 1 0 100-2h-3z" clip-rule="evenodd"></path>
            </svg>
            For Rent
            <svg class="w-3.5 h-3.5 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
            </svg>
          <% end %>
        <% end %>
      </div>
    </div>
  <% end %>
</div>
