<div class="flexrow beavers-component" data-type="{{type}}" data-group="{{group}}" data-key="{{key}}"
     data-id="{{component.uuid}}">
    <div class="flexrow {{#if (eq component.type 'AnyOf')}}chooseAnyOf{{else if clickable}}clickable{{/if}}"
         data-type="{{type}}" data-group="{{group}}" data-key="{{key}}" data-id="{{component.uuid}}">
        <img src="{{component.img}}"/>
        {{#if (and editable (eq component.flags.beavers-crafting.subtype "money"))}}
        <select name="{{#if group}}flags.beavers-crafting.recipe.{{type}}.{{group}}.{{key}}.id{{else}}flags.beavers-crafting.recipe.{{type}}.{{key}}.id{{/if}}"
            class="currency-selector name">
          {{selectOptions currencies selected=component.id labelAttr="label" valueAttr="id"}}
        </select>
        {{else}}
        <span class="name">{{component.name}}</span>
        {{/if}}
    </div>
    {{#if hasCraftedFlag}}
        {{#if component.flags.beavers-crafting.isCrafted }}
            <div class="attribute flexrow" style="padding-right:5px">
                <img data-type="{{type}}" data-group="{{group}}" data-key="{{key}}" title="crafted"
                     class="beavers-fontsize-svg-img {{#if editable}}editable{{/if}}"
                     src="modules/beavers-crafting/icons/tools.svg"/>
            </div>
        {{else if editable}}
            <div class="attribute flexrow" style="padding-right:5px">
                <img title="not crafted" data-type="{{type}}" data-group="{{group}}" data-key="{{key}}"
                     class="beavers-fontsize-svg-img {{#if editable}}editable{{/if}}"
                     src="modules/beavers-crafting/icons/emptytools.svg"/>
            </div>
        {{/if}}
    {{/if}}
    <div class="attribute">
        <input style="width:30px;text-align:right;background: rgba(0, 0, 0, 0)"
               name="flags.beavers-crafting.recipe.{{type}}.{{group}}.{{key}}.quantity"
               {{#unless editable}}disabled{{/unless}}
               type="number"
               step="any"
               value="{{component.quantity}}"/>
    </div>
    <div class="attribute flexrow">
        {{#if (eq status 'success') }}
            <i class="fas fa-check"></i>
        {{else if (eq status 'error') }}
            <i class="fas fa-times"></i>
        {{else if (eq status 'locked') }}
            <i class="fa-regular fa-lock"></i>
        {{else if (eq status 'unknown') }}
            <i class="fa-regular fa-question"></i>
        {{/if}}
    </div>
    {{#if editable}}
        <div class="attribute flexrow">
            <a class="item-delete" data-group="{{group}}" data-id="{{key}}">
                <i class="fas fa-trash" data-group="{{group}}" data-id="{{key}}"></i>
            </a>
        </div>
    {{/if}}
</div>