{% 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">
                    You and three other participants are a group.
                </li>

                <li class="list-group-item">
                    Participants can generate points by solving decoding tasks.
                </li>
                <li class="list-group-item">
                    A vote over two <i>"Settings"</i> determines the number of point-generating tasks and how
                    many points a solved task generates.

                </li>
                <li class="list-group-item">
                    A share of the generated points ( “tax rate”) is paid to a “tax account” which is distributed evenly among all
                    the members of the group.

                </li>

            </ul>
            <div>&nbsp;</div>
            <div>Please click through the stages of the experiment:</div>


            <div class="stage-container my-3">
                <div data-id=1 class='ids shown shadow-lg round alert'>
                    <div class="lead">Stage 1: Voting stage</div>
                    You see a table of possible tax rates and <i>Settings</i>. For each tax rate, you indicate which Setting
                    you prefer. (We explain the Settings on the next page.)
                </div>
                <div data-id=2 class='ids shadow-lg alert round'>
                    <div class="lead">Stage 2: Draw of the decision-maker</div>
                    One participant is randomly drawn. The Setting he/she selected applies for the group.
                </div>
                <div data-id=3 class='ids shadow-lg alert round'>
                    <div class="lead">Stage 3: Draw of the tax rate</div>
                    One of the tax rates you saw in the table in voting stage is randomly drawn ans applies for the group.
                </div>
                <div data-id=4 class='ids shadow-lg alert round'>
                    <div class="lead">Stage 4: Work stage</div>
                    Task-solving takes place.
                </div>
                <div data-id=5 class='ids shadow-lg alert round'>
                    <div class="lead">Stage 5: Payoff stage</div>
                    Payoffs are calculated and everybody sees who has solved how many tasks.
                </div>

            </div>


        </div>
    </div>

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

    </div>


{% endblock %}

{% block styles %}
    <style>
        .ids {
            display: none
        }

        .ids.shown {
            display: block !important
        }
    </style>
{% endblock %}

{% block scripts %}
    <script>

        const cont = $(".stage-container");
        let counter = 1;
        const maxitems = 5;
        const minitems = 1;
        const backbtn = $('#id_back_back');
        const forwardbtn = $('#id_back_forward');
        backbtn.html('Previous page');
        forwardbtn.html('Show next stage');

        const changeCounter = (v) => {
            if (counter + v <= maxitems && counter + v >= minitems) {
                counter += v;
                return true
            } else {
                return false
            }
        };
        $('.navbuttons').click(function (e) {

            let val = $(this).data('val');
            let change = changeCounter(val);
            if (change) {e.preventDefault();} else {return}
            switch (counter) {
                case minitems:
                    $(this).html('Page back');
                    break;
                case maxitems:
                    $(this).html('Next page');
                    break;
                default:
                    backbtn.html('Previous stage');
                    forwardbtn.html('Show next stage');
            }

            $(".ids").each(function (i) {
                if ($(this).data('id') <= counter) {
                    $(this).addClass('shown');
                } else {
                    $(this).removeClass('shown');
                }
            });
        });


    </script>
{% endblock %}