<form class="window flexcol" autocomplete="off" onsubmit="event.preventDefault();">
    <div class="npc-skills-editor">
        <ol class="skills-list">
            <div class="skill header">
                <div>{{localize "PF2E.NPC.SkillsEditor.NameLabel"}}</div>
                <div>{{localize "PF2E.NPC.SkillsEditor.BonusLabel"}}</div>
                <div></div>
            </div>
            {{#each trainedSkills as |skill skillId|}}
                {{#unless skill.isLore}}
                    <li data-skill="{{skillId}}" id="{{skillId}}" class="skill">
                        <label class="skill-name">{{skill.label}}</label>
                        <input type="number" name="{{skillId}}" value="{{#if skill.visible}}{{skill.base}}{{else}}0{{/if}}" placeholder="0" />
                        <div class="item-controls">
                            <a class="item-control item-edit" title="{{localize "PF2E.EditItemTitle"}}"><i class="fas fa-edit"></i></a>
                            <a class="item-delete delete" title="{{localize "PF2E.NPC.Remove"}}"><i class="fas fa-trash"></i></a>
                        </div>
                    </li>
                {{/unless}}
            {{/each}}
            <li id="skill-selector" class="flexrow" style="align-items: baseline;">
                <select data-dtype="String">
                    {{#each untrainedSkills as |skill skillId|}}
                        <option value="{{skillId}}">{{skill.label}}</option>
                    {{/each}}
                </select>
                <div class="btn add-skill-button"><a><i class="fas fa-plus"></i> {{localize "PF2E.NPC.AddSkill"}}</a></div>
            </li>
            <div class="sub-section">
                <h4>{{localize "PF2E.Lore"}}</h4>
            </div>
            {{#each trainedSkills as |skill skillId|}}
                {{#if skill.isLore}}
                    <li data-skill="{{skillId}}" id="{{skillId}}" class="skill">
                        <label class="skill-name">{{skill.label}}</label>
                        <input type="number" name="{{skillId}}" value="{{skill.base}}" placeholder="0" />
                        <div class="item-controls">
                            <a class="item-control item-edit" title="{{localize "PF2E.EditItemTitle"}}"><i class="fas fa-edit"></i></a>
                            <a class="item-delete delete" title="{{localize "PF2E.NPC.Remove"}}"><i class="fas fa-trash"></i></a>
                        </div>
                    </li>
                {{/if}}
            {{/each}}
            <li id="lore-skill-creator" class="flexrow" style="align-items: baseline;">
                <input type="text" />
                <div class="btn add-lore-button"><a><i class="fas fa-plus"></i> {{localize "PF2E.AddLoreSkill"}}</a></div>
            </li>
        </ol>
        <div class="footer">
            <button type="submit"><i class="far fa-save"></i>{{localize "PF2E.UpdateActorLabel"}}</button>
        </div>
    </div>
</form>
