{{ block styles }}
    <link href="{{ static 'global/css/styles.css' }}" rel="stylesheet">
    <link href="{{ static 'global/css/font.css' }}" rel="stylesheet">
    <style>

        .likert-centered .form-check-label,
        .likert-not-centered .form-check-label {
            margin-left: -1.5rem;
            margin-top: 1.2rem;
        }

        .likert-centered .form-check,
        .likert-not-centered .form-check{
            padding-left: 3.5rem;
        }

        .likert-centered .likert-centered__label-left,
        .likert-not-centered .likert-centered__label-left {
            margin-left: -1rem;
        }

        .likert-centered .likert-centered__label-right,
        .likert-not-centered .likert-centered__label-right {
            margin-right: -2rem;
        }

        .survey-question {
            font-size: 1.1rem;
            margin-bottom: 0.5rem;
        }

    </style>
{{ endblock }}

{{ block scripts }}
    <script src="{{ static 'global/js/disable.js' }}"></script>
{{ endblock }}

{{ block title }}
    Survey
{{ endblock }}

{{ block content }}
    <div class="survey-container">
        <div class="likert-not-centered">
            <p class="survey-question">1. Please rate your degree of trust in your own prediction.</p>
            {{ formfield 'own_trust' label="" }}
            <div class="d-flex justify-content-between">
                <div class="likert-centered__label-left">
                    Not trust at all
                </div>
                <div class="likert-centered__label-right">
                    Very much trust
                </div>
            </div>
        </div>

        {% if not is_single %}
        <div class="likert-not-centered">
            <p class="survey-question">2. Please rate your degree of trust in your partner's prediction.</p>
            {{ formfield 'partner_trust' label="" }}
            <div class="d-flex justify-content-between">
                <div class="likert-centered__label-left">
                    Not trust at all
                </div>
                <div class="likert-centered__label-right">
                    Very much trust
                </div>
            </div>
        </div>
        {% endif %}

        {% if participant.treatment != 'CG' %}
        <div class="likert-not-centered">
            {% if is_single %}
                {% if survey_third_party_is_ai %}
                <p class="survey-question">2. Please rate your degree of trust in AI's prediction.</p>
                {% else %}
                <p class="survey-question">2. Please rate your degree of trust in the third party's prediction.</p>
                {% endif %}
            {% else %}
                {% if survey_third_party_is_ai %}
                <p class="survey-question">3. Please rate your degree of trust in AI's prediction.</p>
                {% else %}
                <p class="survey-question">3. Please rate your degree of trust in the third party's prediction.</p>
                {% endif %}
            {% endif %}
            {{ formfield 'ai_trust' label="" }}
            <div class="d-flex justify-content-between">
                <div class="likert-centered__label-left">
                    Not trust at all
                </div>
                <div class="likert-centered__label-right">
                    Very much trust
                </div>
            </div>
        </div>
        {% endif %}

        {% if not is_single %}
        <div class="likert-not-centered">
            {% if participant.treatment == 'CG' %}
            <p class="survey-question">3. Please rate the degree of cooperation with your partner during the task.</p>
            {% else %}
            <p class="survey-question">4. Please rate the degree of cooperation with your partner during the task.</p>
            {% endif %}
            {{ formfield 'cooperation' label="" }}
            <div class="d-flex justify-content-between">
                <div class="likert-centered__label-left">
                    Not cooperative at all
                </div>
                <div class="likert-centered__label-right">
                    Very much cooperative
                </div>
            </div>
        </div>
        {% endif %}

        {% if participant.treatment != 'CG' %}
        <div class="likert-not-centered">
            {% if survey_third_party_is_ai %}
                {% if is_single %}
                <p class="survey-question">3. How did the presence of AI prediction impact your estimation?</p>
                {% else %}
                <p class="survey-question">5. How did the presence of AI prediction impact the collaboration?</p>
                {% endif %}
            {% else %}
                {% if is_single %}
                <p class="survey-question">3. How did the presence of the third party's prediction impact your estimation?</p>
                {% else %}
                <p class="survey-question">5. How did the presence of the third party's prediction impact the collaboration?</p>
                {% endif %}
            {% endif %}
            {{ formfield 'ai_impact' label="" }}
            <div class="d-flex justify-content-between">
                <div class="likert-centered__label-left">
                    Make it very difficult
                </div>
                <div class="likert-centered__label-right">
                    Make it very easy
                </div>
            </div>
        </div>
        {% endif %}

        {% if not is_single %}
        <div class="form-group">
            {% if participant.treatment == 'CG' %}
            <p class="survey-question">4. How do you and your partner conform to a final prediction?</p>
            {% else %}
            <p class="survey-question">6. How do you and your partner conform to a final prediction?</p>
            {% endif %}
            {{ formfield 'final_prediction' label="" }}
        </div>
        {% endif %}

        <div class="form-group" style="margin-top: 30px; padding-top: 20px; border-top: 1px solid #ddd;">
            <p class="survey-question">Did you experience any bugs or problems during the study? If so, please describe briefly. (Optional)</p>
            {{ formfield 'bug_report' label="" }}
        </div>

        <div style="text-align: center; margin-top: 20px;">
            {{ next_button }}
        </div>
    </div>
{{ endblock }}