{{if ronda <= 5}}
    {{ block title }}<centre> RONDA PRUEBA </centre>{{ endblock }}
{{else}}
    {{ block title }}<centre> RONDA {{rondatitle}} </centre>{{ endblock }}
{{endif}}

{{ 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: 30px 30px ;">
        <svg height="100" width="420">
            <rect style="fill:white; stroke:black" width="400px" height="50px" x="10" y="25"/>
            {{if ronda <= 5}}
                <rect style="fill:#9177a8;" width="{{demandrect}}px" height="20px" x="10" y="55"/>
            {{else}}
                {{if ronda <= 15}}
                    <rect style="fill:#d8bf1f;" width="{{demandrect}}px" height="20px" x="10" y="55"/>
                {{else}}
                    {{if ronda <= 25}}
                        <rect style="fill:#5bd062;" width="{{demandrect}}px" height="20px" x="10" y="55"/>
                    {{else}}
                        <rect style="fill:#a82108;" width="{{demandrect}}px" height="20px" x="10" y="55"/>
                    {{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="100px" y="72px" style="stroke: black;">{{player.demand}}</text>
        </svg>
    </div>
    <p>
        Cuantas horas va a regar
    </p>

    {{ formfields }}<button class="otree-btn-next btn btn-primary">Aceptar</button>
    <style>
        .otree-btn-next {
            display: inline-block;
        }
    </style>
    {{ include_sibling 'instructions.html' }}

{{ endblock }}