<form id="{{ appId }}" data-level="{{ level }}" data-id="{{ advancement.id }}" data-type="{{ type }}">
    <h3>{{{ title }}}</h3>
    {{#if advancement.hint}}<p>{{ advancement.hint }}</p>{{/if}}

    {{#if abilities.options}}
    <div class="form-group">
        <label>{{ localize "DND5E.SpellAbility" }}</label>
        <select name="ability">
            {{ selectOptions abilities.options selected=abilities.selected }}
        </select>
    </div>
    {{/if}}

    {{#each items}}
    <div class="item-name flexrow">
        <div class="item-image" style="background-image: url('{{ img }}');"></div>
        <label class="flexrow">
            <h4>
                <a data-uuid="{{ uuid }}">{{ name }}</a>
            </h4>
            {{#if optional}}
            <dnd5e-checkbox name="{{ uuid }}" {{ checked checked }}></dnd5e-checkbox>
            {{else}}
            <input type="hidden" name="{{ uuid }}" value="true" data-dtype="Boolean">
            {{/if}}
        </label>
    </div>
    {{/each}}
</form>
