{% extends "base.html" %}

{% block content %}
<main class="page-shell">
  <div class="container narrow-container">
    <div class="form-card">
      <p class="eyebrow">Create from location or address</p>
      <h1>Add a property pin</h1>
      <p class="text-muted">Use your current GPS position when available, or type/paste the address manually if browser location is blocked, denied, or unsupported.</p>
      <div class="location-choice-panel mb-3" aria-label="Choose how to add location information">
        <button class="btn btn-ghost" type="button" data-action="fill-current-location">Use my current location</button>
        <button class="btn btn-outline-dark rounded-pill" type="button" data-action="manual-address">Type or paste address</button>
      </div>
      <small id="form-location-status" class="status-text d-block mb-3">Choose current location or enter the address below.</small>
      <div id="manual-address-tip" class="manual-address-tip mb-3" data-manual-address-tip hidden>
        <span>Manual fallback</span>
        <strong>Location permission is optional.</strong>
        <p>Paste the full street address into the Address field below. GPS coordinates can stay empty when an address is provided.</p>
      </div>
      <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.name == "address" %}<div class="form-text">Required if you do not grant current-location access.</div>{% endif %}
          {% 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 %}