{% extends "base.html" %}

{% block content %}
<main class="page-shell">
  <div class="container narrow-container">
    <div class="form-card">
      <p class="eyebrow">Create from current location</p>
      <h1>Add a property pin</h1>
      <p class="text-muted">Address or GPS is required. Contact details and sale/rental type help others recognize the listing.</p>
      <button class="btn btn-ghost mb-3" type="button" data-action="fill-current-location">Use my current location</button>
      <small id="form-location-status" class="status-text d-block mb-3">Location not captured yet.</small>
      <form method="post" novalidate>
        {% csrf_token %}
        {% if form.non_field_errors %}<div class="alert alert-danger">{{ form.non_field_errors }}</div>{% endif %}
        {{ form.latitude }}{{ form.longitude }}
        {% for field in form.visible_fields %}
        <div class="mb-3">
          <label class="form-label" for="{{ field.id_for_label }}">{{ field.label }}</label>
          {{ field }}
          {% if field.help_text %}<div class="form-text">{{ field.help_text }}</div>{% endif %}
          {% for error in field.errors %}<div class="invalid-copy">{{ error }}</div>{% endfor %}
        </div>
        {% endfor %}
        <div class="d-grid gap-2 d-sm-flex">
          <button class="btn btn-nest btn-lg" type="submit">Publish pin</button>
          <a class="btn btn-outline-dark btn-lg rounded-pill" href="{% url 'property_list' %}">Cancel</a>
        </div>
      </form>
    </div>
  </div>
</main>
{% endblock %}