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

{% if not labeledPoint %}
	{% macro labeledPoint(p) %}
	<g class="{{p.color or '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>
	{% endmacro %}
{% endif %}

<svg width="{{boardSize+padding*2}}" height="{{boardSize+padding*2}}" version="1.1" xmlns="http://www.w3.org/2000/svg">
	<defs>
		<style type="text/css"><![CDATA[
		{% block style %}
			rect{fill:white;stroke:black;stroke-width:1px}
			text{font-family:"DejaVu Sans";text-anchor:middle;}
			line{stroke:black;stroke-width:0.7px}
			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}
		{% endblock %}
		]]></style>
	</defs>
	<g 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 %}
			{{labeledPoint(p)}}
		{% endfor %}

		{# labels #}
		{% for p in labels %}
			{{labeledPoint(p)}}
		{% endfor %}
	</g>
</svg>