<form class="{{cssClass}}" autocomplete="off">
    <div class="header">
        <div class="avatar flex-group-center" style="grid-row: 1/3;">
            <img class="item-avatar-img" src="{{item.img}}" data-edit="img" title="{{item.name}}" />
        </div>
        <div class="container flex-group-center item-name">
            <h1><input name="name" type="text" value="{{item.name}}" placeholder="{{localize "ITEM.ARMOR"}}" /></h1>
        </div>
    </div>
    <div class="grid-container" style="grid-template-columns: 1fr 1fr;">
        <!--
        <div class="supply">
            <label>{{localize data.quantity.label}}</label>
            <input name="data.quantity.value" type="number" value="{{data.quantity.value}}" />
        </div>
        -->
        <div class="cost">
            <label>{{localize data.price.label}}</label>
            <input name="data.price.value" type="text" value="{{data.price.value}}" />
        </div>
        <div class="rating">
            <label>{{localize data.defence.label}}</label>
            <input name="data.defence.value" type="text" value="{{data.defence.value}}"  />
        </div>
        <div>
            <label>{{localize data.type.label}}</label>
            <select class="item-weapon-cat-select" name="data.type.value">
                {{#select data.type.value}}
                {{#each this.KH.armor_types as |t|}}
                <option value="{{t.value}}">{{localize t.label}}</option>
                {{/each}}
                {{/select}}
            </select>
        </div>
        <div class="grid-container" style="grid-template-columns: 1fr auto;">
            <!--
            <label>{{localize data.equipable.label}}</label>
            <a class="item-bool-click {{#if data.equipable.value}}active{{/if}}" data-name="equipable" title="equipable">
                <i class="far {{#if data.equipable.value}}fa-times-circle{{else}}fa-circle{{/if}}"></i>
            </a>
            -->
            <label>{{localize data.helmet.label}}</label>
            <a class="item-bool-click {{#if data.helmet.value}}active{{/if}}" data-name="helmet" title="helmet">
                <i class="far {{#if data.helmet.value}}fa-times-circle{{else}}fa-circle{{/if}}"></i>
            </a>
        </div>
    </div>

    <div class="sheet-tabs tabs flex row" data-group="primary">
        <b class="item" data-tab="description">{{localize "TAB.DESCRIPTION"}}</b>
        <b class="item" data-tab="modifiers">{{localize "TAB.MODIFICATION"}}</b>
    </div>

    <div class="sheet-body">
        <div class="tab scroll-y" data-group="primary" data-tab="description">
            <div class="item">
                <div class="description">
                    <h2>{{localize data.description.label}}</h2>
                    <div class="info">
                        <div class="description">
                            {{editor content=data.description.value target="data.description.value" button=true owner=owner editable=editable}}
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="tab scroll-y" data-group="primary" data-tab="modifiers">
            {{> systems/kopparhavet/templates/parts/shared/modifications.html}}
        </div>
    </div>
</form>