{{ 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>
        <strong>Se le asignó el</strong>
        <strong>TURNO {{player.turno}}</strong>
    </p>
</div>
<div style="align-items: center;justify-content: center;display: flex;">
    <p>Usted necesitaba <b>{{player.demand}}</b> horas de riego</p>
</div>
    {{if player.turno == 1}}

    <div id="rect" style="margin: 30x 30px;align-items: center;justify-content: center;display: flex;">
            <svg height="100" width="420">
                <rect style="fill:#fbfccf; " width="400px" height="50px" x="10" y="25"/>
                <rect style="fill:#d7dbdf;" width="{{hriegorect}}px" height="50px" x="10" y="25"/>
                {{if group.round_number <= 3}}
                    <rect style="fill:#9177a8;" width="{{demandrect}}px" height="20px" x="10" y="55"/>
                {{else}}
                    {{if group.round_number <= 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"/>
                    {{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="{{texthriego}}" y="40" style="stroke: black;">{{player.kept}}</text>
                <text width="10px" x="{{texthrvecino}}" y="40" style="stroke: black;">{{left}}</text>
                {{ if player.deficit > 0 }}
                <text width="10px" x="{{textdeficit}}" y="72" style="stroke: blue;">{{player.deficit}}</text>
                {{endif}}
                <line style="stroke: black; stroke-width: 2; stroke-dasharray:2" x1="{{linehriego}}"; x2="{{linehriego}}"; y1="25"; y2="75" />
            </svg>
        </div>
<div style="align-items: center;justify-content: center;display: flex;">
    <p>Decidió regar <b>{{player.kept}}</b> horas</p>
</div>
    {{endif}}

    {{if player.turno == 2}}

    <div id="rect" style="margin: 30x 30px; align-items: center;justify-content: center;display: flex;">
            <svg height="100" width="420">
                <rect style="fill:#d7dbdf; border: black 1px;" width="400px" height="50px" x="10" y="25"/>
                <rect style="fill:#fbfccf;" width="{{hriegorect}}px" height="50px" x="{{offshriego}}" y="25"/>
                {{if group.round_number <= 3}}
                    <rect style="fill:#9177a8;" width="{{demandrect}}px" height="20px" y="55" x="{{offsetrect}}"/>
                {{else}}
                    {{if group.round_number <= 8}}
                        <rect style="fill:#5bd062;" width="{{demandrect}}px" height="20px" y="55" x="{{offsetrect}}"/>
                    {{else}}
                        <rect style="fill:#d8bf1f;" width="{{demandrect}}px" height="20px" y="55" x="{{offsetrect}}"/>
                    {{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="{{texthriego}}" y="40" style="stroke: black;">{{left}}</text>
                <text width="10px" x="{{texthrvecino}}" y="40" style="stroke: black;">{{player.kept_vecino}}</text>
                {{ if player.deficit > 0 }}
                <text width="10px" x="{{textdeficit}}" y="72" style="stroke: blue;">{{player.deficit}}</text>
                {{endif}}
                <line style="stroke: black; stroke-width: 2; stroke-dasharray:2" x1="{{linehriego}}"; x2="{{linehriego}}"; y1="25"; y2="75" />

            </svg>
        </div>
    <div style="align-items: center;justify-content: center;display: flex;">
        <p>Su vecino decidió regar {{player.kept_vecino}} horas</p>
    </div>
    {{endif}}
<div style="align-items: center;justify-content: center;display: flex;">
    <p style="color:#FF0000";>
            {{if player.deficit == 0 }}
            Hoy no le faltó agua
            {{else}}
            {{if player.deficit == 1 }}
            Hoy le faltó <strong>{{ player.deficit }}</strong> hora de riego.
            {{else}}
            Le faltaron <strong>{{ player.deficit }}</strong> horas de riego.
            {{endif}}
            {{endif}}
    </p>
</div>
<div style="align-items: center;justify-content: center;display: flex;">
    <p> Su ganancia en esta ronda es {{player.payoff}}</p>
</div>

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