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

{% 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">
                    Including you, there are {{ Constants.num_high_players }} participants are of a type A (“A-participant”),<br>
                    and {{ Constants.num_low_players }} participants are of a type B (“B-participant”) in your group. <br><br>
                    You are a participant of type #. 
                </li>

                 <li class="list-group-item">
                    In stage 4, the work stage, participants solve decoding tasks by substituting letters with numbers.
                </li>

                <li class="list-group-item">
                    How many tasks earn how many points for each type of participant is determined in Stage 1, as explained below.
                </li>
        </div>
    </div>


    <div class="card my-3">
        <div class="card-header text-white bg-primary ">
            Stage 1: Voting stage
        </div>
        <div class="card-body">
            <div>
                You may vote for <i>Setting 1</i> or <i>Setting 2</i>.
                In both settings, each participant may solve up to 8 tasks.
                In Setting 1, each correctly solved task generates 5 points. <br>
                In Setting 2, for A-participants, none of the tasks generate points / the first 4 tasks generate 5 points when solved correctly, and  4 tasks do not generate points.
                For B-participants all 8 tasks generate 25 points/15 points.
            </div>
            <table class="table table-hover table-striped text-center my-3">
                <thead>
                <tr>
                    <th></th>
                    <th colspan="2" class="text-center">
                        Point-generating tasks and points per solved task before tax for each participant
                    </th>
                </tr>
                <tr>
                    <th></th>
                    {% for o in option_list %}
                        <th>{{ o }}</th>
                    {% endfor %}
                </tr>
                </thead>
                {% for u in final_data %}
                    <tr>
                        <td>{{ u.type_name }}-participant</td>
                        {% for d in u.data %}
                            <td>
                                <div>{{ d.tasks|task }}</div>{% if d.points > 0 %}
                                <div>{{ d.points|c }} per task</div>
                            {% endif %}</td>
                        {% endfor %}

                    </tr>
                {% endfor %}

            </table>

        </div>

    </div>








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

    </div>
{% endblock %}
{% block scripts %}
    <script>
        document.title = '{{ view.title }}'
    </script>

{% endblock %}

{% block styles %}
    <style>
        .table td {
            text-align: center;
        }
    </style>
{% endblock %}