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

{% block title %}
   Tax System
{% endblock %}

{% block content %}

    <br>
    <p><span class="important-text"><b>Your gross income is subject to the following tax system:</b></span></p>

    <table class="table" style="align-content: middle">
        <tr>
            <td style="width:45%; text-align:center"">
                <br>
                {% if treatment == 1 %}
                    <div style="text-align:center">
                    <br>
                        <p><img src="{% static 'experiment/taxscheme_flat.png' %}" width="350" /></p>
                    </div>
                {% elif treatment > 1 %}
                    <div style="text-align:center">
                        <p><img src="{% static 'experiment/taxscheme_prog.png' %}" width="350" /></p>
                    </div>
                {% endif %}
                {% if treatment > 1 %}
                    <p style="text-align:center"><span  style="font-size: 80%"> * MTR stands for Marginal Tax Rate </br> (the % tax on each unit of gross income within the given band).</span></p>
                {% elif treatment == 1 %}
                    <p style="text-align:center"><span  style="font-size: 80%"> * ATR stands for Average Tax Rate </br> (the % tax on all your gross income).</span></p>
                {% endif %}
                <div class="boxed"><span class="important-text" style="text-align:center"><b><p>Your gross income is {{ income }} ECU.<br>
                    Therefore, your tax due is {{ taxdue }}.</p></b></span></div>

                <br>
            </td>
            <td></td>
            <td>
            </td>
        </tr>
    </table>

    <p>{% next_button %}</p>

<p><button onclick="ReadMore()" type="button">Double-click to Review Instructions</button></p>

<div id="Instructions_Panel">
    {% include Constants.instructions_template %}
</div>

{% endblock %}