{{#if featSlot.feat}}
    <li class="slot" data-item-id="{{featSlot.feat.id}}" data-slot-id="{{featSlot.id}}">
        <div class="item-name drag-handle" data-drag-handle>
            <div class="feat-slot-title">{{featSlot.label}}</div>
            <a class="item-image framed" data-action="item-to-chat">
                <img class="item-icon" src="{{featSlot.feat.img}}" alt="{{featSlot.feat.name}}">
                <i class="fa-solid fa-message"></i>
            </a>
            <h4 class="name"><a data-action="toggle-summary">{{featSlot.feat.name}}</a></h4>
        </div>
        <div class="item-controls">
            {{#if @root.editable}}
                <a data-action="edit-item" data-tooltip="PF2E.EditItemTitle"><i class="fa-solid fa-fw fa-edit"></i></a>
                <a data-action="delete-item" data-tooltip="PF2E.DeleteItemTitle"><i class="fa-solid fa-fw fa-trash"></i></a>
            {{/if}}
        </div>
        <div class="item-summary" hidden></div>
        {{#if featSlot.children}}
            {{> nestedSlots slot=featSlot}}
        {{/if}}
    </li>
{{else}}
        {{> emptySlot slot=featSlot}}
{{/if}}

{{#*inline "nestedSlots"}}
    <ol class="nested-items">
        {{#each slot.children as |childSlot|}}
            {{#if childSlot.feat}}
                {{> nestedSlot slot=childSlot}}
            {{else}}
                {{> emptySlot slot=childSlot}}
            {{/if}}
        {{/each}}
    </ol>
{{/inline}}

{{#*inline "nestedSlot"}}
    <li data-item-id="{{slot.feat.id}}">
        <div class="item-name">
            <div class="feat-slot-title"></div>
            <a class="item-image framed" data-action="item-to-chat">
                <img class="item-icon" src="{{slot.feat.img}}" alt="{{slot.feat.name}}">
                <i class="fa-solid fa-message"></i>
            </a>
            <h4 class="name"><a data-action="toggle-summary">{{slot.feat.name}}</a></h4>
        </div>
        <div class="item-controls">
            {{#if @root.editable}}
                <a data-action="edit-item" data-tooltip="PF2E.EditItemTitle"><i class="fa-solid fa-fw fa-edit"></i></a>
                <a data-action="delete-item" data-tooltip="PF2E.DeleteItemTitle"><i class="fa-solid fa-fw fa-trash"></i></a>
            {{/if}}
        </div>
        <div class="item-summary" hidden></div>
        {{#if slot.children}}
            {{> nestedSlots slot=slot}}
        {{/if}}
    </li>
{{/inline}}

{{#*inline "emptySlot"}}
    <li class="slot" data-slot-id="{{slot.id}}">
        <div class="item-name">
            <div class="feat-slot-title">{{slot.label}}</div>
            <div class="item-placeholder">{{localize slot.placeholder}}</div>
        </div>
        <div class="item-controls">
            {{#if @root.editable}}
                <a
                    data-action="browse-feats"
                    data-level="{{slot.level}}"
                ><i class="fa-solid fa-fw fa-search"></i></a>
            {{/if}}
        </div>
    </li>
{{/inline}}
