{% extends "global/Page.html" %}
{% load staticfiles otree %}
{% block styles %}
    <style>
        .otree-timer {
            display: none;
        }
    </style>
{% endblock %}
{% block scripts %}
    <script>
        $(function () {
            $('.otree-timer__time-left').on('update.countdown', function (event) {
                if (event.offset.totalSeconds === 60) {
                    $('.otree-timer').show();
                }
            });
        });
    </script>
{% endblock %}
{% block title %}
    <h4 style="text-align: center">
        Instructions for the match
    </h4>
{% endblock %}

{% block content %}
    <p>
        You are just matched with another participant.
        You will interact with the same participant throughout the interaction.
    </p>
    <p>
        The payoff information is fixed from round to round in the interaction and is shown below.
    </p>
    {% include Constants.ptable_template %}
    {% if player.round_number == 1 %}
        <ul>

            <li>
                The experiment proceeds as fast as the slower participant.
            </li>
            <li>
                The experiment may take longer than expected if you or the other participant takes a long time to make decision.
            </li>
{#            <li>#}
{#                Once you become familiar with the interaction, it should take no more than a few seconds to make your decision.#}
{#            </li>#}
            <li>
               If you do not make your decision within 1 minute, you will be marked as a dropout and not get paid.
            </li>
{#            <li>#}
{#              If you experience a very long loading time (more than 30 seconds) during the interaction, refresh the webpage.#}
{#            </li>#}
{#            <li>#}
{#               If you get stuck at the waiting page for the other participant for a long time (more than 2 minutes), contact the requester.#}
{#            </li>#}

        </ul>
    {% endif %}

    <div style="text-align:right">
        {% next_button %}
    </div>
{% endblock %}