{% extends "global/Page.html" %}
{% load otree static %}

{% block title %}
    Smile Intensity Questionnaire
{% endblock %}

{% block content %}

    <div class="instructions" style="text-align:center">
    <b>
        Please rate the person in the image below according to the statements and scales provided.
    </b>
    </div>
	
	<img src="{% static image_path %}"/>	
	
     <table class="table">
		<tr>
			<th>{{ "         " }}</th>
			<td align="center">{{ "Displays no smile-" }}</td>
			<td align="center">{{ "-----------" }}</td>				
			<td align="center">{{ "-----------" }}</td>
			<td align="center">{{ "-----------" }}</td>
			<td align="center">{{ "-----------" }}</td>
			<td align="center">{{ "-----------" }}</td>
			<td align="center">{{ "Displays a broad smile"}}</td>
		</tr>	 
		{% for field in form %}
			<tr>
				<th>{{ field.label }}</th>
				{% for choice in field %}
					{% if choice.choice_label == '7' %}
						<td align="center">
							{{ choice }}
						</td>
					{% else %}
						<td align="center">
							{{ choice }}
						</td>
					{% endif %}
				{% endfor %}
			</tr>
		{% endfor %}
    </table>
    <hr>
    {% next_button %}

{% endblock %}