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

{% block title %}
    {# Instructions - best to leave empty #}
{% endblock %}

{% block styles %}
    <style>
        .otree-timer {
            display: none;
        }
        .table>tbody>tr>td, .table>tbody>tr, .table>tfoot>tr>td, .table>tfoot>tr, .table>thead>tr>td, .table>thead>tr
        {
            padding:0;
        }
        .table tr,.table td {
            height: 30px;
            text-align: center
        }
    </style>
    <link rel="stylesheet" type="text/css" href="{% static 'game_quiz/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"
            >Overview</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"
            >Instructions 1</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"
            >Instructions 2</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"
            >Interface</a>
        </li>
    </ul>

    <div class="tab-content" id="myTabContent">
        <!-- Tab 1 content -->
        <div class="tab-pane show active" id="part1" role="tabpanel" aria-labelledby="part1-tab">
            <ul>
                <li>
                    In the next task, you will be matched with a new participant (different from the previous task)
                    and interact in real time.
                </li>
                      <li>
                You will be working with a fictitious currency called Francs. Francs will be converted to US Dollars at an exchange rate of
            </li>
{#            <p style="text-align:center"><strong>{{ exchange_rate |c }}  = $1.</strong></p>#}
            <div style="text-align:center"> {{ 100 |c }}  = {{ real_currency }}{{ points100|floatformat:2 }}</div>
                <li>
                    This task will proceed as fast as the slower participant.
                    It is important make your decisions in a timely manner.
                </li>
                <li>
                    The interaction ends for the two participants matched together if one of them drops out.
                </li>
                <li>
                    <strong>
                        If you do not make your decisions within 1 minute in each round of the interaction, you will be marked as a dropout.
                    </strong>
                </li>
                <li>
                    <strong>
                        The dropout participant will not get paid.
                    </strong>
                    The other participant influenced by the dropout will be paid based on the earnings accumulated when the dropout occurred.
                </li>
                <li>
                    To make sure you understand the experiment, there is a quiz at the end of the instructions.
                </li>
                <li>
                    You have {{ quiz_minutes }} minutes and {{ quiz_attempts}} chances to answer all the questions correctly.
                </li>
                <li>
                    You will still be able to read the instructions when you start the quiz.
                </li>
                <li>
                    If you fail to pass the quiz, you will not be able to continue with the experiment or get paid.
                </li>
            </ul>

            <button  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">
            {% include Constants.instructions_template1 %}
            <button  type="button" class="prevtab btn-primary btn back">Previous</button>
            <button type="button" class="nexttab btn-primary btn next">Next</button>
        </div>

        <!-- Tab 3 content -->
        <div class="tab-pane" id="part3" role="tabpane3" aria-labelledby="part3-tab">
            {% include Constants.instructions_template2 %}
{#            <button type="button" class="prevtab btn-primary btn back">Previous</button>#}
{#            <button onclick="submit()" class="nexttab btn-primary btn next">Start the Quiz</button>#}
            <button  type="button" class="prevtab btn-primary btn back">Previous</button>
            <button type="button" 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">#}
{#                            <h3></h3>#}
{#                        </div>#}
            <ul>
                <li>
                    The following illustrates the interface you will see during the interaction.
                </li>
                <br>
                <div style="text-align:center">
                    <img src="{% static 'game_quiz/decision_page.png' %}" height="500"/>
                </div>
                <br>
                <li>
                    You need to make your choice W or Y.
                </li>
                <li>
                    The history of the interaction is shown at the bottom of the page.
                </li>
            </ul>
            <button type="button" class="prevtab btn-primary btn back">Previous</button>
            <button onclick="submit()" class="nexttab btn-primary btn next">Start the Quiz</button>
        </div>
    </div>
{% endblock %}


{% block scripts %}
    <script>
        $(function () {
            $('.otree-timer__time-left').on('update.countdown', function (event) {
                if (event.offset.totalSeconds == 60) {
                    $('.otree-timer').show();
                }
            });
        });
    </script>

    <script src="{% static 'game_quiz/carousel.js' %}"></script>
{% endblock %}