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

{% block body_main %}
    <div class="otree-body container">
        {% block header %}
            <div class="page-header"></div>
        {% endblock %}
        {% if progress is not None %}{% progress_bar %}{% endif %}
        <h2 class="otree-title">
            {% block title %}{% trans "Survey" %}{% endblock %}
        </h2>
        {% if view.remaining_timeout_seconds != None %}
            {% include 'otree/includes/TimeLimit.html' with form_element_id="form" %}
        {% endif %}
        {% if form.errors %}
            <div class="otree-form-errors alert alert-danger">
              {% blocktrans trimmed %}Please fix the errors in the form.{% endblocktrans %}
              {{ form.non_field_errors }}
            </div>
        {% endif %}
        <script>var js_vars = {{ js_vars|json }};</script>
        <form class="otree-form" method="post" role="form" id="form" autocomplete="off">{% csrf_token %}
            <div class="_otree-content">
                {% block content %}
                    {% block survey_content %}
                        <div class="survey-form">
                            {% formfields %}
                        </div>
                    {% endblock %}
                    {% navigation_buttons %}
                {% endblock %}
            </div>
        </form>
        {% block footer %}{% endblock %}
        <br/>
        {# need the default:False for projects with old MTurkLandingPage #}
        {% if view.is_debug|default:False %}
            <br>
            {% include 'otree/includes/debug_info.html' %}
        {% endif %}
    </div>
{% endblock %}

{% block app_styles %}
    <link rel="stylesheet" href="{% static 'otree_survey/otree_survey.css' %}">
    {{ form.media }}
{% endblock %}

{% block app_scripts %}
    {# Need to include form media twice, because jQuery is loaded twice (head + end of body) by oTree #}
    {{ form.media }}
{% endblock %}
