{{ block title }}
Этап 1
{{ endblock }}
{{ block content }}
<link rel="stylesheet" href="{{static 'global/main.css'}}">


<div class="card">
    <div class="card-body">
        <div class="card-text">Ниже представлены 5 пирамид, показывающих разные типы общества.
            Пожалуйста, прочитайте описание каждой пирамиды и ответьте на вопросы.</div>
        <img src="https://www.dropbox.com/s/1lrpihr7am8qjyb/pyramids.png?raw=1" class="card-img-top">
        <ul class="list-group list-group-flush">
            <li class="list-group-item">{{formfield 'ideal_pyramid'}}</li>
            <li class="list-group-item">{{formfield 'russian_pyramid'}}</li>
        </ul>
    </div>
</div>


<div class="card">
    <div class="card-body">
        <p class="p_indent">Следующие вопросы относятся к средним ежемесячным доходам, которые могут включают:
            заработную плату, включая доходы от самозанятости; пособия и социальные выплаты; доходы от ренты;
            дивиденды и проценты от депозитов; роялти.
        </p>
        <ul class="list-group list-group-flush">
            <li class="list-group-item">
                <div class="alert alert-primary">Если выстроить все значения доходов граждан в ряд по возрастанию и
                    разделить его пополам, то значение, оказавшееся посередине, — <b>медианный доход</b>.
                    <p>То есть <b>половина людей</b> получает доход меньше этого значения,
                        и <b>половина людей — больше</b>.</p>
                </div>
                {{formfield 'median_income'}}</li>
            <li class="list-group-item">{{formfield 'poor_10'}}</li>
            <li class="list-group-item">{{formfield 'rich_10'}}</li>
            <li class="list-group-item">
                <label> Как Вы думаете, какой процент людей в России зарабатывает меньше, чем Вы?
                    Потяните ползунок, чтобы установить значение.
                <br>
                <input type="range" name="percent_below" min="0" max="100" oninput="updateDescription(this)" >
                </label>
                <p id="percent_below"></p>
            </li>
            <li class="list-group-item">
                <p class="alert alert-primary">Среднедушевой доход = Общий доход семьи за месяц / Количество членов семьи </p>

                {{formfield 'income'}}
                <p class="alert alert-warning">Пожалуйста, обратите внимание,
                    что здесь ответ должен быть в тысячах рублей.</p></li>
        </ul>
    </div>
</div>
{{ next_button }}
<script>
    let description = document.getElementById('percent_below');
    function updateDescription(input) {
        let percent_below = parseInt(input.value);
        description.innerText = `Я считаю, что ${percent_below}% людей в России зарабатывают меньше, чем я.`
    }
</script>
{{ endblock }}