{{#if featSlot.feat}}
    <li class="item feat-item" data-item-id="{{featSlot.feat.id}}" data-slot-id="{{featSlot.id}}">
        <div class="item-name rollable drag-handle">
            <div class="feat-slot-title">{{featSlot.label}}</div>
            <div class="item-image framed">
                <img class="item-icon" src="{{featSlot.feat.img}}" alt="{{featSlot.feat.name}}">
                <i class="fa-solid fa-message"></i>
            </div>
            <h4 class="name"><a data-action="toggle-summary">{{featSlot.feat.name}}</a></h4>
        </div>
        <div class="item-controls">
            {{#if @root.editable}}
                <a class="item-control item-edit" title="{{localize "PF2E.EditItemTitle"}}"><i class="fa-solid fa-fw fa-edit"></i></a>
                <a class="item-control item-delete" title="{{localize "PF2E.DeleteItemTitle"}}"><i class="fa-solid fa-fw fa-trash"></i></a>
            {{/if}}
        </div>
        <div class="item-summary" hidden="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 rollable">
            <div class="feat-slot-title"></div>
            <div class="item-image framed">
                <img class="item-icon" src="{{slot.feat.img}}" alt="{{slot.feat.name}}">
                <i class="fa-solid fa-message"></i>
            </div>
            <h4 class="name"><a data-action="toggle-summary">{{slot.feat.name}}</a></h4>
        </div>
        <div class="item-controls">
            {{#if @root.editable}}
                <a class="item-control item-edit" title="{{localize "PF2E.EditItemTitle"}}"><i class="fa-solid fa-fw fa-edit"></i></a>
                <a class="item-control item-delete" title="{{localize "PF2E.DeleteItemTitle"}}"><i class="fa-solid fa-fw fa-trash"></i></a>
            {{/if}}
        </div>
        <div class="item-summary" hidden="hidden"></div>
        {{#if slot.children}}
            {{> nestedSlots slot=slot}}
        {{/if}}
    </li>
{{/inline}}

{{#*inline "emptySlot"}}
    <li class="feat-item" data-slot-id="{{slot.id}}">
        <div class="item-name">
            <div class="feat-slot-title">{{slot.label}}</div>
            <div class="item-placeholder">{{coalesce slot.restriction.hint (localize "PF2E.EmptySlot")}}</div>
        </div>
        <div class="item-controls">
            {{#if @root.editable}}
                <a
                    class="item-control"
                    data-action="browse-feats"
                    data-filter="{{featFilter}},conjunction-or"
                    data-level="{{slot.level}}"
                ><i class="fa-solid fa-fw fa-search"></i></a>
            {{/if}}
        </div>
    </li>
{{/inline}}