{# templates/_modal_feedback.html #}
<div class="modal-backdrop" onclick="this.remove()">
  <div class="modal" onclick="event.stopPropagation()">
    <h2>{{ _('feedback.title') }}</h2>
    <p>{{ _('feedback.prompt') }}</p>

    <form hx-post="/feedback" hx-swap="none"
          hx-on::after-request="this.closest('.modal-backdrop').remove()">
      {% if trace_id %}<input type="hidden" name="trace_id" value="{{ trace_id }}">{% endif %}

      <div class="row">
        <label>{{ _('feedback.category') }}</label>
        <select name="suggested_token_type" required>
          <option value="PERSON">{{ _('feedback.cat.person') }}</option>
          <option value="ADDRESS">{{ _('feedback.cat.address') }}</option>
          <option value="NUMBER">{{ _('feedback.cat.document') }}</option>
          <option value="DATA">{{ _('feedback.cat.other') }}</option>
        </select>
      </div>

      <input type="hidden" name="feedback_type" value="missed_entity">

      <div class="row">
        <label>{{ _('feedback.sample') }}</label>
        <textarea name="entity_text" rows="3" required
                  placeholder="{{ _('feedback.sample.placeholder') }}"></textarea>
      </div>

      <div class="row">
        <label>{{ _('feedback.context') }}</label>
        <textarea name="surrounding_before" rows="3"
                  placeholder="{{ _('feedback.context.placeholder') }}"></textarea>
        <input type="hidden" name="surrounding_after" value="">
      </div>

      <p style="font-size:var(--fs-xs);color:var(--fg-subtle);">
        &#x2139; {{ _('feedback.privacy_hint') }}
      </p>

      <div class="actions">
        <button type="button" class="btn"
                onclick="this.closest('.modal-backdrop').remove()">
          {{ _('feedback.cancel') }}
        </button>
        <button type="submit" class="btn primary">{{ _('feedback.save') }}</button>
      </div>
    </form>
  </div>
</div>