{% extends "core/article_page.html" %}
{% load wagtailcore_tags gem_tags %}
{% block content %}
<div class="comments__container {% if self.get_parent_section.get_effective_extra_style_hints %}comments__container--{{self.get_parent_section.get_effective_extra_style_hints}}{% endif %}">
  <div class="comments">
    <div class="comments__wrapper">
      <div class="heading heading--secondary">
        <h4 class="heading__component">
          {% trans "Report comment" %}
        </h4>
      </div>
      <h3 class="heading__subtitle">
        {% trans "Please let us know why you are reporting this comment" %}.
      </h3>
      <form method="post" class="comments__form comments__form--report" novalidate>
      {% csrf_token %}
        {% for field in form %}
            <fieldset>
            {% if field|fieldtype == 'RadioSelect' %}
                {% for value, text in field.field.choices %}
                <div class="choice-group choice-group--comments choice-group__radio">
                <input name="{{ field.name }}"
                id="value-{{ field.id_for_label }}-{{ forloop.counter }}" type="radio" value="{{ value }}" {% if field.value == value %}checked="checked"{% endif %}/>
                <label for="value-{{ field.id_for_label }}-{{ forloop.counter }}">
                  {{ text|capfirst }}
                </label>
                </div>
                {% endfor %}
            {% elif field|fieldtype == 'CheckboxSelectMultiple' %}
                <div class="choice-group choice-group--comments">
                    <input name="{{ field.name }}" id="value-{{ field.label|idfromlabel }}-{{ forloop.counter }}" type="checkbox" value="{{ value }}" {% if field.value.0 == value %}checked="checked"{% endif %}/>
                    <label for="value-{{ field.label|idfromlabel }}-{{ forloop.counter }}">
                      {{ text|capfirst }}
                    </label>
                </div>
            {% endif %}
            </fieldset>
        {% endfor %}
        <div class="call-to-action--group">
          <button type="submit" class="call-to-action__button call-to-action__button--primary">{% trans "Report Comment" %}</button>
        </div>
      </form>
      <div class="call-to-action--group">
        <a href="{% pageurl article %}" class="call-to-action__button call-to-action__button--previous">{% trans "Back to article" %}
        </a>
      </div>
    </div>
  </div>
</div>
{% endblock %}