<section class="tab activity-{{ tab.id }} {{ tab.cssClass }}" data-tab="{{ tab.id }}" data-group="{{ tab.group }}">
    <fieldset>
        <legend>
            <span>{{ localize "DND5E.TRANSFORM.FIELDS.profiles.label" }}</span>
            <button type="button" class="unbutton control-button" data-action="addProfile"
                    data-tooltip="DND5E.TRANSFORM.Profile.Action.Create"
                    aria-label="{{ localize "DND5E.TRANSFORM.Profile.Action.Create" }}">
                <i class="fas fa-plus" inert></i>
            </button>
        </legend>
        {{#with fields.transform.fields as |fields|}}
        {{#unless @root.activity.isSpell}}
        {{ formField fields.identifier value=../source.transform.identifier }}
        {{/unless}}
        {{/with}}
        <ul class="separated-list unlist">
            {{#each profiles}}
            <li data-index="{{ index }}" data-profile-id="{{ data._id }}" data-expand-id="profile-{{ data._id }}">
                {{> ".profile" }}
            </li>
            {{else}}
            <li class="empty">
                {{{ localize "DND5E.TRANSFORM.Profile.Empty" }}}
            </li>
            {{/each}}
        </ul>
    </fieldset>
</section>

{{#*inline ".profile"}}
    <div class="form-group split-group full-width">
        <div class="form-fields">

            {{!-- CR --}}
            {{ formField fields.cr name=(concat prefix "cr") value=data.cr localize=true hint=false classes="label-top"
                         label="DND5E.TRANSFORM.FIELDS.profiles.cr.abbr" }}

            {{!-- Name --}}
            {{ formField fields.name name=(concat prefix "name") value=data.name hint=false classes="label-top"
                         placeholder=(ifThen document document.name "") }}

            {{!-- Delete --}}
            <button type="button" class="unbutton control-button" data-action="deleteProfile"
                    data-tooltip="DND5E.TRANSFORM.Profile.Action.Delete"
                    aria-label="{{ localize "DND5E.TRANSFORM.Profile.Action.Delete" }}">
                <i class="fas fa-minus" inert></i>
            </button>
        </div>
    </div>
    <input type="hidden" name="{{ prefix }}_id" value="{{ data._id }}">
    <div class="additional-tray collapsible {{ collapsed }}" data-action="toggleCollapsed">
        <label class="roboto-upper">
            <i class="fa-solid fa-gears" inert></i>
            <span>{{ localize "DND5E.AdditionalSettings" }}</span>
            <i class="fa-solid fa-caret-down" inert></i>
        </label>
        <div class="collapsible-content">
            <div class="wrapper">
                {{ formField fields.sizes name=(concat prefix "sizes") value=data.sizes
                             options=@root.creatureSizeOptions }}
                {{ formField fields.types name=(concat prefix "types") value=data.types
                             options=@root.creatureTypeOptions }}
                {{ formField fields.movement name=(concat prefix "movement") value=data.movement
                             options=@root.movementTypeOptions }}
                <div class="form-group">
                    <label>{{ localize "DND5E.TRANSFORM.FIELDS.profiles.level.label" }}</label>
                    <div class="form-fields range-fields">
                        {{ formInput fields.level.fields.min name=(concat prefix "level.min") value=data.level.min
                                     placeholder="0" ariaLabel=(localize "DND5E.LevelLimit.Min")
                                     input=@root.inputs.createNumberInput }}
                        <dnd5e-icon src="systems/dnd5e/icons/svg/range-connector.svg" class="sep"></dnd5e-icon>
                        {{ formInput fields.level.fields.max name=(concat prefix "level.max") value=data.level.max
                                     placeholder="∞" ariaLabel=(localize "DND5E.LevelLimit.Max")
                                     input=@root.inputs.createNumberInput }}
                    </div>
                    <p class="hint">{{ localize "DND5E.TRANSFORM.FIELDS.profiles.level.hint" }}</p>
                </div>
            </div>
        </div>
    </div>
{{/inline}}
