{% extends 'cwa/base.html.j2' %}

{%- block body %}
  <h1>Go: {{ game.human_id }}</h1>

  <form method="POST">
    
    <div class="field">
      <svg xmlns="http://www.w3.org/2000/svg" width="{{ 50 * boardsize }}" height="{{ 50 * boardsize }}" version="2.0">
	<defs>
	  <radialGradient id="white-stone" fx="40%" fy="25%">
	    <stop offset="0%" stop-color="#ffffff" />
	    <stop offset="70%" stop-color="#dddddd" />
	    <stop offset="100%" stop-color="#bbbbbb" />
	  </radialGradient>
	  <radialGradient id="black-stone" fx="40%" fy="25%">
	    <stop offset="0%" stop-color="#444444" />
	    <stop offset="70%" stop-color="#222222" />
	    <stop offset="100%" stop-color="#000000" />
	  </radialGradient>
	</defs>
        <rect class="go-background" x="0" y="0" width="{{ 50 * boardsize }}" height="{{ 50 * boardsize }}" />
	{% for row in range(boardsize) %}
	  <line class="go-line" x1="25" y1="{{ 25 + row * 50 }}" x2="{{ 25 + (boardsize-1) * 50 }}" y2="{{ 25 + row * 50 }}" />
	{% endfor %}
        {% for col in range(boardsize) %}
	  <line class="go-line" x1="{{ 25 + col * 50 }}" y1="25" x2="{{ 25 + col * 50 }}" y2="{{ 25 + (boardsize-1) * 50 }}" />
	{% endfor %}
	{% if boardsize == 19 %}
	  {% for y in [3, 9, 15] %}
	    {% for x in [3, 9, 15] %}
	      <circle class="go-hoshi" cx="{{ x * 50 + 25 }}" cy="{{ y * 50 + 25 }}" r="7" />
	    {% endfor %}
	  {% endfor %}
	{% elif boardsize == 13 %}	
	  {% for y, x in [[3, 3], [3, 9], [9, 3], [9, 9], [6, 6]] %}
	    <circle class="go-hoshi" cx="{{ x * 50 + 25 }}" cy="{{ y * 50 + 25 }}" r="7" />
	  {% endfor %}
	{% elif boardsize == 9 %}	
	  {% for y, x in [[2, 2], [2, 6], [6, 2], [6, 6], [4, 4]] %}
	    <circle class="go-hoshi" cx="{{ x * 50 + 25 }}" cy="{{ y * 50 + 25 }}" r="7" />
	  {% endfor %}
	{% endif %}
	{% for row in range(boardsize) %}
	  {% for col in range(boardsize) %}
	    <!-- {{ row }} {{ col }} {{ field[row][col] }} -->
	    {% if field[row][col] == 0 and current_player == colormap[player.uuid] and not abandoned and score is none %}
	      <circle class="go-stone go-stone-empty go-stone-{{ colormap[player.uuid].name.lower() }}" data-row="{{ row }}" data-col="{{ col }}" cx="{{ col * 50 + 25 }}" cy="{{ row * 50 + 25 }}" r="20" />
            {% elif field[row][col] == 1 %}
	      <circle class="go-stone go-stone-white" cx="{{ col * 50 + 25 }}" cy="{{ row * 50 + 25 }}" r="20" />
            {% elif field[row][col] == 2 %}
	      <circle class="go-stone go-stone-black" cx="{{ col * 50 + 25 }}" cy="{{ row * 50 + 25 }}" r="20" />
	    {% elif field[row][col] == 5 %}
	      <circle class="go-stone go-stone-dead go-stone-white" cx="{{ col * 50 + 25 }}" cy="{{ row * 50 + 25 }}" r="20" />
	    {% elif field[row][col] == 6 %}
	      <circle class="go-stone go-stone-dead go-stone-black" cx="{{ col * 50 + 25 }}" cy="{{ row * 50 + 25 }}" r="20" />
            {% endif %}
	  {% endfor %}
	{% endfor %}
	{% for row in range(boardsize) %}
	  {% for col in range(boardsize) %}
	    <!-- {{ territory[row][col] }} -->
	    {% if territory[row][col] == 3 %}
	      <rect class="go-territory go-territory-white" x="{{ col * 50 + 20 }}" y="{{ row * 50 + 20 }}" width="10" height="10" />
	    {% elif territory[row][col] == 4 %}
	      <rect class="go-territory go-territory-black" x="{{ col * 50 + 20 }}" y="{{ row * 50 + 20 }}" width="10" height="10" />
            {% endif %}
	  {% endfor %}
	{% endfor %}
      </svg>
    </div>

    {% if abandoned %}
      <b>Game abandoned</b>
    {% elif score is not none %}
      <b>
	{% if score > 0 %}
	  Black won with {{ score }} points.
	{% else %}
	  White won with {{ -score }} points.
	{% endif %}
      </b>
    {% elif current_player == colormap[player.uuid] %}
      <input id="go-input-pass" name="go-input-submit" type="submit" value="Pass" />
      <input id="go-input-place" name="go-input-submit" type="submit" value="Place" />
      <input id="go-input-row" name="go-input-row" type="hidden" value="-1" />
      <input id="go-input-col" name="go-input-col" type="hidden" value="-1" />
    {% endif %}
    
  </form>

  <a href="{{ baseurl }}/{{ player.uuid }}/{{ game.uuid }}/play">Refresh</a>

  <ul>
    {% for p in players.keys()  %}
    <li>
      <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" version="2.0">	
	<defs>
	  <radialGradient id="white-stone" fx="40%" fy="25%">
	    <stop offset="0%" stop-color="#ffffff" />
	    <stop offset="70%" stop-color="#dddddd" />
	    <stop offset="100%" stop-color="#bbbbbb" />
	  </radialGradient>
	  <radialGradient id="black-stone" fx="40%" fy="25%">
	    <stop offset="0%" stop-color="#444444" />
	    <stop offset="70%" stop-color="#222222" />
	    <stop offset="100%" stop-color="#000000" />
	  </radialGradient>
	</defs>
	<circle class="go-stone go-stone-{{ colormap[p].name.lower() }}" cx="10" cy="10" r="9" />
      </svg>
      {% if p == player.uuid %}
	<b>{{ game.players[p].name }}</b>
      {% else %}
	{{ game.players[p].name }}
      {% endif %}
      : {{ captures[colormap[p].value-1] }}
      {% if colormap[p].value == 1 %}
	+ {{ komi }}
      {% endif %}
  {% endfor %}
  </ul>

  <script src="{{ baseurl }}/static/gogame.js"></script>
{%- endblock %}