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

{% block title %}
Instructions
{% endblock %}

{% block styles %}
<link rel="stylesheet" type="text/css" href="{% static 'instruction_tabs/carousel.css' %}">
{% endblock %}

{% block content %}

<!-- Tabs on top of page -->
<ul class="nav nav-tabs fixed-top navbar-light bg-light justify-content-center" id="myTab" role="tablist">
    <li class="nav-item tab_header">
        <a class="nav-link active tab_element" id="part1-tab" data-toggle="tab" href="#part1" role="tab"
           aria-controls="part1"
           onclick="topFunction()">1. Roles</a>
    </li>

    <li class="nav-item tab_header">
        <a class="nav-link tab_element" id="part2-tab" data-toggle="tab" href="#part2" role="tab"
           aria-controls="part2"
           onclick="topFunction()">2. Task</a>
    </li>

    <li class="nav-item tab_header">
        <a class="nav-link tab_element" id="part3-tab" data-toggle="tab" href="#part3" role="tab"
           aria-controls="part3"
           onclick="topFunction()">3. Player A can impose fee</a>
    </li>

    <li class="nav-item tab_header">
        <a class="nav-link tab_element" id="part4-tab" data-toggle="tab" href="#part4" role="tab"
           aria-controls="part4"
           onclick="topFunction()">4. Player B chooses project</a>
    </li>

    <li class="nav-item tab_header">
        <a class="nav-link tab_element" id="part5-tab" data-toggle="tab" href="#part5" role="tab"
           aria-controls="part5"
           onclick="topFunction()">5. Comprehension</a>
    </li>
</ul>


<div class="tab-content" id="myTabContent">

    <!-- Tab 1 content -->
    <div class="customInstructions tab-pane show active" id="part1" role="tabpanel" aria-labelledby="part1-tab">
        <div class="card-header bg-transparent mainheader">

            <h5>The Roles</h5>
            </div>


        <div class="card bg-light instructions">
            <div class="card-body">

        <p>
            In this task <b>three participants</b> are randomly matched in a group.
            These are real participants also recruited on Prolific.
            Their identity will remain anonymous to one another.
            The three participants are randomly assigned one of three possible roles:
            Player A, Player B or Player C.
        </p>

                <p>
                    <b>Player A and B</b> are each asked to make a choice that will affect the earnings of all three
                    participants in the group. <b>Player C</b> has no choice to make.
                </p>

        <p>
            {% if player.id_in_group == 1 %}
                <b>You are assigned to the role of <span class="text-primary">Player A</b></span>.
            {% elif player.id_in_group == 2 %}
                <b>You are assigned to the role of <span class="text-primary">Player B</b></span>.
            {% endif %}
        </p>

                <p>
                    <b>Click on the tabs at the top of the screen to navigate between the Instructions and the
                        Comprehension questions.</b>
                </p>
            </div>
        </div>

<!--        <button onclick="topFunction()" type="button" class="nexttab btn-primary btn next">Next</button>-->
    </div>


    <!-- Tab 2 content -->
    <div class="tab-pane" id="part2" role="tabpane2" aria-labelledby="part2-tab">
        <div class="card-header bg-transparent mainheader">
            <h5>The "Choose-a-Project" Task</h5>
        </div>

        <div class="card bg-light instructions">
            <div class="card-body">

                <p>
                    In this task there are <b>two types of projects</b> that <b>Player B</b>
                    has to choose from:
                </p>
                <ul>
                    <li>A <b>Communal Project</b> that pays £8 to each of the three players</li>
                <li>An <b>Exclusive Project</b> between
                    {% if group.random_game == 1 %}
                    <b>Player B and C</b> that pays £12 to Player B and Player C and £6 to Player A.
                    {% else %}
                    <b>Player A and B</b> that pays £12 to Player A and Player B and
                    £{{ Constants.excluded_payoff }} to Player C.
                    {% endif %}
                    </li>
                </ul>

                <center>
                    {% if Constants.excluded_payoff == 6 %}
                    <img src="{% static image_path %}" width="500px"/>
                    {% else %}
                    <img src="{% static "instructions/other_R.png" %}" width="500px"/>
                    {% endif %}
                </center>
            </div>
        </div>

