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

{{ block content }}
    <p>
        <strong>TURNO {{player.id_in_group}}</strong>
    </p>

    <p>
        {{ if player.id_in_group == 1 }}
        <div id="rect" style="margin: 30x 30px;">
            <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 <= 5}}
                    <rect style="fill:#9177a8;" width="{{demandrect}}px" height="20px" x="10" y="55"/>
                {{else}}
                    {{if group.round_number <= 15}}
                        <rect style="fill:#d8bf1f;" width="{{demandrect}}px" height="20px" x="10" y="55"/>
                    {{else}}
                        {{if group.round_number <= 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="{{texthriego}}" y="40" style="stroke: black;">{{player.hriego}}</text>
                <text width="10px" x="{{texthrvecino}}" y="40" style="stroke: black;">{{hrvecino}}</text>
                {{ if player.deficit > 0 }}
                <text width="10px" x="{{textdeficit}}" y="72" style="stroke: red;">{{player.deficit}}</text>
                {{endif}}
                <line style="stroke: black; stroke-width: 2; stroke-dasharray:2" x1="{{linehriego}}"; x2="{{linehriego}}"; y1="25"; y2="75" />
            </svg>
        </div>

        <p>
            {{ 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>
        <p>
            Su ganancia es {{player.payoff}}
        </p>
        {{ else }}
        <div id="rect" style="margin: 30x 30px;">
            <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 <= 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="{{texthriego}}" y="40" style="stroke: black;">{{player.hriego}}</text>
                <text width="10px" x="{{texthrvecino}}" y="40" style="stroke: black;">{{hrvecino}}</text>
                {{ if player.deficit > 0 }}
                <text width="10px" x="{{textdeficit}}" y="72" style="stroke: red;">{{player.deficit}}</text>
                {{endif}}
                <line style="stroke: black; stroke-width: 2; stroke-dasharray:2" x1="{{linehriego}}"; x2="{{linehriego}}"; y1="25"; y2="75" />

            </svg>
        </div>

        <p>
            Su vecino decidió regar <strong>{{ group.kept }}</strong> horas
        </p>
        <p>
            {{ 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>
        <p>
            Su ganancia es {{player.payoff}}
        </p>
        {{ endif }}

        <button class="otree-btn-next btn btn-primary">Ir a la siguiente ronda</button>
    </p>
{{ endblock }}