{# ── Public "report a problem" form (phase42) ───────────────────────────────
   Shared by the facility scan page and the area scan page. Caller passes:
     action  — the POST endpoint URL
     form    — a PublicIssueReportForm instance
   Photos: up to 5, first becomes the issue's primary photo. Honeypot field
   `website` is off-screen: humans never see it, bots fill it.
#}
<div class="card shadow-sm mb-3">
  <div class="card-header bg-white fw-semibold py-2">
    <i class="bi bi-megaphone text-danger"></i> Report a Problem
  </div>
  <div class="card-body">
    <p class="text-muted small mb-3">
      See something that needs attention? Let our team know and we'll take care of it.
    </p>

    {% if form.errors %}
    <div class="alert alert-danger py-2 small">
      <strong>Please check the form:</strong>
      <ul class="mb-0 ps-3">
        {% for field, errs in form.errors.items() %}
          {% for e in errs %}<li>{{ e }}</li>{% endfor %}
        {% endfor %}
      </ul>
    </div>
    {% endif %}

    <form method="POST" action="{{ action }}" enctype="multipart/form-data">
      <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
      {# Honeypot — invisible to humans, filled by bots #}
      <div style="position:absolute;left:-9999px;top:-9999px;" aria-hidden="true">
        {{ form.website(tabindex="-1", autocomplete="off") }}
      </div>

      <div class="mb-3">
        <label class="form-label small fw-semibold">
          What did you observe? <span class="text-danger">*</span>
        </label>
        {{ form.description(class="form-control form-control-sm", rows=3,
                            maxlength=2000,
                            placeholder="Describe the issue (e.g. restroom out of paper towels, spill in lobby…)") }}
      </div>

      <div class="mb-3">
        <label class="form-label small fw-semibold">Urgency</label>
        {{ form.severity(class="form-select form-select-sm") }}
      </div>

      <div class="mb-3">
        <label class="form-label small fw-semibold">{{ area_label_prompt or 'Where in the building?' }}</label>
        {{ form.area_label(class="form-control form-control-sm",
                           placeholder="e.g. 2nd floor men's restroom") }}
      </div>

      <div class="mb-3">
        <label class="form-label small fw-semibold">Add photos (optional, up to 5)</label>
        {{ form.photos(class="form-control form-control-sm", accept="image/*") }}
        <div class="form-text small">A photo helps our team find and fix it faster.</div>
      </div>

      <div class="row g-2 mb-3">
        <div class="col-6">
          <label class="form-label small fw-semibold">Your name (optional)</label>
          {{ form.reporter_name(class="form-control form-control-sm") }}
        </div>
        <div class="col-6">
          <label class="form-label small fw-semibold">Email or phone (optional)</label>
          {{ form.reporter_contact(class="form-control form-control-sm") }}
        </div>
      </div>

      <button type="submit" class="btn btn-danger btn-sm w-100">
        <i class="bi bi-send me-1"></i> Submit Report
      </button>
    </form>
  </div>
</div>