{% from "_macros.html" import modal %}
{% call modal("report-dialog", "Report content") %}
<form class="modal-body" id="report-form" method="POST" action="/reports/post/none">
    <p class="text-secondary auth-field-gap">Tell us which rule this breaks. A moderator reviews every report; see the <a href="/docs/community-guidelines.html">community guidelines</a>.</p>
    <div class="auth-field auth-field-gap">
        <label for="report-reason">Reason</label>
        <select id="report-reason" name="reason" required>
            {% for reason in REPORT_REASONS %}
            <option value="{{ reason.key }}">{{ reason.label }}</option>
            {% endfor %}
        </select>
    </div>
    <div class="auth-field auth-field-gap">
        <label for="report-detail">Detail (optional)</label>
        <textarea id="report-detail" name="detail" rows="4" maxlength="2000" placeholder="What should the moderator know?"></textarea>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-ghost modal-close">Cancel</button>
        <button type="submit" class="btn btn-primary">Send report</button>
    </div>
</form>
{% endcall %}
