{{ block title }}This is Round {{player.round_number}} of this part. There are {{C.NUM_ROUNDS}} rounds in this part.
<br>You are <font color='blue'>Blue {{ player.in_app_id }}</font> and you are paired with <font color='red'>Red {{ player.oppo_in_app_id }}</font>.<br>
<mark>(Note that you are never paired with <font color='red'>Red {{ player.oppo_in_app_id }}</font> in this part.)</mark>
{{ endblock }}
{{ block content }}

<div class="card bg-light m-3">
<div class="card-body">

 <style>
    .otree-timer {
        display: none;
    }
</style>

<script>
    document.addEventListener("DOMContentLoaded", function (event) {
        $('.otree-timer__time-left').on('update.countdown', function (event) {
            if (event.offset.totalSeconds === 300) {
                $('.otree-timer').show();
            }
        });
    });
</script>

    <style>
        button {
          display: inline-block;
          background-color: white;
          border-radius: 10px;
          border: 4px double #cccccc;
          color: black;
          text-align: center;
          font-size: 15px;
          padding: 10px;
          width: 150px;
          -webkit-transition: all 0.5s;
          -moz-transition: all 0.5s;
          -o-transition: all 0.5s;
          transition: all 0.5s;
          cursor: pointer;
          margin: 5px;
        }
        button:hover {
          background-color: rgb(248, 234, 112);
        }
    </style>

<div>
    <input type="hidden" name="take" id="take"/>
    <p>
        Please make your choice by clicking one of the four boxes.
        After that, please click "confirm" to confirm. 
    </p>
    <div class="svg_container">
        <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>

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

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

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

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

            <!-- node 5 -->
            <g>
                <circle cx="415" cy="65" r="15" stroke="black" stroke-width="2" fill="red" />
                <line x1="430" y1="65" x2="490" y2="65" stroke="#000" stroke-width="2" marker-end="url(#arrowhead)" />
                <line x1="415" y1="80" x2="415" y2="190" stroke="#000" stroke-width="2" marker-end="url(#arrowhead)" />
                <text x="415" y="220" dominant-baseline="middle" text-anchor="middle" font-size="20" font-weight="bold" fill="red">{{ red5 }}</text>
                <text x="415" y="245" dominant-baseline="middle" text-anchor="middle" font-size="20" font-weight="bold" fill="blue">{{ blue5 }}</text>
                <text x="415" y="25" dominant-baseline="middle" text-anchor="middle" font-size="20" font-weight="bold" fill="black"> 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>

                
            <g class="otree-btn-next svg_button btn btn-primary" id="btnContinue" onclick="choose(id)">
                <rect x="545" y="4" width="28" height="135" stroke="black" stroke-width="2"></rect>
                <text x="559" y="12.5"
                style="writing-mode: tb; glyph-orientation-vertical: 0;"  
                font-size="24" fill="black"
                >Never Take</text>
            </g>
        
            <g class="otree-btn-next svg_button btn btn-primary" id="btnStop1" onclick="choose(id)">
                <rect x={{ stop_rect_x }} y="90" width="30" height="90" stroke="black" stroke-width="2"></rect>
                <text x={{ stop_text_x }} y="100"
                style="writing-mode: tb; glyph-orientation-vertical: 0;"  
                font-size="24" fill="black"
                >Take 2</text>
            </g>

            <g class="otree-btn-next svg_button btn btn-primary" id="btnStop2" onclick="choose(id)">
                <rect x= "301" y="90" width="30" height="90" stroke="black" stroke-width="2"></rect>
                <text x= "315" y="100"
                style="writing-mode: tb; glyph-orientation-vertical: 0;"  
                font-size="24" fill="black"
                >Take 4</text>
            </g>

            <g class="otree-btn-next svg_button btn btn-primary" id="btnStop3" onclick="choose(id)">
                <rect x= "501" y="90" width="30" height="90" stroke="black" stroke-width="2"></rect>
                <text x= "515" y="100"
                style="writing-mode: tb; glyph-orientation-vertical: 0;"  
                font-size="24" fill="black"
                >Take 6</text>
            </g>
        </svg>
    </div>

    <p></p>
    <button class="otree-btn-next btn btn-primary" id="next_button" disabled>Confirm</button>
</div>

<script>
    const btnC = document.getElementById('btnContinue');
    const btnS1 = document.getElementById('btnStop1');
    const btnS2 = document.getElementById('btnStop2');
    const btnS3 = document.getElementById('btnStop3');
    
    function choose(id) {
      if (id == "btnStop1") {
          document.getElementById('take').value = 1;
      } else if (id == "btnStop2"){
          document.getElementById('take').value = 2;
      } else if (id == "btnStop3"){
          document.getElementById('take').value = 3;
      } else {
        document.getElementById('take').value = 4
      }
      // document.getElementById(id).setAttribute('fill', '#ff00ff');
      if (document.getElementById("next_button").disabled) {
        document.getElementById(id).classList.add('svg_clicked'); // first click
      } else if (!document.getElementById(id).classList.contains('svg_clicked')) { // 按鈕 havn't been click
        if (document.getElementById("btnContinue").classList.contains('svg_clicked')) {
            document.getElementById("btnContinue").classList.toggle('svg_clicked');
        }
        if (document.getElementById("btnStop1").classList.contains('svg_clicked')) {
            document.getElementById("btnStop1").classList.toggle('svg_clicked');
        }
        if (document.getElementById("btnStop2").classList.contains('svg_clicked')) {
            document.getElementById("btnStop2").classList.toggle('svg_clicked');
        }
        if (document.getElementById("btnStop3").classList.contains('svg_clicked')) {
            document.getElementById("btnStop3").classList.toggle('svg_clicked');
        }
      }
      document.getElementById(id).classList.add('svg_clicked');
      document.getElementById("next_button").disabled = false;
    //   document.getElementById("form").submit();
    }

  
</script>

<style>
.svg_button {
    fill: white;
    pointer-events: all;
    display: inline-block;
    border-radius: 10px;
    border: 4px double #cccccc;
    color: black;
    text-align: center;
    font-size: 15px;
    padding: 10px;
    width: 50px;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
    cursor: pointer;
    margin: 5px;
}
.svg_clicked {
    fill: {{ color_hover }};
    font-weight: bold;
}
/* button:disabled {
  cursor: not-allowed;
  pointer-events: all !important;
} */
.svg_button:hover {
    fill: {{ color_hover }};
    font-weight: bold;
}
.svg_button:active {
    fill: {{ color_active }};
    font-weight: bold;
}
.svg_container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}
</style>

</div>
</div>

{{ endblock }}