{% macro resource(id, name) %}
<span class="resource">{{name}}</span><span id={{id}}>0</span> <span>(<span id="{{id}}-per-second">0</span>/s)</span>
{% endmacro resource %}

{% macro tool(id, name, description) %}
<div class="tool" data-tool={{id}}>
	<p class="name">{{name}} (<span class="count">0</span>, lvl <span class="level">1</span>)</p>
	<p class="description">{{description}}</p>
	<button class="buy">buy</button> <button class="upgrade">upgrade</button>
</div>
{% endmacro tool %}

<div id="click">
	<p>WARNING: no save mechanic is implemented yet!!</p>
	<h1>click</h1>
	<noscript>
		<h1>javascript is required for the clicker game!!</h1>
	</noscript>
	<div class="resources">
		{{ self::resource(id="pets", name="pets") }}
		{{ self::resource(id="barks", name="barks") }}
		{{ self::resource(id="kisses", name="kisses") }}
	</div>
	<button id="barker">bark</button>
	<div class="tools">
		{{ self::tool(id="hand", name="hand", description="don't bite the hand that pets you") }}
		{{ self::tool(id="puppy", name="puppy", description="arf arf wruff :3") }}
		{{ self::tool(id="foodBowl", name="food bowl", description="more food for more barking") }}
		{{ self::tool(id="kisser", name="kisser wow", description="someone to kiss all those poor puppies,,") }}
	</div>
</div>