<?xml version="1.0" standalone="no"?>
{% set cellSize=boardSize/18 %}
{% set stoneRadius=cellSize/2-1 %}

<svg width="{{boardSize+padding*2}}" height="{{boardSize+padding*2}}" version="1.1" xmlns="http://www.w3.org/2000/svg" alignment-baseline="center">
	<defs>
		<style type="text/css"><![CDATA[
			rect{fill:white;stroke:black;stroke-width:1}
			text{font-family:"DejaVu Sans";text-anchor:middle;}
			line{stroke:black;stroke-width:0.7}
			circle{stroke:black}
			circle.b, .b circle, .w text, .e text{fill:black}
			circle.w, .w circle, .b text{fill:white}
			.e circle {stroke:none;fill:white}
		]]></style>
	</defs>
	<g width="{{boardSize}}" height="{{boardSize}}" transform="translate({{padding}},{{padding}})">
		<rect x="0" y="0" width="{{boardSize}}" height="{{boardSize}}"/>
		{# grid #}
		{% for i in range(1,18) %}
			<line x1="0" x2="{{boardSize}}" y1="{{(i*cellSize) | round(2)}}" y2="{{(i*cellSize) | round(2)}}"/>
			<line x1="{{(i*cellSize) | round(2)}}" x2="{{(i*cellSize) | round(2)}}" y1="0" y2="{{boardSize}}"/>
		{% endfor %}

		{# stars #}
		{% for y in [3,9,15] %}
			{% for x in [3,9,15] %}
		  <circle cx="{{(x*cellSize) | round(2)}}" cy="{{(y*cellSize) | round(2)}}" r="2" class="b"/>
			{% endfor %}
		{% endfor %}

		{# stones #}
		{% for p in stones %}
			<circle cx="{{(p.x*cellSize) | round(2)}}" cy="{{(p.y*cellSize) | round(2)}}" r="{{stoneRadius|round(2)}}" class="{{p.color}}"/>
		{% endfor %}

		{# moves #}
		{% for p in moves %}
			<g width="{{cellSize|round(2)}}" height="{{cellSize|round(2)}}" class="{{p.color}}" transform="translate({{(p.x*cellSize) | round(2)}},{{(p.y*cellSize) | round(2)}})">
				<circle cx="0" cy="0" r="{{stoneRadius|round(2)}}"/>
				<text y="0.4em">{{p.label}}</text>
			</g>
		{% endfor %}

		{# labels #}
		{% for p in labels %}
			<g width="{{cellSize|round(2)}}" height="{{cellSize|round(2)}}" class="e" transform="translate({{(p.x*cellSize) | round(2)}},{{(p.y*cellSize) | round(2)}})">
				<circle cx="0" cy="0" r="{{stoneRadius|round(2)}}"/>
				<text y="0.4em">{{p.label}}</text>
			</g>
		{% endfor %}
	</g>
</svg>