<div class="grid grid-2col">
  {{!-- Group Reserve and Morale --}}
  <div class="grid-span-2">
    <h4 class="align-center">{{ localize 'VERMINE.reserve' }}</h4>
    <div class="reserve-control flexrow flex-group-center">
      <label>{{ localize 'VERMINE.pool' }}:</label>
      <input type="number" name="system.reserve.value" value="{{system.reserve.value}}" 
             data-dtype="Number" min="{{system.reserve.min}}" max="{{system.reserve.max}}" />
      <span>/ {{system.reserve.max}}D</span>
    </div>
    <div class="morale-control flexrow flex-group-center">
      <label>{{ localize 'VERMINE.morale' }}:</label>
      <select name="system.morale.level">
        <option value="high" {{#if (eq system.morale.level "high")}}selected{{/if}}>{{ localize 'VERMINE.morale_high' }}</option>
        <option value="normal" {{#if (eq system.morale.level "normal")}}selected{{/if}}>{{ localize 'VERMINE.morale_normal' }}</option>
        <option value="low" {{#if (eq system.morale.level "low")}}selected{{/if}}>{{ localize 'VERMINE.morale_low' }}</option>
        <option value="crisis" {{#if (eq system.morale.level "crisis")}}selected{{/if}}>{{ localize 'VERMINE.morale_crisis' }}</option>
      </select>
      <input type="number" name="system.morale.value" value="{{system.morale.value}}" 
             data-dtype="Number" min="{{system.morale.min}}" max="{{system.morale.max}}" />
      <span>/ {{system.morale.max}}D</span>
    </div>
  </div>

  {{!-- Group Members --}}
  <div>
    <h4 class="align-center">
      <span>{{ localize 'VERMINE.group_members' }}</span>
      <a class="item-control chooseActor" title="{{ localize 'UI.add' }}" 
         data-type="members"><i class="fas fa-plus"></i></a>
    </h4>
    <ol class="actor-list">
      {{#each system.members as |memberId|}}
        {{#with (lookup ../resolvedMembers memberId) as |member|}}
        <li class="actor flexrow" data-actor-id="{{memberId}}">
          <div class="actor-name" style="flex:4;">
            {{#if member}}
              <a class="item-control">{{member.name}}</a>
            {{else}}
              <a class="item-control" style="color: red;">ID: {{memberId}}</a>
            {{/if}}
          </div>
          <div class="item-controls flexrow">
            <a class="item-control member-delete" title="{{ localize 'UI.effect_delete' }}"><i class="fas fa-trash"></i></a>
          </div>
        </li>
        {{/with}}
      {{/each}}
    </ol>
  </div>

  {{!-- Group Encounters --}}
  <div>
    <h4 class="align-center">
      <span>{{ localize 'VERMINE.encounters' }}</span>
      <a class="item-control chooseActor" title="{{ localize 'UI.add' }}" 
         data-type="encounters"><i class="fas fa-plus"></i></a>
    </h4>
    <ol class="actor-list">
      {{#each system.encounters as |encounterId|}}
        {{#with (lookup ../resolvedEncounters encounterId) as |encounter|}}
        <li class="actor flexrow" data-actor-id="{{encounterId}}">
          <div class="item-name" style="flex:4;">
            {{#if encounter}}
              <a class="item-control">{{encounter.name}}</a>
            {{else}}
              <a class="item-control" style="color: red;">ID: {{encounterId}}</a>
            {{/if}}
          </div>
          <div class="item-controls flexrow">
            <a class="item-control encounter-delete" title="{{ localize 'UI.effect_delete' }}"><i class="fas fa-trash"></i></a>
          </div>
        </li>
        {{/with}}
      {{/each}}
    </ol>
  </div>

  {{!-- Group Objectives --}}
  <div class="grid-span-2">
    <h4 class="align-center">{{ localize 'VERMINE.objectives' }}</h4>
    
    <div>
      <h5>{{ localize 'VERMINE.major_objectives' }}</h5>
      <ol class="list-item">
        {{#each system.objectives.major as |objective id|}}
        <li class="item flexrow" data-index="{{id}}">
          <div class="item-name" style="flex:4;">
            <input type="text" name="system.objectives.major.{{id}}" value="{{objective}}" 
                   placeholder="Objectif majeur..." />
          </div>
          <div class="item-controls flexrow">
            <a class="item-control objective-delete" title="{{ localize 'UI.effect_delete' }}" 
               data-type="major" data-index="{{id}}"><i class="fas fa-trash"></i></a>
          </div>
        </li>
        {{/each}}
      </ol>
      <a class="item-control item-create" title="{{ localize 'UI.add' }}" 
         data-type="major_objective"><i class="fas fa-plus"></i> {{ localize 'ITEMS.new_objective' }}</a>
    </div>

    <div>
      <h5>{{ localize 'VERMINE.minor_objectives' }}</h5>
      <ol class="list-item">
        {{#each system.objectives.minor as |objective id|}}
        <li class="item flexrow" data-index="{{id}}">
          <div class="item-name" style="flex:4;">
            <input type="text" name="system.objectives.minor.{{id}}" value="{{objective}}" 
                   placeholder="Objectif mineur..." />
          </div>
          <div class="item-controls flexrow">
            <a class="item-control objective-delete" title="{{ localize 'UI.effect_delete' }}" 
               data-type="minor" data-index="{{id}}"><i class="fas fa-trash"></i></a>
          </div>
        </li>
        {{/each}}
      </ol>
      <a class="item-control item-create" title="{{ localize 'UI.add' }}" 
         data-type="minor_objective"><i class="fas fa-plus"></i> {{ localize 'ITEMS.new_objective' }}</a>
    </div>
  </div>

  {{!-- Group Abilities --}}
  <div class="grid-span-2">
    <h4 class="align-center">
      <span>{{ localize 'VERMINE.group_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>

  {{!-- Totem Section --}}
  <div class="grid-span-2">
    <h4 class="align-center">{{ localize 'IDENTITY.totem' }}</h4>
    <div class="flexrow flex-group-center">
      <label>{{ localize 'IDENTITY.instincts' }}:</label>
      <input type="text" name="system.identity.instincts" value="{{system.identity.instincts}}" 
             placeholder="Ex: Triompher, relever un défi..." />
    </div>
    <div class="flexrow flex-group-center">
      <label>{{ localize 'IDENTITY.prohibits' }}:</label>
      <input type="text" name="system.identity.prohibits" value="{{system.identity.prohibits}}" 
             placeholder="Ex: Fuir, abandonner..." />
    </div>
    <div class="flexrow flex-group-center">
      {{#if (eq system.identity.totem "")}}
      <a name="chooseTotem" class="chooseTotem">{{ localize 'VERMINE.totem_picker' }}</a>
      {{else}}
      <div class="totem-display flexrow">
        <span style="flex: 1;">{{ smarttl "TOTEMS" system.identity.totem }}</span>
        <a name="chooseTotem" class="chooseTotem">{{ localize 'UI.effect_edit' }}</a>
      </div>
      {{/if}}
    </div>
  </div>
</div>
