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

{% block title %}
{{ view.title }}
{% endblock %}

{% block content %}
    <div class="card">

        <div class="card-body">
            <ul class="list-group list-group-flush">
                <li class="list-group-item">
                    When everyone has completed the task-solving (stage 2), each income is decreased by the tax rate.
                    All taxes collected are then redistributed evenly among all members of the group. (That is, you receive one quarter of the tax account.)
                </li>
                <li class="list-group-item">
                    So, how much you earn depends on:

                    <ul class="list-group numbered-list ml-4">
                        <li>
                            whether you are an A- or B-participant and
                        </li>
                        <li>
                            {% if not subsession.partial %}
                                only B-members
                            {% else %}
                                or
                                B-members do {{ high_tasks }}
                                tasks, and Participants A {{ low_tasks }} tasks each
                            {% endif %}
                            (Setting 2), which also implies different points per task
                            solved, and
                        </li>
                        <li>
                            which tax rate applies to your group.
                        </li>
                    </ul>
                </li>
                <li class="list-group-item">
                    An overview of the income before and after taxes for each possible decision and tax rate can be
                    displayed in the app
                    below. Choose an example of the implemented Setting and the tax rate and you will see

                    <ul class="list-group numbered-list ml-4">
                        <li>
                            the before-tax income
                        </li>
                        <li>
                            the tax payments and
                        </li>
                        <li>
                            the after-tax income for A- and B-members.
                        </li>
                    </ul>

                </li>
            </ul>

        </div>
    </div>
    <div id="app"></div>






    <div class="my-3">
    {% formfields %}

    </div>

{% endblock %}
{% block scripts %}
    <script>
        window.params = {{ params|json }}
        window.taxes = {{ subsession.tax_rates }}
    </script>
    <link href="{% static 'reallocation-calc/css/chunk-vendors.css' %}" rel=stylesheet>
    <link href="{% static 'reallocation-calc/css/app.css' %}" rel=preload as=stylesheet>
    <script src="{% static 'reallocation-calc/js/chunk-vendors.js' %}">
    </script>
    <script src="{% static 'reallocation-calc/js/app.js' %}"></script>

{% endblock %}

{% block styles %}
    <style>
        .list-group-item.numbered-list {
        {#display: list-item;#}
        }

        .nopadding {
            padding-left: 0px !important;
            padding-right: 0px !important;
        }

    </style>
     <style>
        .v-application--wrap {
            min-height: 0
        }

        .otree-body, .container {
            max-width: 970px !important;
        }

        @media (min-width: 1904px) {
            .container {
                max-width: 970px !important;
            }
        }
    </style>
{% endblock %}