<div class="skills-grid-container">
    <div class="skills-grid-heading">{{ localize "rmss.pc_sheet_skills.favorite" }}</div>
    <div class="skills-grid-heading">{{ localize "rmss.pc_sheet_skills.skill_name" }}</div>
    <div class="skills-grid-heading">{{ localize "rmss.pc_sheet_skills.ranks" }}</div>
    <div class="skills-grid-heading">{{ localize "rmss.pc_sheet_skills.new_ranks" }}</div>
    <div class="skills-grid-heading">{{ localize "rmss.pc_sheet_skills.rank_bonus" }}</div>
    <div class="skills-grid-heading">{{ localize "rmss.pc_sheet_skills.category_bonus" }}</div>
    <div class="skills-grid-heading">{{ localize "rmss.pc_sheet_skills.item_bonus" }}</div>
    <div class="skills-grid-heading">{{ localize "rmss.pc_sheet_skills.special_bonus" }}</div>
    <div class="skills-grid-heading">{{ localize "rmss.pc_sheet_skills.special_bonus" }}</div>
    <div class="skills-grid-heading">{{ localize "rmss.pc_sheet_skills.total_bonus" }}</div>
    <div class="skills-grid-heading">
      <a class="item-create" title="Create Skill" data-type="skill"><i class="fas fa-plus"></i>{{ localize "rmss.pc_sheet_skills.add_skill" }}</a>
    </div>
</div>

{{#each skills as |skill id|}}
  <div class="skills-grid-container">
    {{#if skill.system.favorite}}
        <div><a class="skill-favorite" data-item-id="{{skill._id}}"><i class="fa-regular fa-square-check"></i></a></div>
      {{else}}
        <div><a class="skill-favorite" data-item-id="{{skill._id}}"><i class="fa-regular fa-square"></i></a></div>
      {{/if}}
      <!--<div><input type="checkbox" name="system.favorite" {{checked skill.system.favorite}}/></div>-->
      <div class="skills-name-left-align"><a class="item-roll" title="Roll Check" data-item-id="{{skill._id}}">{{skill.name}}<i class="fas fa-dice"></i></a></div>
      <div>{{skill.system.ranks}}</div>
      <div>
        {{#switch skill.system.new_ranks.value}} 
          {{#case 0}} <a class="skill-newrank" data-item-id="{{skill._id}}" value="{{skill.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="skill-newrank" data-item-id="{{skill._id}}" value="{{skill.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="skill-newrank" data-item-id="{{skill._id}}" value="{{skill.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="skill-newrank" data-item-id="{{skill._id}}" value="{{skill.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>
      <div>{{skill.system.rank_bonus}}</div>
      <div>{{skill.system.category_bonus}}</div>
      <div>{{skill.system.item_bonus}}</div>
      <div>{{skill.system.special_bonus_1}}</div>
      <div>{{skill.system.special_bonus_2}}</div>
      <div>{{skill.system.total_bonus}}</div>
      <div >
        <a class="item-edit" title="Edit Skill" data-item-id="{{skill._id}}"><i class="fas fa-edit"></i></a>
        <a class="item-delete" title="Delete Skill" data-item-id="{{skill._id}}"><i class="fas fa-trash"></i></a>
      </div>
  </div>
  
  {{/each}}
