{% embed 'WebsiteBundle:Layout:layout.html.twig' with {
metaSettings: {
'viewport': 'width=device-width, initial-scale=1',
'keywords': '',
'description': 'site.metadata.description'|trans
},
ogSettings: {
'title': 'site.metadata.title'|trans,
'image': '',
'description': 'site.metadata.description'|trans,
'url': url(app.request.get('_route'), app.request.get('_route_params'))
}
} %}

  {% block content %}
    <div class="content__smaller">
      <div class="psychoQuestions" data-length="{{ panels|length }}" data-url="{{ url('ajax_psych_education_submit') }}" data-survey="{{ url('session_survey') }}">
        {% for item in panels %}
          <div>
            <div class="slide">
              <h1>{{ item.title }}</h1>
              <p>{{ item.text }}</p>
              {% if item.type == 'RADIO_QUESTION' %}
                <div class="questions">
                  <h2>{{ item.question }}</h2>
                  {% for response in item.responses %}
                    <div class="response">
                      <input type="radio" name="response{{ item.id }}" value="{{ response.value }}" id="item{{ item.id }}{{ response.id }}" data-id="{{ response.id }}" data-panel="{{ item.id }}" data-correct="{{ response.isCorrect }}">
                      <label for="item{{ item.id }}{{ response.id }}">{{ response.value }}</label>
                      <div class="check"></div>
                      <div class="incorrect__reason">{{ response.incorrectReason }}</div>
                    </div>
                  {% endfor %}
                </div>
              {% elseif item.type == 'CHECKBOX_QUESTION' %}
                <div class="questions">
                  <h2>{{ item.question }}</h2>
                  {% for response in item.responses %}
                    <div class="response rules__checkbox">
                      <input type="checkbox" name="response{{ item.id }}" value="{{ response.value }}" id="item{{ item.id }}{{ response.id }}" data-id="{{ response.id }}" data-panel="{{ item.id }}" data-correct="{{ response.isCorrect }}">
                      <label for="item{{ item.id }}{{ response.id }}">{{ response.value }}</label>
                      <div class="incorrect__reason">{{ response.incorrectReason }}</div>
                    </div>
                  {% endfor %}
                </div>
              {% endif %}
            </div>
          </div>
        {% endfor %}
      </div>
      <a class="submit__button js-next-slide">{{ 'site.session.education.button'|trans }}</a>
    </div>

  {% endblock %}
  {% block footer %}
    {% include 'WebsiteBundle:Layout/Partials:_footer.html.twig' %}
  {% endblock %}
{% endembed %}