{% extends "base.html" %}

{% block content %}
<main class="page-shell">
  <div class="container">
    <div class="list-hero">
      <div>
        <p class="eyebrow">Public list</p>
        <h1>Nearby property sightings</h1>
        <p>Sort by newest posts or allow location to estimate the closest entries.</p>
      </div>
      <div class="d-flex flex-wrap gap-2">
        <a class="btn btn-nest" href="{% url 'add_location_property' %}">Pin location</a>
        <a class="btn btn-ghost" href="{% url 'add_photo_property' %}">Upload photo</a>
      </div>
    </div>

    <form class="sort-panel" method="get" data-distance-form>
      <input type="hidden" name="lat" value="{{ user_lat }}" data-user-lat>
      <input type="hidden" name="lng" value="{{ user_lng }}" data-user-lng>
      <div>
        <label class="form-label" for="sort">Sort entries</label>
        <select class="form-select" id="sort" name="sort">
          <option value="recent" {% if sort == 'recent' %}selected{% endif %}>Most recent</option>
          <option value="distance" {% if sort == 'distance' %}selected{% endif %}>Distance from me</option>
        </select>
      </div>
      <button class="btn btn-outline-dark rounded-pill" type="button" data-action="use-location-for-list">Use my location</button>
      <button class="btn btn-nest" type="submit">Apply</button>
      <small id="list-location-status" class="status-text"></small>
    </form>

    {% if entries %}
    <div class="row g-4 mt-2">
      {% for entry in entries %}
      <div class="col-md-6 col-xl-4">
        {% include "core/partials/property_card.html" with entry=entry %}
      </div>
      {% endfor %}
    </div>
    {% else %}
    <div class="empty-state mt-4">
      <h2>No visible properties yet</h2>
      <p>Add the first public pin from your location or upload a compressed property photo.</p>
      <a class="btn btn-nest" href="{% url 'add_location_property' %}">Create first entry</a>
    </div>
    {% endif %}
  </div>
</main>
{% endblock %}