{% macro attribute(name, value) %}
<div class="attribute">
    <label for="{{name}}">{{name}}:</label>
    <input id="{{name}}" name="{{name}}" type="number" min="0" value="{{value}}" />
</div>
{% endmacro attribute %}

{% macro skill(name, value) %}
<div class="skill">
    <label for="{{name}}">{{name}}:</label>
    <input id="{{name}}" name="{{name}}" type="number" min="0" value="{{value}}" />
</div>
{% endmacro skill %}

{% macro merit(name, value) %}
<div class="merit">
    <input type="text" class="merit-name" value="{{name}}" />
    <input type="number" class="merit-dots" min="0" value="{{value}}" /> <span>Dots</span>
    <button class="remove-merit" data-event-type="remove-merit">X</button>
</div>
{% endmacro merit %}


{% macro item(name) %}
<div class="item">
    <input type="text" class="item-name" value="{{name}}" />
    <button class="remove-item" data-event-type="remove-item">X</button>
</div>
{% endmacro item %}