<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.SKILL"}}" /></h1>
        </div>
    </div>
    <div class="grid-container" style="grid-template-columns: 1fr 1fr;">
        <div>
            <label>{{localize data.type.label}}</label>
            <select class="item-weapon-cat-select" name="data.type.value">
                {{#select data.type.value}}
                <option value="base">{{localize "SKILL.BASE"}}</option>
                <option value="adventure">{{localize "SKILL.ADVENTURE"}}</option>
                <option value="combat">{{localize "SKILL.COMBAT"}}</option>
                {{/select}}
            </select>
        </div>
        <div>
            <label>{{localize "SKILL.STARTVALUE"}}</label>
            <input name="data.value" type="text" value="{{data.value}}" />
        </div>
    </div>
    <div class="item">
        <div class="description">
            <h2>{{localize data.description.label}}</h2>
            <div class="info-mid">
                <div class="description">
                    {{editor content=data.description.value target="data.description.value" button=true owner=owner editable=editable}}
                </div>
            </div>
        </div>
    </div>
</form>