<div class="beavers-crafting chat flexcol">
    <div class="flexrow header beavers-line">
        {{>beavers-recipe-component type="recipe" component=data}}
        <div class="attribute flexrow">
            <div class="flexrow beavers-line" style="margin:auto">
                {{#if (not (eq data.status "error"))}}
                    <div class="statusbar success">
                        <div class="fill"
                             style="background: linear-gradient(to right, darkgreen {{data.beaversTests.hitPer}}%, transparent 0);">
                          {{data.beaversTests.hitPer}}%
                        </div>
                    </div>
                {{/if}}
                {{#if (not (eq data.status "success"))}}
                    <div class="statusbar error">
                        <div class="fill"
                             style="background: linear-gradient(to right, darkred {{data.beaversTests.failPer}}%, transparent 0)">
                            {{data.beaversTests.failPer}}%
                        </div>
                    </div>
                {{/if}}
            </div>
        </div>
    </div>
    <div class="flexrow beavers-chat-info">
        <div class="left flexcol">
            {{#each data.components.consumed}}
                {{>beavers-recipe-component type="input" component=this.component status=this.status }}
            {{/each}}
        </div>
        <div class="right flexcol">
            <div class="results">
                <div class="title">
                    <div class="name">{{localize "beaversCrafting.recipe.results"}}</div>
                </div>
            </div>
            {{#each data.components.produced}}
                    {{>beavers-recipe-component type="output" component=this.component status=this.status }}
            {{/each}}
        </div>
    </div>
</div>
