{{ block title }}
  <p>{{if subsession.round_number == 1 }}
    Practice Period Results
{{ else }}
   Period {{ round_shown }} of {{ total_shown }} Results
{{ endif }}
  </p>
{{ endblock }}





{{ block content }}


{{ if player.position == 'A' }}
    <img  src="{{ static 'positionA6.png' }}" width="500px"/>
{{ else }}
   {{ if player.position == 'B' }}
   <img  src="{{ static 'positionB6.png' }}" width="500px"/>
   {{ else }}
   <img  src="{{ static 'positionC6.png' }}" width="500px"/>
   {{ endif }}
{{ endif }}


{{if subsession.round_number <= 21 }}
    <table class="table">
        <tr>
            <th>Position</th>
            <td>A</td><td>B</td><td>C</td>
        </tr>
        <tr>
            <th>Bid</th>
            <td>{{ bid1 }} points </td><td> {{ bid2 }} points </td><td> {{ bid3 }} points</td>
        </tr>
        <tr>
            <th>Sum of bids</th>
            <td> {{sum_bids}} points </td><td> {{sum_bids}} points </td><td> {{sum_bids}} points </td>
        </tr>

        <tr>
             <th>Probability of winning (= Bid / Sum of bids)</th>
            <td>{{ prob1 }}</td><td> {{ prob2 }} </td><td>{{ prob3 }}</td>
        </tr>
    </table>
{{ elif subsession.round_number <= 41 }}
<table class="table">
        <tr>
            <th>Position</th>
            <td>A</td><td>B</td><td>C</td>
        </tr>
        <tr>
            <th>Bid</th>
            <td>{{ bid3 }} points </td><td> {{bid1}} points </td><td> {{bid2}} points</td>
        </tr>
        <tr>
            <th>Sum of bids</th>
            <td> {{sum_bids}} points </td><td> {{sum_bids}} points </td><td> {{sum_bids}} points </td>
        </tr>

        <tr>
             <th>Probability of winning (= Bid / Sum of bids)</th>
            <td>{{ prob3 }}</td><td> {{ prob1 }} </td><td>{{ prob2 }}</td>
        </tr>
    </table>
{{ else }}
<table class="table">
        <tr>
            <th>Position</th>
            <td>A</td><td>B</td><td>C</td>
        </tr>
        <tr>
            <th>Bid</th>
            <td>{{ bid2 }} points </td><td> {{ bid3 }} points </td><td> {{ bid1 }} points</td>
        </tr>
        <tr>
            <th>Sum of bids</th>
            <td> {{sum_bids}} points </td><td> {{sum_bids}} points </td><td> {{sum_bids}} points </td>
        </tr>

        <tr>
             <th>Probability of winning (= Bid / Sum of bids)</th>
            <td>{{ prob2 }}</td><td> {{ prob3 }} </td><td>{{ prob1 }}</td>
        </tr>
    </table>

{{ endif }}



<div class="move_me" style="margin-left: {{ winner_prob }}%"><div id="triangle-down"></div></div>
    <div class="progress">
        {{ for prob, position, color in graph_list }}
            <div class="progress-bar {{ color }}" role="progressbar" style="width: {{ prob|to1 }}%" aria-valuenow="{{ prob|to1 }}" aria-valuemin="0" aria-valuemax="100"> {{ position }}</div>
        {{ endfor }}
    </div>
    <div class="move_me" style="margin-left: {{ winner_prob }}%"><div id="triangle-up"></div></div>

    <br>



