{{ block content }}

<h4>Part II - Practice Round {{ player.round_number }} of 3 - Match</h4>
    <p>  </p> <p>  </p>

    <div>
        <div style="background-color: #F5F1F0; height: 315px; width: 100%; border-radius: 15px; padding-top: 10px; padding-bottom: 5px; padding-left: 15px; padding-right: 15px">
            <b>Your counterpart</b> <br>
            <b>Plan-of-action:</b> {{ description_opp }}  <br>
            <p> <b>Instruction diagram: </b> </p>
            <img src="{{ static image_opp }}" width="785px" height="157px"/>
        </div>
    </div>

    <div style="width: 100%; height: 5px; overflow: hidden">
    </div>


    <div style="width: 100%; height:470px; overflow: hidden;">
        <div style="width: 465px; height: 440px; float: left; border-width:1.5px;border-style:solid;margin-top:10px; padding-top: 10px; padding-bottom: 5px;padding-left: 15px; padding-right: 15px ;border-radius:15px;">
            <div style="width: 440px; height: 145px; margin-top:0px;padding:0px;border-radius:0px;">
                <b>Option A </b> <br>
                <b>Plan-of-action:</b> {{ description_a }}  <br> <br>
            </div>
            <div style="height: 25px"> <b>Instruction diagram: </b> </div>
            <div style="padding:5px">
                <img src="{{ static image_a }}" width="423" height="235"/>
            </div>
        </div>
        <div style="width: 465px; height: 440px; float: right; border-width:1.5px;border-style:solid;margin-top:10px; padding-top: 10px; padding-bottom: 5px; padding-left: 15px; padding-right: 15px ;border-radius:15px;">
            <div style="width: 440px; height: 145px; margin-top:0px;padding:0px;border-radius:0px;">
                <b>Option B </b> <br>
                <b>Plan-of-action:</b> {{ description_b }}  <br> <br>
            </div>
            <div style="height: 25px"> <b>Instruction diagram: </b> </div>
            <div style="padding:5px">
                <img src="{{ static image_b }}" width="423" height="235"/>
            </div>
        </div>
    </div>


    <div style="width: 900px; height: 150px">
        <div style="width: 900px; height:15px">
            <span style="font-weight: 550">Please choose your preferred plan-of-action. Then click 'Next' when you are ready to proceed. </span>
        </div>
            {{ formfields }}
            {{ next_button }}
    </div>

    <div>
      {{ include Constants.PAYOFF_TABLE }}
    </div>

    <button type="button" class="collapsible">Instructions Page</button>
    <div class="content">
      {{ include Constants.INSTRUCTIONS_TEMPLATE }}
    </div>

<style>
    .collapsible {
        background-color: lightgray;
        color: black;
        cursor: pointer;
        padding: 18px;
        width: 100%;
        border: none;
        text-align: left;
        outline: none;
        font-size: 18px;
        font-weight: 550;
    }

    .active, .collapsible:hover {
      background-color: grey;
    }

    .content {
      padding: 0 18px;
      display: none;
      overflow: hidden;
      background-color: #f1f1f1;
    }
</style>

<script>
    var coll = document.getElementsByClassName("collapsible");
    var i;

    for (i = 0; i < coll.length; i++) {
      coll[i].addEventListener("click", function() {
        this.classList.toggle("active");
        var content = this.nextElementSibling;
        if (content.style.display === "block") {
          content.style.display = "none";
        } else {
          content.style.display = "block";
        }
      });
    }
</script>
{##}
{#<style>#}
{#    .otree-timer {#}
{#        display: none;#}
{#    }#}
{#</style>#}

<script>
    document.addEventListener("DOMContentLoaded", function (event) {
        $('.otree-timer__time-left').on('update.countdown', function (event) {
            if (event.offset.totalSeconds === 120) {
                $('.otree-timer').show();
            }
        });
    });
</script>

{{ endblock }}