<div class="flexrow recipe">
    <div class="sheet-left flexcol">
        {{#if useAttendants}}
            <div class="attendants flexcol">
                <div class="flexrow header">
                    <div class="name">{{localize "beaversCrafting.crafting-app.required"}}</div>
                </div>
                <div class="section flexcol">
                    {{#each recipe.required}}
                        <div class="section flexcol" style="margin-left:20px">
                            {{#each this}}
                                {{>beavers-recipe-component component=this key=@key type="required" group=@../key clickable=../../displayIngredients hasCraftedFlag=../../hasCraftedFlag editable=../../editable currencies=../../currencies}}
                                <div class="beavers-seperator"></div>
                            {{/each}}
                            {{#if ../editable}}
                                <div class="flexrow">
                                    <div class="drop-area" data-id="{{@key}}">{{localize "beaversCrafting.recipe.orItem"}}</div>
                                </div>
                            {{/if}}
                        </div>
                    {{/each}}
                    {{#if editable}}
                        <div class="flexrow">
                            <div class="drop-area" data-id="">{{localize "beaversCrafting.recipe.addItem"}}</div>
                        </div>
                    {{/if}}
                </div>
            </div>
        {{/if}}
        <div class="flexcol cost">
            <div class="flexrow header">
                <div class="name">{{localize "beaversCrafting.crafting-app.cost"}}</div>
                {{#if editable}}
                    <div class="action flexrow">
                        {{#unless recipe.currency}}
                            <a class="item-add">
                                <i class="fa-solid fa-coins"></i>
                            </a>
                        {{/unless}}
                    </div>
                {{/if}}
            </div>
            <div class="section flexcol">
                {{#if recipe.currency}}
                    <div class="currencies flexcol">
                        <div class="flexrow beavers-component">
                            <select {{#unless editable}}disabled{{/unless}}
                                    name="flags.beavers-crafting.recipe.currency.name" class="name">
                              {{selectOptions currencies selected=recipe.currency.name labelAttr="label" valueAttr="id"}}
                            </select>
                            <div class="attribute" style="min-width: 60px;text-align: right;">
                                <input {{#unless editable}}disabled{{/unless}}
                                       name="flags.beavers-crafting.recipe.currency.value" class="attribute"
                                       type="number"
                                       step="any"
                                       value="{{recipe.currency.value}}"/>
                            </div>
                            {{#if editable}}
                                <div class="attribute">
                                    <a class="item-delete">
                                        <i class="fas fa-trash"></i>
                                    </a>
                                </div>
                            {{/if}}
                        </div>
                        <div class="beavers-seperator"></div>
                    </div>
                {{/if}}
                <div class="ingredients flexcol">
                    {{#each recipe.input}}
                    <div class="section flexcol" style="margin-left:20px">
                        {{#each this}}
                            {{>beavers-recipe-component component=this key=@key type="input" group=@../key clickable=../../displayIngredients hasCraftedFlag=../../hasCraftedFlag editable=../../editable currencies=../../currencies}}
                            <div class="beavers-seperator"></div>
                        {{/each}}
                        {{#if ../editable}}
                            <div class="flexrow">
                                <div class="drop-area" data-id="{{@key}}">
                                  <span style="flex:1;text-align:center">{{localize "beaversCrafting.recipe.orItem"}}</span>
                                  <a class="item-add" style="flex: 0 0 30px;border-left: 1px solid var(--beavers-item-border-color-highlight);text-align:center;">
                                    <i class="fa-solid fa-coins"></i>
                                  </a>
                                </div>
                            </div>
                        {{/if}}
                    </div>
                    {{/each}}
                    {{#if editable}}
                        <div class="flexrow">
                            <div class="drop-area" data-id="">
                              <span style="flex:1;text-align:center">{{localize "beaversCrafting.recipe.addItem"}}</span>
                              <a class="item-add" style="flex: 0 0 30px;border-left: 1px solid var(--beavers-item-border-color-highlight);text-align:center;">
                                <i class="fa-solid fa-coins"></i>
                              </a>
                            </div>
                        </div>
                    {{/if}}
                </div>
            </div>
        </div>
    </div>
    <div class="sheet-right">
        <div class="tests flexcol">
            <div class="flexrow header">
                <div class="name">{{localize "beaversCrafting.recipe.beaversTests.tests"}}</div>
                {{#if recipe.beaversTests}}
                    <div class="attribute flexrow" style="flex-wrap:nowrap;flex-grow:0"
                         title="{{localize "beaversCrafting.recipe.beaversTests.failsHint"}}">
                        {{localize "beaversCrafting.recipe.beaversTests.fails"}}:
                        <input style="width:40px" {{#unless editable}}disabled{{/unless}}
                               name="flags.beavers-crafting.recipe.beaversTests.fails" type="number"
                               step="any"
                               value="{{recipe.beaversTests.fails}}"/>
                    </div>
                    <div class="flexrow" style="flex-wrap:nowrap;flex-grow:0"
                         title="{{localize "beaversCrafting.recipe.beaversTests.consumeHint"}}">
                        <span>{{localize "beaversCrafting.recipe.beaversTests.consume"}}:</span>
                        <input type="checkbox" {{#unless editable}}disabled{{/unless}}
                            {{#if recipe.beaversTests.consume}}checked{{/if}}
                               name="flags.beavers-crafting.recipe.beaversTests.consume">
                    </div>
                {{/if}}
                {{#if editable}}
                    <div class="action flexrow testAnd" title="{{localize "beaversCrafting.recipe.beaversTests.andTestHint"}}">
                        <a class="item-add">
                            <i class="fas fa-plus"></i>
                        </a>
                    </div>
                {{/if}}
            </div>
            <div class="section flexcol">
                {{#if recipe.beaversTests}}
                    {{#each recipe.beaversTests.ands}}
                        <div class="flexcol" style="padding-left:20px">
                            <div class="flexrow header">
                                <div class="name">{{localize "beaversCrafting.recipe.beaversTests.test"}}</div>
                                <div class="attribute flexrow" style="max-width:40px"
                                     title="{{localize "beaversCrafting.recipe.beaversTests.hitsHint"}}">
                                    {{localize "beaversCrafting.recipe.beaversTests.hits"}}:
                                    <input {{#unless ../editable}}disabled{{/unless}}
                                           name="flags.beavers-crafting.recipe.beaversTests.ands.{{@key}}.hits" type="number"
                                           step="any"
                                           value="{{this.hits}}"/>
                                </div>
                                {{#if ../editable}}
                                    <div class="action flexrow testOr"
                                         title="{{localize "beaversCrafting.recipe.beaversTests.orTestHint"}}">
                                        <a class="item-add" data-and="{{@key}}">
                                            <i class="fas fa-plus"></i>
                                        </a>
                                    </div>
                                {{/if}}
                            </div>
                            {{#each this.ors}}
                                <div class="flexrow" style="line-height:20px;margin:2px 0px 2px 10px;">
                                    <div class="flexcol beavers-line" style="flex-wrap:nowrap;">
                                        {{{beavers-test this (beavers-object "disabled" (not ../../editable) "minimized" true "prefixName" (concat "flags.beavers-crafting.recipe.beaversTests.ands."@../key ".ors." @key)) }}}
                                    </div>
                                    {{#if ../../editable}}
                                        <div class="attribute" style="flex:0;width:30px;flex-basis:auto;margin-top:5px;text-align: center;">
                                            <a class="item-delete" data-and="{{@../key}}" data-or="{{@key}}">
                                                <i class="fas fa-trash"></i>
                                            </a>
                                        </div>
                                    {{/if}}
                                </div>
                                {{#unless @last}}
                                    <div class="beavers-seperator" style="margin:3px 0px 3px;"></div>
                                {{/unless}}
                            {{/each}}
                        </div>
                    {{/each}}
                {{/if}}
            </div>
        </div>
        <div class="results flexcol">
            <div class="flexrow header">
                <div class="name">{{localize "beaversCrafting.recipe.results"}}</div>
                {{#if editable}}
                    <div class="action"></div>
                {{/if}}
            </div>
            <div class="section flexcol">
                    {{#each recipe.output}}
                    <div class="section flexcol" style="margin-left:20px">
                        {{#each this}}
                            {{>beavers-recipe-component component=this key=@key type="output" group=@../key hasCraftedFlag=false clickable=../../displayResults editable=../../editable currencies=../../currencies}}
                            <div class="beavers-seperator"></div>
                        {{/each}}
                        {{#if ../editable}}
                            <div class="flexrow">
                                <div class="drop-area" data-id="{{@key}}">
                                  <span style="flex:1;text-align:center">{{localize "beaversCrafting.recipe.orItem"}}</span>
                                  <a class="item-add" style="flex: 0 0 30px;border-left: 1px solid var(--beavers-item-border-color-highlight);text-align:center;">
                                    <i class="fa-solid fa-coins"></i>
                                  </a>
                                </div>
                            </div>
                        {{/if}}
                    </div>
                    {{/each}}
                    {{#if editable}}
                        <div class="flexrow">
                            <div class="drop-area" data-id="">
                              <span style="flex:1;text-align:center">{{localize "beaversCrafting.recipe.addItem"}}</span>
                              <a class="item-add" style="flex: 0 0 30px;border-left: 1px solid var(--beavers-item-border-color-highlight);text-align:center;">
                                <i class="fa-solid fa-coins"></i>
                              </a>
                            </div>
                        </div>
                    {{/if}}
            </div>
        </div>
    </div>
</div>