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

{% block title %}
    Опрос о восприятии ИИ (часть 3)
{% endblock %}

{% block content %}
    <style>
        .form-group {
            margin-bottom: 25px;
        }
        .question-label {
            font-size: 18px;
            display: block;
            margin-bottom: 10px;
            font-weight: normal;
        }
        .scale-description {
            font-style: italic;
            color: #666;
            margin-top: 5px;
            font-size: 14px;
        }
        .form-group .controls {
            margin-top: 5px;
        }
        /* Для горизонтальных радио-кнопок */
        .form-group .radio-select-horizontal {
            margin-top: 8px;
        }
        .form-group .radio-select-horizontal label {
            margin-right: 15px;
        }
        .section-title {
            font-size: 16px;
            font-weight: bold;
            margin-top: 30px;
            margin-bottom: 15px;
            color: #333;
        }
    </style>

    <div class="card">
        <div class="card-body">
            <p class="lead">Пожалуйста, ответьте на следующие вопросы, используя шкалу от 1 до 10.</p>
            
            <hr>
            
            <!-- РАЗДЕЛ 5: ЭПИСТЕМИЧЕСКОЕ ДОВЕРИЕ / ТОЧНОСТЬ ИИ (ACC) -->
            <div class="section-title"></div>
            
            <div class="form-group">
                <div class="question-label">{{ form.acc_1.label }}</div>
                <div class="controls">
                    {{ form.acc_1 }}
                </div>
                <div class="scale-description">1 = полностью не согласен(на); 10 = полностью согласен(на)</div>
                {% if form.acc_1.errors %}
                    <div class="alert alert-danger" style="margin-top: 10px;">
                        {{ form.acc_1.errors }}
                    </div>
                {% endif %}
            </div>
            
            <div class="form-group">
                <div class="question-label">{{ form.acc_2.label }}</div>
                <div class="controls">
                    {{ form.acc_2 }}
                </div>
                <div class="scale-description">1 = полностью не согласен(на); 10 = полностью согласен(на)</div>
                {% if form.acc_2.errors %}
                    <div class="alert alert-danger" style="margin-top: 10px;">
                        {{ form.acc_2.errors }}
                    </div>
                {% endif %}
            </div>
            
            <div class="form-group">
                <div class="question-label">{{ form.acc_3.label }}</div>
                <div class="controls">
                    {{ form.acc_3 }}
                </div>
                <div class="scale-description">1 = полностью не согласен(на); 10 = полностью согласен(на)</div>
                {% if form.acc_3.errors %}
                    <div class="alert alert-danger" style="margin-top: 10px;">
                        {{ form.acc_3.errors }}
                    </div>
                {% endif %}
            </div>
            
            <hr>
            
            <!-- РАЗДЕЛ 6: МЕНТАЛЬНАЯ МОДЕЛЬ ИИ В ИГРАХ (MM) -->
            <div class="section-title"></div>
            
            <div class="form-group">
                <div class="question-label">{{ form.mm_1.label }}</div>
                <div class="controls">
                    {{ form.mm_1 }}
                </div>
                <div class="scale-description">1 = полностью не согласен(на); 10 = полностью согласен(на)</div>
                {% if form.mm_1.errors %}
                    <div class="alert alert-danger" style="margin-top: 10px;">
                        {{ form.mm_1.errors }}
                    </div>
                {% endif %}
            </div>
            
            <div class="form-group">
                <div class="question-label">{{ form.mm_2.label }}</div>
                <div class="controls">
                    {{ form.mm_2 }}
                </div>
                <div class="scale-description">1 = значительно легче предсказать человека; 10 = значительно легче предсказать AI</div>
                {% if form.mm_2.errors %}
                    <div class="alert alert-danger" style="margin-top: 10px;">
                        {{ form.mm_2.errors }}
                    </div>
                {% endif %}
            </div>
            
            <div class="form-group">
                <div class="question-label">{{ form.mm_3.label }}</div>
                <div class="controls">
                    {{ form.mm_3 }}
                </div>
                <div class="scale-description">1 = полностью не согласен(на); 10 = полностью согласен(на)</div>
                {% if form.mm_3.errors %}
                    <div class="alert alert-danger" style="margin-top: 10px;">
                        {{ form.mm_3.errors }}
                    </div>
                {% endif %}
            </div>
            
            <div class="form-group">
                <div class="question-label">{{ form.mm_4.label }}</div>
                <div class="controls">
                    {{ form.mm_4 }}
                </div>
                <div class="scale-description">1 = полностью не согласен(на); 10 = полностью согласен(на)</div>
                {% if form.mm_4.errors %}
                    <div class="alert alert-danger" style="margin-top: 10px;">
                        {{ form.mm_4.errors }}
                    </div>
                {% endif %}
            </div>
            
            <div class="form-group">
                <div class="question-label">{{ form.mm_5.label }}</div>
                <div class="controls">
                    {{ form.mm_5 }}
                </div>
                <div class="scale-description">1 = полностью не согласен(на); 10 = полностью согласен(на)</div>
                {% if form.mm_5.errors %}
                    <div class="alert alert-danger" style="margin-top: 10px;">
                        {{ form.mm_5.errors }}
                    </div>
                {% endif %}
            </div>
            
            <hr>
            
            <div class="mt-3">
                {% next_button %}
            </div>
        </div>
    </div>
{% endblock %}