{% extends "base.html" %}

{% block content %}
<main class="page-shell">
  <div class="container narrow-container">
    <div class="page-heading text-center">
      <p class="eyebrow">Permission onboarding</p>
      <h1>Prepare your device for fast property pins.</h1>
      <p>These browser prompts mimic the future mobile app permissions: location, notifications, and photo access where supported.</p>
    </div>
    <div class="permission-wizard">
      <div class="permission-step">
        <div><span class="step-icon">📍</span><h2>Location</h2><p>Used to add a property at your current position and sort entries by distance.</p></div>
        <button class="btn btn-nest" data-action="request-location">Grant location</button>
        <small id="location-status" class="status-text">Not requested yet</small>
      </div>
      <div class="permission-step">
        <div><span class="step-icon">🔔</span><h2>Notifications</h2><p>Future-ready prompt for review alerts and nearby updates.</p></div>
        <button class="btn btn-nest" data-action="request-notifications">Grant notifications</button>
        <small id="notification-status" class="status-text">Not requested yet</small>
      </div>
      <div class="permission-step">
        <div><span class="step-icon">🖼️</span><h2>Photos</h2><p>Web browsers ask when you choose a file; mobile apps can request photo library permission directly.</p></div>
        <a class="btn btn-ghost" href="{% url 'add_photo_property' %}">Choose a photo</a>
        <small class="status-text">Requested by the file picker on supported platforms</small>
      </div>
    </div>
    <div class="action-dock">
      <a class="btn btn-nest btn-lg" href="{% url 'add_location_property' %}">Add current-location property</a>
      <a class="btn btn-outline-dark btn-lg rounded-pill" href="{% url 'property_list' %}">Skip to public list</a>
    </div>
  </div>
</main>
{% endblock %}