<form id="{{ appId }}" data-level="{{ level }}" data-id="{{ advancement.id }}" data-type="{{ type }}"
      data-current="{{ choices.current }}" data-max="{{ choices.max }}">
    <h3>{{{ title }}}</h3>

    <div class="drop-target">
        {{#if advancement.hint}}
        <p>{{ advancement.hint }}</p>
        {{/if}}

        {{#if replaceable}}
        <div class="item-name">
            <label class="flexrow">
                <h4>{{ localize "DND5E.ADVANCEMENT.ItemChoice.Replacement.None" }}</h4>
                <input type="radio" name="replace" value="" {{ checked noReplacement }}>
            </label>
        </div>
        {{/if}}

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

        {{#each previousLevels}}
        <h4 class="form-header">{{ localize "DND5E.AdvancementLevelHeader" level=@key }}</h4>
        {{#each this}}
        <div class="item-name flexrow {{#if replaced}}replaced{{/if}}">
            <div class="item-image" style="background-image: url('{{ img }}');"></div>
            <label class="flexrow">
                <h4><a data-uuid="{{ uuid }}">{{ name }}</a></h4>
                {{#if (and @root.replaceable (not replaced))}}
                <input type="radio" name="replace" value="{{ id }}" {{ checked checked }}>
                {{/if}}
            </label>
        </div>
        {{/each}}
        {{/each}}

        <h4 class="form-header">
            {{ localize "DND5E.ADVANCEMENT.ItemChoice.Chosen" current=choices.current max=choices.max }}
        </h4>

        {{#each items}}
        <div class="item-name flexrow">
            <div class="item-image" style="background-image: url({{ img }});"></div>
            <label class="flexrow">
                <h4>
                    <a data-uuid="{{this.uuid}}">{{ name }}</a>
                </h4>
                {{#if dropped}}
                <button type="button" class="unbutton control-button item-control item-delete"
                        data-tooltip="DND5E.ItemDelete" aria-label="{{ localize 'DND5E.ItemDelete' }}">
                    <i class="fa-solid fa-trash" inert></i>
                </button>
                <input type="hidden" name="{{ uuid }}" value="true" data-dtype="Boolean">
                {{else}}
                <dnd5e-checkbox name="{{ uuid }}" {{ checked checked }} {{ disabled disabled }}></dnd5e-checkbox>
                {{/if}}
            </label>
        </div>
        {{/each}}

        {{#if advancement.configuration.allowDrops}}
        <p class="hint centered">{{ localize "DND5E.AdvancementFlowDropAreaHint" }}</p>
        {{/if}}
    </div>
</form>
