<form class="{{cssClass}}" autocomplete="off">
    <header class="sheet-header">
        <img src="{{item.img}}" data-edit="img" title="{{item.name}}" height="64" width="64"/>
        <h1><input name="name" type="text" value="{{item.name}}" placeholder="{{ localize 'Name' }}"/></h1>
    </header>
    <div class="sheet-content">
      <div class="flexrow">
        <div>Rank Bonus Progression
          <select class="select-fixed-width" name="system.bonus_progression" value="{{system.bonus_progression}}" itemid="{{ item._id }}">
              {{selectOptions config.rankBonusProgressionList selected=system.bonus_progression valueAttr="key" labelAttr="label"}}
          </select>
        </div>
        <div>Game system
          <select class="select-fixed-width" name="system.game_system" value="{{system.game_system}}" itemid="{{ item._id }}">
              {{selectOptions config.gameSystems selected=system.game_system valueAttr="key" labelAttr="label"}}
          </select>
        </div>
      </div>
      <div class="applicable-stats-grid-container">
            <div>
                Applicable Stat 1
                <select name="system.app_stat_1" class="app-stat-selector" value="{{system.app_stat_1}}" itemid="{{ item._id }}">
                    {{selectOptions applicable_stat_list selected=applicable_stat_1_selected }}
                </select>
            </div>
            <div>
                Applicable Stat 2
                <select name="system.app_stat_2" class="app-stat-selector" value="{{system.app_stat_2}}" itemid="{{ item._id }}">
                    {{selectOptions applicable_stat_list selected=applicable_stat_2_selected }}
                </select>
            </div>
            <div>
                Applicable Stat 2
                <select name="system.app_stat_3" class="app-stat-selector" value="{{system.app_stat_3}}" itemid="{{ item._id }}">
                    {{selectOptions applicable_stat_list selected=applicable_stat_3_selected }}
                </select>
            </div>
        </div>
        <div>
            <table>
                <tr>
                    <th>{{localize "rmss.skill_category.applicable_stats"}}</th>
                    <th>{{localize "rmss.skill_category.development_cost"}}</th>
                    <th>{{localize "rmss.skill_category.ranks"}}</th>
                    <th>{{localize "rmss.skill_category.new_ranks"}}</th>
                    <th>{{localize "rmss.skill_category.rank_bonus"}}</th>
                    <th>{{localize "rmss.skill_category.stat_bonus"}}</th>
                    <th>{{localize "rmss.skill_category.prof_bonus"}}</th>
                    <th>{{localize "rmss.skill_category.special_bonus_1"}}</th>
                    <th>{{localize "rmss.skill_category.special_bonus_2"}}</th>
                    <th>{{localize "rmss.skill_category.total_bonus"}}</th>
                </tr>
                <td>
                    <input name="system.applicable_stats" type="text" value="{{system.applicable_stats}}" data-dtype="String"/>
                </td>
                <td>
                    <input name="system.development_cost" type="text" value="{{system.development_cost}}" data-dtype="String"/>
                </td>
                <td>
                    <input name="system.ranks" type="text" value="{{system.ranks}}" data-dtype="Number"/>
                </td>
                <td>
                    <div>
                    {{#switch system.new_ranks.value}} 
                        {{#case 0}} <a class="skillcategorysheet-newrank" data-item-id="{{item._id}}" value="{{system.new_ranks.value}}"><i class="fa-regular fa-square"></i> <i class="fa-regular fa-square"></i> <i class="fa-regular fa-square"></i></a> {{/case}} 
                        {{#case 1}} <a class="skillcategorysheet-newrank" data-item-id="{{item._id}}" value="{{system.new_ranks.value}}"><i class="fa-regular fa-square-check"></i> <i class="fa-regular fa-square"></i> <i class="fa-regular fa-square"></i></a> {{/case}} 
                        {{#case 2}} <a class="skillcategorysheet-newrank" data-item-id="{{item._id}}" value="{{system.new_ranks.value}}"><i class="fa-regular fa-square-check"></i> <i class="fa-regular fa-square-check"></i> <i class="fa-regular fa-square"></i></a> {{/case}} 
                        {{#case 3}} <a class="skillcategorysheet-newrank" data-item-id="{{item._id}}" value="{{system.new_ranks.value}}"><i class="fa-regular fa-square-check"></i> <i class="fa-regular fa-square-check"></i> <i class="fa-regular fa-square-check"></i></a> {{/case}} 
                    {{/switch}}
                    </div>
                </td>
                <td>
                    <input name="system.rank_bonus" type="text" value="{{system.rank_bonus}}" data-dtype="Number"/>
                </td>
                <td>
                    <input name="system.stat_bonus" type="text" value="{{system.stat_bonus}}" data-dtype="Number"/>
                </td>
                <td>
                    <input name="system.prof_bonus" type="text" value="{{system.prof_bonus}}" data-dtype="Number"/>
                </td>
                <td>
                    <input name="system.special_bonus_1" type="text" value="{{system.special_bonus_1}}" data-dtype="Number"/>
                </td>
                <td>
                    <input name="system.special_bonus_2" type="text" value="{{system.special_bonus_2}}" data-dtype="Number"/>
                </td>
                <td>
                    <input name="system.total_bonus" type="text" value="{{system.total_bonus}}" data-dtype="Number"/>
                </td>
            </table>
            {{localize "rmss.skill_category.description"}}
            {{editor enrichedDescription target="system.description" button=true owner=owner editable=editable}}
        </div>
    </div>
</form>
