{{ block title }}
    Этап 1. Распределение доходов
{{ endblock }}
{{ block content }}
<link rel="stylesheet" href="{{static 'global/main.css'}}">

<script>
    $(document).ready(function(){$('[data-toggle="popover"]').popover({ trigger: "hover" });});
</script>


<!--<script src="/jquery/2.1.1/jquery.min.js"></script>-->

<div class="card ">
    <div class="card-body">
        <p class="p_indent">Здесь Вы можете посмотреть, как выглядит распределение доходов. Ниже изображены децили в распределении
            доходов населения. Для этого наведите курсор и изучите информацию.</p>


        <h4>Ваш ежемесячный доход: {{player.income}} {{if player.income > 0}} 000 {{endif}} рублей. </h4>
        <p style="text-align: center">Вы находитесь в {{player.decile}} дециле распределения.
            Это значит, что {{people_poorer}}% людей беднее, чем Вы.</p>
        <p></p>


        <div class="common">

            {{for i, k in decile_below}}
            <div class="bar lower" data-toggle="popover" data-trigger="hover focus" data-bs-placement="bottom"
                 data-bs-content="<h6> Это {{i}} дециль. </h6> <p>Доход: {{k}} рублей в месяц</p>"
                 data-bs-html="true">
            </div>
            {{endfor}}

            <div class="bar in" data-toggle="popover" data-trigger="hover focus" data-bs-placement="bottom"
                 data-bs-title="Вы здесь!"
                 data-bs-custom-class="custom-popover"
                 data-bs-content="Ваш доход соответствует {{player.decile}} децилю."></div>

            {{for i, k in decile_higher}}
            <div class="bar higher" data-toggle="popover" data-trigger="hover focus" data-bs-placement="bottom"
                 data-bs-content="<h6> Это {{i}} дециль. </h6> <p>Доход: {{k}} рублей в месяц</p>" data-bs-html="true">
            </div>
            {{endfor}}

        </div>
    </div>
</div>

<div class="card">
    <div class="card-body">

        <p class="p_indent">Вы можете увидеть ответы, которые Вы указали ранее и фактические значения медианного дохода,
            среднего ежемесячного дохода 10% самых бедных и самых богатых людей, Ваше место в распределении
            доходов России сегодня.</p>
        <p class="p_indent">Пожалуйста, внимательно изучите разницу между указанными Вами ответами
            и реальными показателями</p>

        <table class="table">
            <thead>
            <tr class="table-primary">
                <th style="width: 30%"></th>
                <th class="text_center">Ваше решение</th>
                <th class="text_center">Фактическое значение</th>
            </tr>
            </thead>
            <tbody class="table-group-divider">
            <tr>
                <td>Медианное значение</td>
                <td> {{player.median_income}} рублей </td>
                <td> 31100 рублей </td>
            </tr>
             <tr>
                <td>Средний ежемесячный доход у 10% самых бедных жителей России</td>
                <td> {{player.poor_10}} рублей </td>
                <td> 7759 рублей </td>
            </tr>
            <tr>
                <td>Средний ежемесячный доход у 10% самых богатых жителей России</td>
                <td> {{player.rich_10}} рублей</td>
                <td> 124 515 рублей </td>
            </tr>
            <tr>
                <td> Процент людей, который зарабатывают меньше, чем Вы</td>
                <td> {{player.percent_below}}%</td>
                <td> {{people_poorer}}% </td>
            </tr>
            </tbody>
        </table>
    </div>
</div>


{{ next_button }}

{{ endblock }}