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

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

{% block content %}
    <style>
        .form-group {
            margin-bottom: 25px;
        }
        .form-group strong {
            display: block;
            margin-bottom: 10px;
        }
        .form-group .controls {
            margin-top: 5px;
        }
        /* Для горизонтальных радио-кнопок */
        .form-group .radio-select-horizontal {
            margin-top: 8px;
        }
        .form-group .radio-select-horizontal label {
            margin-right: 15px;
        }
    </style>

    <div class="card">
        <div class="card-body">
            <p class="lead">Пожалуйста, ответьте на следующие вопросы, используя шкалу от 1 до 10:</p>
            <p><em>1 - категорически не согласен / никогда, 10 - полностью согласен / очень часто</em></p>
            
            <hr>
            
            {% for field in form %}
                <div class="form-group">
                    <strong>{{ field.label }}</strong>
                    <div class="controls">
                        {{ field }}
                    </div>
                    {% if field.errors %}
                        <div class="alert alert-danger" style="margin-top: 10px;">
                            {{ field.errors }}
                        </div>
                    {% endif %}
                </div>
                <hr>
            {% endfor %}
            
            <div class="mt-3">
                {% next_button %}
            </div>
        </div>
    </div>
{% endblock %}