{{ block content }}
<div style="align-items: center;justify-content: center;display: flex;">
{{if ronda <= 3}}
    <h2>RONDA DE PRUEBA</h2>
{{else}}
    <h2>RONDA {{rondatitle}}</h2>
{{endif}}
</div>
<hr>

<div style="align-items: center;justify-content: center;display: flex;">
    <p>
        Hoy su cultivo necesita <b>{{ player.demand }}</b> horas de riego.
    </p>
</div>
    <div id="rect" style="margin: 30px 30px ; align-items: center;justify-content: center;display: flex;">
        <svg height="100" width="420">
            <rect style="fill:white; stroke:black" width="400px" height="50px" x="10" y="25"/>
            {{if ronda <= 3}}
                <rect style="fill:#9177a8;" width="{{demandrect}}px" height="20px" x="10" y="55"/>
            {{else}}
                {{if ronda <= 8}}
                    <rect style="fill:#5bd062;" width="{{demandrect}}px" height="20px" x="10" y="55"/>
                {{else}}
                    <rect style="fill:#d8bf1f;" width="{{demandrect}}px" height="20px" x="10" y="55"/>
                    <!--rect style="fill:#a82108;" width="{{demandrect}}px" height="20px" x="10" y="55"/-->

                {{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="100px" y="72px" style="stroke: black;">{{player.demand}}</text>
        </svg>
    </div>

<div style="align-items: center;justify-content: center;display: flex;">
    <p>
        Si a usted le tocara el <b>TURNO 1</b> cuantas horas regaría?
    </p>
</div>
<div style="align-items: center;justify-content: center;display: flex;">
{{ formfield_errors 'kept' }}
</div>
<div style="align-items: center;justify-content: center;display: flex;">
    <input class="form-control" id="id_kept" name="kept" size="20">
</div>
<br>

<div style="align-items: center;justify-content: center;display: flex;">
    <button class="otree-btn-next btn btn-primary">Aceptar</button>
    <style>
        .otree-btn-next {
            display: inline-block;
        }
    </style>
</div>

{{ endblock }}