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

    {{#if competencesCommunes.length}}
      <fieldset class="competences-group">
        <legend class="competences-type-header">Compétences communes</legend>
        <div class="competences">
          {{#each competencesCommunes as |item|}}
            <div
              class="competence item"
              data-item-id="{{item.id}}"
              data-item-uuid="{{item.uuid}}"
              data-drag="true"
            >
              <img
                class="item-img"
                src="{{item.img}}"
                data-tooltip="{{item.name}}"
              />
              <div
                class="name"
                data-action="rollCompetence"
                data-item-id="{{item.id}}"
                data-item-uuid="{{item.uuid}}"
                data-tooltip="{{{item.system.description}}}"
              >
                <a>{{item.name}}</a>
              </div>
              <span class="carte" data-tooltip="Carte">{{upperFirst
                  item.system.carteSymbole
                }}</span>
              <span
                class="niveau"
                data-tooltip="Modificateur: {{item.niveauModificateur}}"
              >{{item.niveauName}} ({{item.niveauModificateur}})</span>

              <div class="controls">
                <a
                  data-tooltip="{{localize 'HAMALRON.Roll.rollCompetence'}}"
                  data-action="rollCompetence"
                  data-item-id="{{item.id}}"
                  data-item-uuid="{{item.uuid}}"
                ><i class="fas fa-cards"></i></a>
                <a
                  data-tooltip="{{localize 'HAMALRON.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 'HAMALRON.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>
    {{/if}}

    {{#if competencesPeuple.length}}
      <fieldset class="competences-group">
        <legend class="competences-type-header">Compétences de peuple</legend>
        <div class="competences">
          {{#each competencesPeuple as |item|}}
            <div
              class="competence item"
              data-item-id="{{item.id}}"
              data-item-uuid="{{item.uuid}}"
              data-drag="true"
            >
              <img
                class="item-img"
                src="{{item.img}}"
                data-tooltip="{{item.name}}"
              />
              <div
                class="name"
                data-action="rollCompetence"
                data-item-id="{{item.id}}"
                data-item-uuid="{{item.uuid}}"
                data-tooltip="{{{item.system.description}}}"
              >
                <a>{{item.name}}</a>
              </div>
              <span class="carte" data-tooltip="Carte">{{upperFirst
                  item.system.carteSymbole
                }}</span>
              <span
                class="niveau"
                data-tooltip="Modificateur: {{item.niveauModificateur}}"
              >{{item.niveauName}} ({{item.niveauModificateur}})</span>

              <div class="controls">
                <a
                  data-tooltip="{{localize 'HAMALRON.Roll.rollCompetence'}}"
                  data-action="rollCompetence"
                  data-item-id="{{item.id}}"
                  data-item-uuid="{{item.uuid}}"
                ><i class="fas fa-cards"></i></a>
                <a
                  data-tooltip="{{localize 'HAMALRON.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 'HAMALRON.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>
    {{/if}}

    {{#if competencesFaction.length}}
      <fieldset class="competences-group">
        <legend class="competences-type-header">Compétences de faction</legend>
        <div class="competences">
          {{#each competencesFaction as |item|}}
            <div
              class="competence item"
              data-item-id="{{item.id}}"
              data-item-uuid="{{item.uuid}}"
              data-drag="true"
            >
              <img
                class="item-img"
                src="{{item.img}}"
                data-tooltip="{{item.name}}"
              />
              <div
                class="name"
                data-action="rollCompetence"
                data-item-id="{{item.id}}"
                data-item-uuid="{{item.uuid}}"
                data-tooltip="{{{item.system.description}}}"
              >
                <a>{{item.name}}</a>
              </div>
              <span class="carte" data-tooltip="Carte">{{upperFirst
                  item.system.carteSymbole
                }}</span>
              <span
                class="niveau"
                data-tooltip="Modificateur: {{item.niveauModificateur}}"
              >{{item.niveauName}} ({{item.niveauModificateur}})</span>

              <div class="controls">
                <a
                  data-tooltip="{{localize 'HAMALRON.Roll.rollCompetence'}}"
                  data-action="rollCompetence"
                  data-item-id="{{item.id}}"
                  data-item-uuid="{{item.uuid}}"
                ><i class="fas fa-cards"></i></a>
                <a
                  data-tooltip="{{localize 'HAMALRON.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 'HAMALRON.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>
    {{/if}}

    {{#if isEditMode}}
      <div class="add-competence-section">
        <a
          class="action add-competence-button"
          data-tooltip="{{localize 'HAMALRON.Tooltip.addCompetence'}}"
          data-tooltip-direction="UP"
        >
          <i class="fas fa-plus"></i>
          Ajouter une compétence
        </a>
      </div>
    {{/if}}

  </div>
</section>