<div class="subcard" id="question-{{ question.id }}">
  <h3>
    {{ question.text }}
    {% if question.required %}
      <span class="badge bg-red">Required</span>
    {% endif %}
    {% if question.scope == "guest" %}
        <span class="badge bg-blue">Asked for each guest</span>
    {% endif %}
  </h3>

  {% if question.help_text %}
    <p class="help-text">{{ question.help_text }}</p>
  {% endif %}

  {% if question.scope == "guest" %}

    {% for guest in guests %}
      <h4>{{ guest.name }}</h4>

      <form
        hx-post="{% url 'events:rsvp-post-response-guest' rsvp.id question.id guest.id %}"
        hx-target="#rsvp-questions"
        hx-swap="outerHTML"
        hx-trigger="change"
      >
        {% csrf_token %}
        {% include "rsvp/rsvp_page_questions_answer.html" %}
      </form>
    {% endfor %}

  {% elif question.scope == "rsvp" %}

    <form
      hx-post="{% url 'events:rsvp-post-response' rsvp.id question.id %}"
      hx-target="#rsvp-questions"
      hx-swap="outerHTML"
      hx-trigger="change"
    >
      {% csrf_token %}
      {% include "rsvp/rsvp_page_questions_answer.html" %}
    </form>

  {% endif %}
</div>