<div class="admin-header">
  <h1>Properties</h1>
  <a href="/admin/properties/new" class="btn btn-primary">+ New Property</a>
</div>

<div style="background:var(--color-bg);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);overflow:hidden">
  <% if (properties && properties.length > 0) { %>
    <table class="admin-table">
      <thead>
        <tr>
          <th>Property</th>
          <th>Type</th>
          <th>Location</th>
          <th>Price</th>
          <th>Status</th>
          <th>Featured</th>
          <th>Published</th>
          <th style="width:140px">Actions</th>
        </tr>
      </thead>
      <tbody>
        <% properties.forEach(function(property) { %>
          <tr>
            <td><a href="/properties/<%= property.slug %>" target="_blank"><%= property.title %></a></td>
            <td><%= property.listing_type %> / <%= property.property_type %></td>
            <td><%= property.location_area %></td>
            <td><%= formatPrice(property.price, property.price_period) %></td>
            <td><%= property.status %></td>
            <td><%= property.is_featured ? 'Yes' : 'No' %></td>
            <td><%= property.is_published ? 'Yes' : 'No' %></td>
            <td>
              <a href="/admin/properties/<%= property.id %>/edit" class="btn btn-outline btn-sm" style="margin-right:0.5rem">Edit</a>
              <form action="/admin/properties/<%= property.id %>/delete" method="POST" style="display:inline" onsubmit="return confirm('Delete this property?')">
                <button type="submit" class="btn btn-sm" style="background:var(--color-error);color:#fff;border-color:var(--color-error)">Delete</button>
              </form>
            </td>
          </tr>
        <% }); %>
      </tbody>
    </table>
  <% } else { %>
    <div class="empty-state">
      <p>No properties yet. <a href="/admin/properties/new">Add your first property</a>.</p>
    </div>
  <% } %>
</div>
