{{ block content }}

<h4>Part III - Round {{ player.round_number }} of 6 - Interaction results</h4>
    <p>  </p> <p>  </p>

    <div style="height: 360px">
        <h6>Results</h6>
        <p>
            That is the conclusion of the round.
            The outcome of the 5 sets are shown below.
        </p>

        {{ if player.treatment_manu }}
        <table class='table table-bordered text-left'
               style='width: auto; margin: auto'>
            <tr>
                <th>Set #</th>
                <th>No. of games</th>
                <th>Correctly implemented?</th>
                <th>Total payoff</th>
            </tr>
            <tr>
                <td>1</td>
                <td> {{ length_1 }}</td>
                <td> {{ correct_1 }}</td>
                <td> {{ player.outcome_1 }} points</td>
            </tr>
            <tr>
                <td>2</td>
                <td> {{ length_2 }}</td>
                <td> {{ correct_2 }}</td>
                <td> {{ player.outcome_2 }} points</td>
            </tr>
            <tr>
                <td>3</td>
                <td> {{ length_3 }}</td>
                <td> {{ correct_3 }}</td>
                <td> {{ player.outcome_3 }} points</td>
            </tr>
            <tr>
                <td>4</td>
                <td> {{ length_4 }}</td>
                <td> {{ correct_4 }}</td>
                <td> {{ player.outcome_4 }} points</td>
            </tr>
            <tr>
                <td>5</td>
                <td> {{ length_5 }}</td>
                <td> {{ correct_5 }}</td>
                <td> {{ player.outcome_5 }} points</td>
            </tr>
        </table>
        {{ endif }}

        {{ if not player.treatment_manu }}

        <table class='table table-bordered text-left'
               style='width: auto; margin: auto'>
            <tr>
                <th>Set #</th>
                <th>No. of games</th>
                <th>Total payoff</th>
            </tr>
            <tr>
                <td>1</td>
                <td> {{ length_1 }}</td>
                <td> {{ player.outcome_1 }} points</td>
            </tr>
            <tr>
                <td>2</td>
                <td> {{ length_2 }}</td>
                <td> {{ player.outcome_2 }} points</td>
            </tr>
            <tr>
                <td>3</td>
                <td> {{ length_3 }}</td>
                <td> {{ player.outcome_3 }} points</td>
            </tr>
            <tr>
                <td>4</td>
                <td> {{ length_4 }}</td>
                <td> {{ player.outcome_4 }} points</td>
            </tr>
            <tr>
                <td>5</td>
                <td> {{ length_5 }}</td>
                <td> {{ player.outcome_5 }} points</td>
            </tr>
        </table>

        {{ endif }}

    </div>

    <div style="height: 300px">
        <h6>Please click 'Next' when you are ready to proceed. </h6>
        <p>  </p> <p>  </p>
        {{ 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>



{{ endblock }}