<div class="space-y-6">
  <!-- Active Status -->
  <div class="p-4 bg-gray-50 rounded-lg">
    <div class="flex items-center">
      <%= f.check_box :active, class: "h-4 w-4 text-green-600 focus:ring-green-500 border-gray-300 rounded" %>
      <label class="ml-2 block text-sm font-medium text-gray-900">Set as Active Listing</label>
    </div>
    <p class="mt-1 text-xs text-gray-500">Only one sale listing can be active at a time. Activating this will deactivate any other active sale listing.</p>
  </div>

  <!-- Visibility Flags -->
  <div>
    <h4 class="text-sm font-medium text-gray-700 mb-3">Visibility Settings</h4>
    <div class="grid grid-cols-2 gap-4">
      <div class="flex items-center">
        <%= f.check_box :visible, class: "h-4 w-4 text-green-600 focus:ring-green-500 border-gray-300 rounded" %>
        <label class="ml-2 block text-sm text-gray-900">Visible on Website</label>
      </div>
      <div class="flex items-center">
        <%= f.check_box :highlighted, class: "h-4 w-4 text-green-600 focus:ring-green-500 border-gray-300 rounded" %>
        <label class="ml-2 block text-sm text-gray-900">Highlighted/Featured</label>
      </div>
      <div class="flex items-center">
        <%= f.check_box :reserved, class: "h-4 w-4 text-yellow-600 focus:ring-yellow-500 border-gray-300 rounded" %>
        <label class="ml-2 block text-sm text-gray-900">Reserved</label>
      </div>
      <div class="flex items-center">
        <%= f.check_box :furnished, class: "h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded" %>
        <label class="ml-2 block text-sm text-gray-900">Furnished</label>
      </div>
    </div>
  </div>

  <!-- Pricing -->
  <div>
    <h4 class="text-sm font-medium text-gray-700 mb-3">Pricing</h4>
    <div class="space-y-4">
      <div>
        <label class="block text-sm font-medium text-gray-700 mb-2">Sale Price</label>
        <div class="flex space-x-2">
          <%= f.number_field :price_sale_current_cents,
              value: listing.price_sale_current_cents.to_i > 0 ? listing.price_sale_current_cents / 100.0 : nil,
              step: 0.01, min: 0,
              class: "flex-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-green-500 focus:border-green-500 sm:text-sm",
              placeholder: "Enter sale price..." %>
          <%= f.select :price_sale_current_currency,
              [['EUR', 'EUR'], ['USD', 'USD'], ['GBP', 'GBP']],
              { selected: listing.price_sale_current_currency || 'EUR' },
              class: "w-24 px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-green-500 focus:border-green-500 sm:text-sm" %>
        </div>
      </div>

      <div>
        <label class="block text-sm font-medium text-gray-700 mb-2">Commission</label>
        <div class="flex space-x-2">
          <%= f.number_field :commission_cents,
              value: listing.commission_cents.to_i > 0 ? listing.commission_cents / 100.0 : nil,
              step: 0.01, min: 0,
              class: "flex-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-green-500 focus:border-green-500 sm:text-sm",
              placeholder: "Enter commission..." %>
          <%= f.select :commission_currency,
              [['EUR', 'EUR'], ['USD', 'USD'], ['GBP', 'GBP']],
              { selected: listing.commission_currency || 'EUR' },
              class: "w-24 px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-green-500 focus:border-green-500 sm:text-sm" %>
        </div>
      </div>
    </div>
  </div>

  <!-- Listing Text (Title & Description) -->
  <div>
    <h4 class="text-sm font-medium text-gray-700 mb-3">Listing Text</h4>
    <% I18n.available_locales.each do |locale| %>
      <div class="mb-4 p-4 border border-gray-200 rounded-lg">
        <h5 class="text-sm font-medium text-gray-600 mb-2"><%= locale.to_s.upcase %></h5>
        <div class="space-y-3">
          <div>
            <label class="block text-sm text-gray-700 mb-1">Title</label>
            <%= f.text_field "title_#{locale}",
                value: listing.send("title_#{locale}"),
                class: "block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-green-500 focus:border-green-500 sm:text-sm",
                placeholder: "Enter title in #{locale.to_s.upcase}..." %>
          </div>
          <div>
            <label class="block text-sm text-gray-700 mb-1">Description</label>
            <%= f.text_area "description_#{locale}",
                value: listing.send("description_#{locale}"),
                rows: 3,
                class: "block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-green-500 focus:border-green-500 sm:text-sm",
                placeholder: "Enter description in #{locale.to_s.upcase}..." %>
          </div>
        </div>
      </div>
    <% end %>
  </div>
</div>
