<div class="grid grid-2col">
  {{!-- Group Identity --}}
  
  <div>
    <h4>{{ localize 'IDENTITY.origin' }}</h4>
    <div class="flexrow flex-group-center">
      <input type="text" name="system.identity.origin" value="{{system.identity.origin}}" 
             placeholder="Origine..." style="flex: 1;" />
    </div>
  </div>

  <div>
    <h4>{{ localize 'IDENTITY.theme' }}</h4>
    <div class="flexrow flex-group-center">
      <input type="text" name="system.identity.theme" value="{{system.identity.theme}}" 
             placeholder="Concept..." style="flex: 1;" />
    </div>
  </div>

  {{!-- Group Notes --}}
  <div class="grid-span-2">
    <h4>{{ localize 'IDENTITY.notes' }}</h4>
    {{editor system.identity.notes target="system.identity.notes" button=true owner=owner editable=editable}}
  </div>

  {{!-- Group Abilities (from items) --}}
  <div class="grid-span-2">
    <h4>
      <span>{{ localize 'VERMINE.abilities' }}</span>
      <a class="item-control item-create" title="{{ localize 'ITEMS.new_ability' }}" data-type="ability"><i class="fas fa-plus"></i></a>
    </h4>
    <ol class="list-item">
      {{#each abilities as |item id|}}
      {{#if (ne item.type 'totem')}}
      <li class="item flexrow" data-item-id="{{item._id}}">
        <div class="item-name" style="flex:4;">
          <a class="item-control item-edit" title="{{ localize 'UI.effect_edit' }}">{{item.name}}</a>
        </div>
        <div class="item-controls flexrow">
          <a class="item-control item-delete" title="{{ localize 'UI.effect_delete' }}"><i class="fas fa-trash"></i></a>
        </div>
      </li>
      {{/if}}
      {{/each}}
    </ol>
  </div>

  {{!-- Specialties --}}
  <div>
    <h4>
      <span>{{ localize 'ITEMS.specialties' }}</span>
      <a class="item-control item-create" title="{{ localize 'ITEMS.new_specialty' }}" data-type="specialty"><i class="fas fa-plus"></i></a>
    </h4>
    <ol class="list-item">
      {{#each specialties as |item id|}}
      <li class="item flexrow" data-item-id="{{item._id}}">
        <div class="item-name" style="flex:4;">
          <a class="item-control item-edit" title="{{ localize 'UI.effect_edit' }}">{{item.name}}</a>
        </div>
        <div class="item-controls flexrow">
          <a class="item-control item-delete" title="{{ localize 'UI.effect_delete' }}"><i class="fas fa-trash"></i></a>
        </div>
      </li>
      {{/each}}
    </ol>
  </div>

  {{!-- Backgrounds --}}
  <div>
    <h4>
      <span>{{ localize 'ITEMS.backgrounds' }}</span>
      <a class="item-control item-create" title="{{ localize 'ITEMS.new_background' }}" data-type="background"><i class="fas fa-plus"></i></a>
    </h4>
    <ol class="list-item">
      {{#each backgrounds as |item id|}}
      <li class="item flexrow" data-item-id="{{item._id}}">
        <div class="item-name" style="flex:4;">
          <a class="item-control item-edit" title="{{ localize 'UI.effect_edit' }}">{{item.name}}</a>
        </div>
        <div class="item-controls flexrow">
          <a class="item-control item-delete" title="{{ localize 'UI.effect_delete' }}"><i class="fas fa-trash"></i></a>
        </div>
      </li>
      {{/each}}
    </ol>
  </div>

  {{!-- Traumas --}}
  <div>
    <h4>
      <span>{{ localize 'ITEMS.traumas' }}</span>
      <a class="item-control item-create" title="{{ localize 'ITEMS.new_trauma' }}" data-type="trauma"><i class="fas fa-plus"></i></a>
    </h4>
    <ol class="list-item">
      {{#each traumas as |item id|}}
      <li class="item flexrow" data-item-id="{{item._id}}">
        <div class="item-name" style="flex:4;">
          <a class="item-control item-edit" title="{{ localize 'UI.effect_edit' }}">{{item.name}}</a>
        </div>
        <div class="item-controls flexrow">
          <a class="item-control item-delete" title="{{ localize 'UI.effect_delete' }}"><i class="fas fa-trash"></i></a>
        </div>
      </li>
      {{/each}}
    </ol>
  </div>

  {{!-- Evolutions --}}
  <div>
    <h4>
      <span>{{ localize 'ITEMS.evolutions' }}</span>
      <a class="item-control item-create" title="{{ localize 'ITEMS.new_evolution' }}" data-type="evolution"><i class="fas fa-plus"></i></a>
    </h4>
    <ol class="list-item">
      {{#each evolutions as |item id|}}
      <li class="item flexrow" data-item-id="{{item._id}}">
        <div class="item-name" style="flex:4;">
          <a class="item-control item-edit" title="{{ localize 'UI.effect_edit' }}">{{item.name}}</a>
        </div>
        <div class="item-controls flexrow">
          <a class="item-control item-delete" title="{{ localize 'UI.effect_delete' }}"><i class="fas fa-trash"></i></a>
        </div>
      </li>
      {{/each}}
    </ol>
  </div>
</div>