<!--        <button onclick="topFunction()" type="button" class="prevtab btn-primary btn back">Previous</button>-->
<!--        <button type="button" class="nexttab btn-primary btn next">Next</button>-->
    </div>


    <!-- Tab content 3 -->
    <div class="tab-pane" id="part3" role="tabpane3" aria-labelledby="part3-tab">
        <div class="card-header bg-transparent mainheader">
            <h5>Player A can impose a fee</h5>
        </div>

        <div class="card bg-light instructions">
            <div class="card-body">

                <p>
                    Before Player B chooses
                    between the Communal Project and Exclusive Project, <b>Player A decides whether to
                    impose a fee</b> against Player B for choosing the Exclusive Project.
                </p>

                <p>
                    If Player A imposes the fee, the earnings of
                    {% if Constants.other_NS %}
                    Player B is
                    {% else %}
                    each player who is part of the Exclusive Project are
                    {% endif %}
                    <b>reduced by £2</b>.
                    The figure below illustrates the possible earnings depending on
                    Player A's decision.
                </p>

                <center>
                    {% if Constants.excluded_payoff == 6 and not Constants.other_NS %}
                    <img src="{% static image_path_fee %}" width="500px"/>
                    {% elif Constants.excluded_payoff == 10 %}
                    <img src="{% static "instructions/other_R_pun.png" %}" width="500px"/>
                    {% elif Constants.other_NS %}
                    <img src="{% static "instructions/other_NS_pun.png" %}" width="500px"/>
                    {% endif %}
                </center>

            </div>
        </div>

<!--        <button onclick="topFunction()" type="button" class="prevtab btn-primary btn back">Back</button>-->
<!--        <button onclick="submit()" class="nexttab btn-primary btn next">Next</button>-->
    </div>

        <!-- Tab content 4 -->
    <div class="tab-pane" id="part4" role="tabpane4" aria-labelledby="part4-tab">
        <div class="card-header bg-transparent mainheader">
            <h5>Player B chooses a project</h5>
        </div>

        <div class="card bg-light instructions">
            <div class="card-body">

                <p>
                    After learning whether Player A has imposed a fee, <b>Player B chooses</b> between the
                    Communal Project and the
                    {% if group.random_game == 1 %}
                    Exclusive Project between Player B and C.
                    {% else %}
                    Exclusive Project between Player A and B.
                    {% endif %}
                </p>

                <center>
                    {% if Constants.excluded_payoff == 6 and not Constants.other_NS %}
                    <img src="{% static image_path_fee %}" width="500px"/>
                    {% elif Constants.excluded_payoff == 10 %}
                    <img src="{% static "instructions/other_R_pun.png" %}" width="500px"/>
                    {% elif Constants.other_NS %}
                    <img src="{% static "instructions/other_NS_pun.png" %}" width="500px"/>
                    {% endif %}
                </center>

            </div>
        </div>

<!--        <button onclick="topFunction()" type="button" class="prevtab btn-primary btn back">Back</button>-->
<!--        <button onclick="submit()" class="nexttab btn-primary btn next">Next</button>-->
    </div>

    <!-- Tab content 5 -->
    <div class="tab-pane" id="part5" role="tabpane5" aria-labelledby="part5-tab">
        <div class="card-header bg-transparent mainheader">

            <p>Before proceeding to the next screen, please answer the following comprehension questions.
            You may navigate between the tabs to review the instructions.
                </p>

        <div class="card bg-light instructions">
            <div class="card-body">

                {% if group.random_game == 1 %}
        <b>Q1) Which project gives the following earnings: Player A: £6, Player B: £12, and Player C: £12?</b>
        {% else %}
        <b>Q1) Which project gives the following earnings: Player A: £12, Player B: £12, and Player C:
            £{{ Constants.excluded_payoff }}?</b>
        {% endif %}
        {% formfield player.q1 %}

        <b>Q2) If Player A chooses to impose a fee and Player B chooses the Exclusive Project,
            what are the players’ earnings?</b>
        {% formfield player.q2 %}

        <b>Q3) The Communal Project gives all players the same earnings of £8. </b>
        {% formfield player.q3 %}
            </div>
        </div>

<!--        <button onclick="topFunction()" type="button" class="prevtab btn-primary btn back">Back</button>-->
        <button onclick="submit()" class="nexttab btn-primary btn next">Next</button>
    </div>

</div>

{% endblock %}


{% block scripts %}
<script src="{% static 'instruction_tabs/carousel.js' %}"></script>

<script type="text/javascript">
        $(document).ready(function() {
            if (location.hash) {
                $("a[href='" + location.hash + "']").tab("show");
            }
            $(document.body).on("click", "a[data-toggle='tab']", function(event) {
                location.hash = this.getAttribute("href");
            });
        });
        $(window).on("popstate", function() {
            var anchor = location.hash || $("a[data-toggle='tab']").first().attr("href");
            $("a[href='" + anchor + "']").tab("show");
        });


</script>
{% endblock %}