{{ extends 'otree/WaitPage.html' }}
{{ block title }}{{ title_text }}{{ endblock }}
{{ block content }}
    <!-- {{ body_text }} -->

    <center><div class="svg_container">
        <strong><font color='blue'>Blue {{ player.oppo_in_app_id }}</font></strong> is deciding<br>
        <svg width="650" height="300" xmlns:html="http://www.w3.org/1999/xhtml">
        
            <defs>
                <marker id="arrowhead" markerWidth="5" markerHeight="5" 
                refX="0" refY="2.5" orient="auto">
                    <polygon points="0 0, 5 2.5, 0 5" />
                </marker>
            </defs>
    
            <defs>
                <marker id="arrowhead_r" markerWidth="5" markerHeight="5" 
                refX="0" refY="2.5" orient="auto">
                    <polygon points="0 0, 5 2.5, 0 5" fill = "green" />
                </marker>
            </defs>

            <defs>
                <marker id="arrowhead_g" markerWidth="5" markerHeight="5" 
                refX="0" refY="2.5" orient="auto">
                    <polygon points="0 0, 5 2.5, 0 5" fill = "gray"/>
                </marker>
            </defs>
           
            <line x1="30" y1="85" x2="90" y2="85" stroke="green" stroke-width="2" marker-end="url(#arrowhead_r)" />
            {{ if player.node > 1}}
                <line x1="130" y1="85" x2="190" y2="85" stroke="green" stroke-width="2" marker-end="url(#arrowhead_r)" />
                <line x1="230" y1="85" x2="290" y2="85" stroke="green" stroke-width="2" marker-end="url(#arrowhead_r)" />
            {{ endif }}
    
            {{ if player.node > 2}}
                <line x1="330" y1="85" x2="390" y2="85" stroke="green" stroke-width="2" marker-end="url(#arrowhead_r)" />
                <line x1="430" y1="85" x2="490" y2="85" stroke="green" stroke-width="2" marker-end="url(#arrowhead_r)" />
            {{ endif }}

            
    
            <!-- node 1 -->
            <g>
                <circle cx="15" cy="65" r="14" stroke="gray" stroke-width="2" fill="pink" />
                <line x1="30" y1="65" x2="90" y2="65" stroke="gray" stroke-width="2" marker-end="url(#arrowhead_g)" />
                <line x1="15" y1="80" x2="15" y2="190" stroke="gray" stroke-width="2" marker-end="url(#arrowhead_g)" />
                <text x="15" y="220" dominant-baseline="middle" text-anchor="middle" font-size="20" font-weight="bold" fill="pink">{{ red1 }}</text>
                <text x="15" y="245" dominant-baseline="middle" text-anchor="middle" font-size="20" font-weight="bold" fill="SkyBlue">{{ blue1 }}</text>
                <text x="15" y="25" dominant-baseline="middle" text-anchor="middle" font-size="20" font-weight="bold" fill="gray"> 1 </text>
            </g>

            <!-- node 2 -->
            <g>
                <circle cx="115" cy="65" r="15" stroke="gray" stroke-width="2" fill="SkyBlue" />
                <line x1="130" y1="65" x2="190" y2="65" stroke="gray" stroke-width="2" marker-end="url(#arrowhead_g)" />
                <line x1="115" y1="80" x2="115" y2="190" stroke="gray" stroke-width="2" marker-end="url(#arrowhead_g)" />            
                <text x="115" y="220" dominant-baseline="middle" text-anchor="middle" font-size="20" font-weight="bold" fill="pink">{{ red2 }}</text>
                <text x="115" y="245" dominant-baseline="middle" text-anchor="middle" font-size="20" font-weight="bold" fill="SkyBlue">{{ blue2 }}</text>
                <text x="115" y="25" dominant-baseline="middle" text-anchor="middle" font-size="20" font-weight="bold" fill="gray"> 2 </text>
            </g>

            <!-- node 3 -->
            <g>
                <circle cx="215" cy="65" r="15" stroke="gray" stroke-width="2" fill="pink" />
                <line x1="230" y1="65" x2="290" y2="65" stroke="gray" stroke-width="2" marker-end="url(#arrowhead_g)" />
                <line x1="215" y1="80" x2="215" y2="190" stroke="gray" stroke-width="2" marker-end="url(#arrowhead_g)" />
                <text x="215" y="220" dominant-baseline="middle" text-anchor="middle" font-size="20" font-weight="bold" fill="pink">{{ red3 }}</text>
                <text x="215" y="245" dominant-baseline="middle" text-anchor="middle" font-size="20" font-weight="bold" fill="SkyBlue">{{ blue3 }}</text>
                <text x="215" y="25" dominant-baseline="middle" text-anchor="middle" font-size="20" font-weight="bold" fill="gray"> 3 </text>
            </g>

            <!-- node 4 -->
            <g>
                <circle cx="315" cy="65" r="15" stroke="gray" stroke-width="2" fill="SkyBlue" />
                <line x1="330" y1="65" x2="390" y2="65" stroke="gray" stroke-width="2" marker-end="url(#arrowhead_g)" />
                <line x1="315" y1="80" x2="315" y2="190" stroke="gray" stroke-width="2" marker-end="url(#arrowhead_g)" />
                <text x="315" y="220" dominant-baseline="middle" text-anchor="middle" font-size="20" font-weight="bold" fill="pink">{{ red4 }}</text>
                <text x="315" y="245" dominant-baseline="middle" text-anchor="middle" font-size="20" font-weight="bold" fill="SkyBlue">{{ blue4 }}</text>
                <text x="315" y="25" dominant-baseline="middle" text-anchor="middle" font-size="20" font-weight="bold" fill="gray"> 4 </text>
            </g>

            <!-- node 5 -->
            <g>
                <circle cx="415" cy="65" r="15" stroke="gray" stroke-width="2" fill="pink" />
                <line x1="430" y1="65" x2="490" y2="65" stroke="gray" stroke-width="2" marker-end="url(#arrowhead_g)" />
                <line x1="415" y1="80" x2="415" y2="190" stroke="gray" stroke-width="2" marker-end="url(#arrowhead_g)" />
                <text x="415" y="220" dominant-baseline="middle" text-anchor="middle" font-size="20" font-weight="bold" fill="pink">{{ red5 }}</text>
                <text x="415" y="245" dominant-baseline="middle" text-anchor="middle" font-size="20" font-weight="bold" fill="SkyBlue">{{ blue5 }}</text>
                <text x="415" y="25" dominant-baseline="middle" text-anchor="middle" font-size="20" font-weight="bold" fill="gray"> 5 </text>
            </g>

            <!-- node 6 -->
            <g>
                <circle cx="515" cy="65" r="15" stroke="black" stroke-width="2" fill="blue" />
                <line x1="530" y1="65" x2="590" y2="65" stroke="#000" stroke-width="2" marker-end="url(#arrowhead)" />
                <line x1="515" y1="80" x2="515" y2="190" stroke="#000" stroke-width="2" marker-end="url(#arrowhead)" />
                <text x="515" y="220" dominant-baseline="middle" text-anchor="middle" font-size="20" font-weight="bold" fill="red">{{ red6 }}</text>
                <text x="515" y="245" dominant-baseline="middle" text-anchor="middle" font-size="20" font-weight="bold" fill="blue">{{ blue6 }}</text>
                <text x="625" y="53" dominant-baseline="middle" text-anchor="middle" font-size="20" font-weight="bold" fill="red">{{ red7 }}</text>
                <text x="625" y="78" dominant-baseline="middle" text-anchor="middle" font-size="20" font-weight="bold" fill="blue">{{ blue7 }}</text>
                <text x="515" y="25" dominant-baseline="middle" text-anchor="middle" font-size="20" font-weight="bold" fill="black"> 6 </text>
            </g>
    
    
        </svg>
    </div></center>
{{ endblock }}