<div class="tab crafting crafting-pane" data-group="primary" data-tab="crafting">
    <div class="crafting-options item-list">
        <div class="crafting-option item" data-toggle-property="{{toggle.inputName}}" data-toggle-label="{{localize toggle.label}}">
            <label>
                <input type="checkbox" name="flags.pf2e.freeCrafting" flag="freeCrafting" {{checked actor.flags.pf2e.freeCrafting}}>
                <span>{{localize "PF2E.CraftingTab.ToggleFreeCrafting"}}</span>
            </label>
        </div>
        {{#if crafting.hasQuickAlchemy}}
        <div class="crafting-option item" data-toggle-property="{{toggle.inputName}}" data-toggle-label="{{localize toggle.label}}">
            <label>
                <input type="checkbox" name="flags.pf2e.quickAlchemy" flag="quickAlchemy" {{checked actor.flags.pf2e.quickAlchemy}}>
                <span>{{localize "PF2E.CraftingTab.ToggleQuickAlchemy"}}</span>
            </label>
        </div>
        {{/if}}
    </div>
    <ol class="craftingEntry-list directory-list item-list">
        {{> "systems/pf2e/templates/actors/crafting-entry-list.hbs" craftingEntries=crafting.entries}}
        <li class="known-formulas item-container" data-container-type="knownFormulas">
            <div class="action-header">
                <h3 class="item-name hide-container-toggle title">
                    {{localize "PF2E.FormulaKnownTitle"}}
                </h3>
            </div>
            <ol class="directory-list item-list formula-list">
                <!-- Add section for each formula level -->
                {{#each crafting.knownFormulas as |section lvl|}}
                    <li class="formula-level-header formula-header" data-item-type="formulaLevel" data-level="{{lvl}}">
                        <div class="level-name flexrow">
                            <h3>{{localize "PF2E.LevelN" level=lvl}}</h3>
                        </div>

                        <div class="formula-dc-header">{{localize "PF2E.CraftDCTitle"}}</div>
                        <div class="formula-cost-header">{{localize "PF2E.SpellCostLabel"}}</div>
                        <div class="formula-quantity-header">{{localize "PF2E.CraftingTab.CraftQuantityTitle"}}</div>

                        {{#if @root.options.editable}}
                            <div class="item-controls">
                                <a class="item-control inventory-browse" title="{{localize "PF2E.OpenInventoryBrowser"}}" data-level="{{lvl}}"><i class="fa-solid fa-fw fa-search"></i></a>
                            </div>
                        {{/if}}
                    </li>
                    <!-- Add formula items for each formula level -->
                    {{#each section as |craftedItem i|}}
                        <li class="item formula-item" data-formula-lvl="{{lvl}}" data-item-id="{{craftedItem.uuid}}" data-is-formula="true">
                            <div class="item-name rollable">
                                <div class="item-image framed">
                                    <img class="item-icon" src="{{craftedItem.img}}" alt="{{craftedItem.name}}">
                                    <i class="fa-solid fa-message"></i>
                                </div>
                                <h4>{{craftedItem.name}}</h4>
                            </div>

                            <div class="dc">{{craftedItem.dc}}</div>
                            <div class="cost">{{coinLabel craftedItem.cost}}</div>
                            <div class="quantity">
                                <a class="adjust decrease" data-action="decrease-quantity">-</a>
                                <input type="number" class="formula-number" data-action="enter-quantity" value="{{#if @root.crafting.noCost}}{{craftedItem.minimumBatchSize}}{{else}}{{craftedItem.batchSize}}{{/if}}" />
                                <a class="adjust increase" data-action="increase-quantity">+</a>
                            </div>

                            {{#if @root.options.editable}}
                                <div class="item-controls">
                                    {{#if (or @root.crafting.entries.alchemical.entries.length @root.crafting.entries.other.length)}}
                                        <a class="item-control" title="{{localize "PF2E.CraftingTab.QuickAddTitle"}}" data-action="quick-add" data-item-uuid="{{craftedItem.uuid}}"><i class="fa-solid fa-fw fa-plus"></i></a>
                                    {{/if}}
                                    <a class="item-control" title="{{localize "PF2E.CraftItemTitle"}}" data-action="craft-item" data-item-uuid="{{craftedItem.uuid}}"><i class="fa-solid fa-fw fa-hammer"></i></a>
                                    {{#if craftedItem.deletable}}
                                        <a class="item-control formula-delete" title="{{localize "PF2E.DeleteItemTitle"}}"><i class="fa-solid fa-fw fa-trash"></i></a>
                                    {{else}}
                                        <span class="item-control disabled" title="{{localize "PF2E.CraftingTab.UndeletableTooltip"}}"><i class="fa-solid fa-fw fa-trash"></i></span>
                                    {{/if}}
                                </div>
                            {{/if}}
                        </li>
                    {{/each}}
                {{else}}
                    {{#if @root.options.editable}}
                        <li class="formula-header empty">
                            <h4>{{localize "PF2E.FormulaListEmpty"}}</h4>
                            <a class="blue-button inventory-browse" title="{{localize "PF2E.OpenInventoryBrowser"}}" data-level="{{lvl}}">
                                <i class="fa-solid fa-fw fa-search"></i>{{localize "PF2E.OpenInventoryBrowser"}}
                            </a>
                        </li>
                    {{/if}}
                {{/each}}
            </ol>
        </li>
    </ol>
</div>