<p>You are at <b>Position {{ player.position }}</b> this period.</p>
<div id="feedback" style="display: none">
    {{ if player.is_winner }}
       <p><b>You have won this period.</b></p>
       <p>You receive <b>400</b> points, and your bid was <b>{{player.bid|to1}}</b> points.</p>
       <p>Thus your period payoff = <b>400</b> - <b>{{player.bid|to1}}</b> points,</p>
       <p>which equals <b>{{player.round_payoff|to1}} </b> points this period.</p>

    {{ elif player.position == 'A' and winner_position_id == 'B' }}
       <p>You have not won this period. The winner was at <b>Position {{ winner_position_id }}</b>.</p>
       <p>You receive <b>220</b> points, and your bid was <b>{{player.bid|to1}} </b> points.</p>
       <p>Thus your period payoff = <b>220</b> - <b>{{player.bid|to1}}</b> points, </p>
       <p>which equals <b>{{player.round_payoff|to1}} </b> points this period.</p>

    {{ elif player.position == 'A' and winner_position_id == 'C' }}
       <p>You have not won this period. The winner was at <b>Position {{ winner_position_id }}</b>.</p>
       <p>You receive <b>0</b> points, and your bid was <b>{{player.bid|to1}}</b> points.</p>
       <p>Thus your period payoff = <b>0</b> - <b>{{player.bid|to1}}</b> points, </p>
       <p>which equals <b>{{player.round_payoff|to1}} </b> points this period.</p>

    {{ elif player.position == 'B' and winner_position_id == 'A' }}
       <p>You have not won this period. The winner was at <b>Position {{ winner_position_id }}</b>.</p>
       <p>You receive <b>220</b> points, and your bid was <b>{{player.bid|to1}} </b>points.</p>
       <p>Thus your period payoff = <b>220</b> - <b>{{player.bid|to1}}</b> points, </p>
       <p>which equals <b>{{player.round_payoff|to1}} </b> points this period.</p>

    {{ elif player.position == 'B' and winner_position_id == 'C' }}
       <p>You have not won this period. The winner was at <b>Position {{ winner_position_id }}</b>.</p>
       <p>You receive <b>220</b> points, and your bid was <b>{{player.bid|to1}} </b> points.</p>
       <p>Thus your period payoff = <b>220</b> - <b>{{player.bid|to1}}</b> points, </p>
       <p>which equals <b>{{player.round_payoff|to1}} </b> points this period.</p>

    {{ elif player.position == 'C' and winner_position_id == 'A' }}
       <p>You have not won this period. The winner was at <b>Position {{ winner_position_id }}</b>.</p>
       <p>You receive <b>0</b> points, and your bid was <b>{{player.bid|to1}} </b> points.</p>
       <p>Thus your period payoff = <b>0</b> - <b>{{player.bid|to1}}</b> points, </p>
       <p>which equals <b>{{player.round_payoff|to1}} </b> points this period.</p>

    {{ elif player.position == 'C' and winner_position_id == 'B' }}
       <p>You have not won this period. The winner was at <b>Position {{ winner_position_id }}</b>.</p>
       <p>You receive <b>220</b> points, and your bid was <b>{{player.bid|to1}} </b> points.</p>
       <p>Thus your period payoff = <b>220</b> - <b>{{player.bid|to1}}</b> points, </p>
       <p>which equals <b>{{player.round_payoff|to1}} </b> points this period.</p>

    {{ endif }}

 {{ next_button }}
</div>

{{ endblock }}

{{ block styles }}
    <style>
        #triangle-up {
            width: 0;
            height: 0;
            border-left: 10px solid transparent;
            border-right: 10px solid transparent;
            border-bottom: 20px solid black;
            margin-left:-10px;
        }

        #triangle-down {
            width: 0;
            height: 0;
            border-left: 10px solid transparent;
            border-right: 10px solid transparent;
            border-top: 20px solid black;
            margin-left:-10px;
        }
    </style>
{{ endblock }}

{{ block scripts }}
    <script>
        var tid = setInterval(mycode, 200);
        var count = 0;
        function mycode() {
            count++;
            rnd = Math.floor(Math.random() * 100);
            $('.move_me').css('margin-left', rnd + '%');
            if(count == 10){
                abortTimer()
            }
        }
        function abortTimer() {
            $('.move_me').css('margin-left', {{ winner_prob }} + '%');
            $("#feedback").fadeIn("slow");
            clearInterval(tid);
        }
    </script>
{{ endblock }}