<section
  class="tab character-{{tab.id}} {{tab.cssClass}}"
  data-tab="skills"
  data-group="sheet"
>
  <div class="main-div">

    {{#each skillsByCategory as |categoryData|}}
      <fieldset>
        <legend
          data-tooltip="{{localize ' LETHALFANTASY.Tooltip.skills'}}"
          data-tooltip-direction="UP"
        >{{localize categoryData.label}}</legend>
        <div class="skills">
          {{#each categoryData.skills as |item|}}
            <div
              class="skill"
              data-item-id="{{item.id}}"
              data-item-uuid="{{item.uuid}}"
            >
              <img
                class="item-img"
                src="{{item.img}}"
                data-tooltip="{{item.name}}"
              />
              <div class="name">
                <a
                  class="rollable"
                  data-roll-type="skill"
                  data-roll-key="{{item.id}}"
                >
                  <i class="lf-roll-small fa-duotone fa-solid fa-dice-d10"></i>
                  {{item.name}}
                </a>
              </div>
              <div class="score">
                +{{item.system.skillTotal}}
              </div>
              <div class="controls">
                <a
                  data-tooltip="{{localize 'LETHALFANTASY.Edit'}}"
                  data-action="edit"
                  data-item-id="{{item.id}}"
                  data-item-uuid="{{item.uuid}}"
                ><i class="fas fa-edit"></i></a>
                <a
                  data-tooltip="{{localize 'LETHALFANTASY.Delete'}}"
                  data-action="delete"
                  data-item-id="{{item.id}}"
                  data-item-uuid="{{item.uuid}}"
                ><i class="fas fa-trash"></i></a>
              </div>
            </div>
          {{/each}}
        </div>
      </fieldset>
    {{/each}}

    <fieldset>
      <legend
        data-tooltip="{{localize ' LETHALFANTASY.Tooltip.gifts'}}"
        data-tooltip-direction="UP"
      >{{localize "LETHALFANTASY.Label.gifts"}}</legend>
      <div class="gifts">
        {{#each gifts as |item|}}
          <div
            class="gift"
            data-item-id="{{item.id}}"
            data-item-uuid="{{item.uuid}}"
          >
            <img
              class="item-img"
              src="{{item.img}}"
              data-tooltip="{{item.name}}"
            />
            <div
              class="name"
              data-tooltip="{{{item.description}}}<br><br>{{item.path}}"
              data-tooltip-direction="UP"
            >
              {{item.name}}
            </div>
            <div class="controls">
              <a
                data-tooltip="{{localize 'LETHALFANTASY.Edit'}}"
                data-action="edit"
                data-item-id="{{item.id}}"
                data-item-uuid="{{item.uuid}}"
              ><i class="fas fa-edit"></i></a>
              <a
                data-tooltip="{{localize 'LETHALFANTASY.Delete'}}"
                data-action="delete"
                data-item-id="{{item.id}}"
                data-item-uuid="{{item.uuid}}"
              ><i class="fas fa-trash"></i></a>
            </div>
          </div>
        {{/each}}
      </div>
    </fieldset>

    <fieldset>
      <legend
        data-tooltip="{{localize ' LETHALFANTASY.Tooltip.vulnerabilities'}}"
        data-tooltip-direction="UP"
      >{{localize "LETHALFANTASY.Label.vulnerabilities"}}</legend>
      <div class="vulnerabilities">
        {{#each vulnerabilities as |item|}}
          <div
            class="vulnerability"
            data-item-id="{{item.id}}"
            data-item-uuid="{{item.uuid}}"
          >
            <img
              class="item-img"
              src="{{item.img}}"
              data-tooltip="{{item.name}}"
            />
            <div
              class="name"
              data-tooltip="{{{item.description}}}<br><br>{{item.path}}"
              data-tooltip-direction="UP"
            >
              {{item.name}}
            </div>
            <div class="controls">
              <a
                data-tooltip="{{localize 'LETHALFANTASY.Edit'}}"
                data-action="edit"
                data-item-id="{{item.id}}"
                data-item-uuid="{{item.uuid}}"
              ><i class="fas fa-edit"></i></a>
              <a
                data-tooltip="{{localize 'LETHALFANTASY.Delete'}}"
                data-action="delete"
                data-item-id="{{item.id}}"
                data-item-uuid="{{item.uuid}}"
              ><i class="fas fa-trash"></i></a>
            </div>
          </div>
        {{/each}}
      </div>
    </fieldset>
  </div>
</section>