{{ extends 'otree/WaitPage.html' }}
{{ block title }} RONDA {{rondatitle}} {{ endblock }}
{{ block content }}
<p>
        <centre><strong>TURNO {{player.id_in_group}}</strong></centre>
    </p>
    <p>
        Hoy su cultivo necesita {{ player.demand }} horas de riego.

    </p>
    <div id="rect" style="margin: 30x 30px;">
            <svg height="100" width="420">
                <rect style="fill:white; stroke:black" width="400px" height="50px" x="10" y="25"/>
                {{if group.round_number <= 5}}
                    <rect style="fill:#9177a8;" width="{{demandrect}}px" height="20px" y="55" x="{{offsetrect}}"/>
                {{else}}
                    {{if group.round_number <= 15}}
                        <rect style="fill:#d8bf1f;" width="{{demandrect}}px" height="20px" y="55" x="{{offsetrect}}"/>
                    {{else}}
                        {{if group.round_number <= 25}}
                            <rect style="fill:#5bd062;" width="{{demandrect}}px" height="20px" y="55" x="{{offsetrect}}"/>
                        {{else}}
                            <rect style="fill:#a82108;" width="{{demandrect}}px" height="20px" y="55" x="{{offsetrect}}"/>
                        {{endif}}
                    {{endif}}
                {{endif}}

                <line style="stroke: red; stroke-width: 3; stroke-dasharray:4" x1="210"; x2="210"; y1="25"; y2="75" />
                <text width="10px" x="0px" y="20px" style="stroke: red;">00</text>
                <text width="10px" x="200px" y="20px" style="stroke: red;">12</text>
                <text width="10px" x="400px" y="20px" style="stroke: red;">24</text>
                <text width="10px" x="300px" y="72px" style="stroke: black;">{{player.demand}}</text>
            </svg>
        </div>
      <p>Esperando la decisión de su vecino</p>

{{ endblock }}