{{ extends "global/Page.html" }}
{{ block title }}
{{ endblock }}

{{ block content }}
<ul class="nav nav-tabs mb-3" id="myTab" role="tablist">
    <li class="nav-item" role="presentation">
        <button class="nav-link disabled active" id="instructions1-tab" data-bs-target="#instructions1" type="button"
            role="tab" aria-controls="initial-details" aria-selected="true">
            Instructions I
        </button>
    </li>
    <li class="nav-item" role="presentation">
        <button class="nav-link disabled" id="instructions2-tab" data-bs-target="#instructions2" type="button"
            role="tab" aria-controls="instructions2" aria-selected="true">
            Instructions II
        </button>
    </li>
    <li class="nav-item" role="presentation">
        <button class="nav-link disabled" id="instructions3-tab" data-bs-target="#instructions3" type="button"
            role="tab" aria-controls="instructions3" aria-selected="true">
            Instructions III
        </button>
    </li>
    <li class="nav-item" role="presentation">
        <button class="nav-link disabled" id="questions-tab" data-bs-target="#questions" type="button" role="tab"
            aria-controls="questions" aria-selected="false">
            Comprehension Questions
        </button>
    </li>
</ul>
<div class="tab-content" id="myTabContent">
    <div class="tab-pane fade show active" id="instructions1" role="tabpanel" aria-labelledby="instructions1-tab">
        <h2>Instructions I</h2>
        <p>This part consists of {{ C.NUM_TASKS }} rounds, one for each task you worked on previously (Counting Zeros,
            Decoding Task, Solving Captchas).</p>
        <p>Remember that in each task, you were matched with another participant (a different one per task) called your <b>matched worker</b>.
            Thereafter, the earnings that both you and your matched worker generated were put in a <b>common
                account</b> for that task.</p>
        <p><b>All your matched workers</b> have a <b>{{ opp_reward_group.upper }}</b> reward type.</p>
        <p>Your decision in the first part of each round is to divide each common account between yourself and your matched worker. 
            One of the {{ C.NUM_TASKS }} rounds will be randomly selected, and your decision for that round will determine the bonus that you will receive. 
            Likewise, your choice in a randomly selected round also determines the bonus received by your matched worker.</p>
        <p>As an example, if you and your matched worker have earned a total of {{ 10|cu }} in the Counting Zeros
            task, you will decide how to split the {{ 10|cu }} between yourself and the other participant.
            You will first be asked to state your intention about how much you want to keep in a slider, like the one
            below.</p>
        <div class="img-container">
            <img src="{{ static 'global/intention_box.png' }}" style="max-width:60%" />
        </div>
        <button onclick=" showTab('#instructions2')" type="button" class="btn-primary btn">
            Next
        </button>
    </div>
    <div class="tab-pane fade show" id="instructions2" role="tabpanel" aria-labelledby="instructions2-tab">
        <h2>Instructions II</h2>
        <p>You will then have the opportunity to discuss your decision with a <b>conversation partner</b>.
            Your conversation partner is also a participant of the experiment, who also has to decide how to divide their common account between themselves and their matched worker. 
            Your conversation partner is <b>NOT</b> your matched worker. As a reminder, your matched worker is the participant you are dividing the common account with.</p>
        <p>You will use a chat box to communicate with your conversation partner. <b>The conversation partner is different in every round.</b></p>
        <p>In the chat, we ask you to discuss how you want to divide the earnings in the common account between yourself and your matched worker.
            Please also discuss <b>how fair or appropriate you view your choices and the ones of your
            conversation partner</b>. You have {{ C.MIN_ON_CHAT }} minutes for this conversation.</p>
        <p>It is extremely important for the success of this study that you actually use the chat to write something and have a conversation.</p>
        <p>Next to the chat, you will also see two sliders: the <b>top</b> one is your own slider, while the bottom one is your
            conversation partner's slider.
            <b>Use your own slider</b> to indicate how you want to divide your common account between yourself and your matched worker. 
            Both sliders are also visible to your conversation partner.</p>
        <p>When the timer runs out, the amount you indicated on the slider determines your final decision. You <b>MUST</b> use
            the slider before the timer runs out.</p>
        <p>Below is an example screenshot of how that page looks like. The values on the actual decision screen may differ:</p>
        <div class="img-container mb-3">
            <img src="{{ static 'global/comm_page.png' }}"
                style="max-width:90%;border:thin solid rgb(201, 201, 201);border-radius: 0.5%;" />
        </div>
        <button onclick="showTab('#instructions1')" type="button" class="btn-primary btn">
            Previous
        </button>
        <button onclick="showTab('#instructions3')" type="button" class="btn-primary btn">
            Next
        </button>
    </div>
    <div class="tab-pane fade show" id="instructions3" role="tabpanel" aria-labelledby="instructions3-tab">
        <h2>Instructions III</h2>
        <p>In the next page, you will be asked to answer some questions about the instructions above.
            You have {{ C.NUM_ATTEMPTS }} attempts to answer correctly.</p>
        <button onclick="showTab('#instructions2')" type="button" class="btn-primary btn">
            Previous
        </button>
        <button onclick="showTab('#questions')" type="button" class="btn-primary btn">
            Next
        </button>
    </div>
    <div class="tab-pane fade" id="questions" role="tabpanel" aria-labelledby="questions-tab">
        <h2>Comprehension Questions</h2>
        <p><i>Please re-read the instructions on the previous page if you are unsure. You will have two chances to get
                the answers right.</i></p>
        {{ include "MultipleChoiceForm.html" }}
        <button onclick="showTab('#instructions3')" type="button" class="btn-primary btn">
            Previous
        </button>
        <button class="otree-btn-next btn btn-primary">Next</button>
    </div>
</div>

{{ endblock }}

{{ block styles }}
<style>
    .nav-tabs .nav-item.show .nav-link,
    .nav-tabs .nav-link.active {
        background-color: transparent;
        border-color: transparent;
    }

    .nav-link {
        padding: 0.5rem 1.5rem 0.5rem 0;
    }

    .img-container {
        display: flex;
        justify-content: center;
    }
</style>
{{ endblock }}

{{ block scripts }}
<script>
    const triggerTabList = [].slice.call(
        document.querySelectorAll("#myTab button")
    );
    triggerTabList.forEach(function (triggerEl) {
        const tabTrigger = new bootstrap.Tab(triggerEl);

        triggerEl.addEventListener("click", function (event) {
            event.preventDefault();
            tabTrigger.show();
        });
    });

    function showTab(nextTarget) {
        const triggerEl = document.querySelector(
            `#myTab button[data-bs-target="${nextTarget}"]`
        );
        bootstrap.Tab.getInstance(triggerEl).show(); // Select tab by name
        window.scrollTo(0, 0);
    }
</script>
{{ endblock }}