<form class="{{cssClass}} flexcol character-summary-container" autocomplete="off">

  <ol class="items-list cs-table">

    {{!-- PJs section --}}
    <li class="item flexrow cs-section-header">
      <div class="cs-portrait-col"></div>
      <div class="item-field item-name cs-name-col">{{localize "BOL.ui.pcname"}}</div>
      <div class="item-field cs-group-header cs-group-attrs" style="flex: {{mul 2 (countKeys config.attackAttributes)}}">{{localize "BOL.ui.colGroupAttributes"}}</div>
      <div class="item-field cs-group-header cs-group-apts" style="flex: {{mul 2 (countKeys config.aptitudes)}}">{{localize "BOL.ui.colGroupAptitudes"}}</div>
      <div class="item-field cs-group-header cs-group-res" style="flex: {{mul 2 (countKeys config.resources)}}">{{localize "BOL.ui.colGroupResources"}}</div>
      <div class="item-field flex1 right"></div>
    </li>
    <li class="item flexrow cs-col-row">
      <div class="cs-portrait-col"></div>
      <div class="item-field item-name cs-name-col"></div>
      {{#each config.attackAttributes as |attr key|}}
      <div class="item-field flex2 item-field-fixed-short cs-col-header">{{abbrev3 (localize attr)}}</div>
      {{/each}}
      {{#each config.aptitudes as |apt key|}}
      <div class="item-field flex2 item-field-fixed-short cs-col-header {{#if @first}}cs-group-sep{{/if}}">{{abbrev3 (localize apt)}}</div>
      {{/each}}
      {{#each config.resources as |res key|}}
      <div class="item-field flex2 item-field-fixed-short cs-col-header {{#if @first}}cs-group-sep{{/if}}">{{abbrev3 (localize res)}}</div>
      {{/each}}
      <div class="item-field flex1 right"></div>
    </li>

    {{#each pcs as |pc key|}}
    <li class="item flexrow cs-actor-row" data-actor-id="{{pc.id}}">
      <div class="cs-portrait-col">
        <img class="cs-portrait" src="{{pc.img}}" title="{{pc.name}}" />
      </div>
      <div class="item-field item-name cs-name-col">
        <a class="actor-open cs-actor-name">{{pc.name}}</a>
      </div>
      {{#each pc.attributes as |attr|}}
      <div class="item-field flex2 item-field-fixed-short cs-stat">
        <a class="summary-roll cs-rollable" data-type="attribute" data-key="{{attr.key}}">{{attr.value}}</a>
      </div>
      {{/each}}
      {{#each pc.aptitudes as |apt|}}
      <div class="item-field flex2 item-field-fixed-short cs-stat {{#if @first}}cs-group-sep{{/if}}">
        <a class="summary-roll cs-rollable" data-type="aptitude" data-key="{{apt.key}}">{{apt.value}}</a>
      </div>
      {{/each}}
      {{#each pc.resources as |res|}}
      <div class="item-field flex2 item-field-fixed-short cs-resource {{#if @first}}cs-group-sep{{/if}}">
        <span class="cs-res-val">{{res.value}}</span><span class="cs-res-sep">/</span><span class="cs-res-max">{{res.max}}</span>
      </div>
      {{/each}}
      <div class="item-field flex1 right"></div>
    </li>
    {{/each}}

    {{!-- NPCs section --}}
    <li class="item flexrow cs-section-header">
      <div class="cs-portrait-col"></div>
      <div class="item-field item-name cs-name-col">{{localize "BOL.ui.npcname"}}</div>
      <div class="item-field cs-group-header cs-group-attrs" style="flex: {{mul 2 (countKeys config.attackAttributes)}}">{{localize "BOL.ui.colGroupAttributes"}}</div>
      <div class="item-field cs-group-header cs-group-apts" style="flex: {{mul 2 (countKeys config.aptitudes)}}">{{localize "BOL.ui.colGroupAptitudes"}}</div>
      <div class="item-field cs-group-header cs-group-res" style="flex: {{mul 2 (countKeys config.resources)}}">{{localize "BOL.ui.colGroupResources"}}</div>
      <div class="item-field flex1 right"></div>
    </li>
    <li class="item flexrow cs-col-row">
      <div class="cs-portrait-col"></div>
      <div class="item-field item-name cs-name-col"></div>
      {{#each config.attackAttributes as |attr key|}}
      <div class="item-field flex2 item-field-fixed-short cs-col-header">{{abbrev3 (localize attr)}}</div>
      {{/each}}
      {{#each config.aptitudes as |apt key|}}
      <div class="item-field flex2 item-field-fixed-short cs-col-header {{#if @first}}cs-group-sep{{/if}}">{{abbrev3 (localize apt)}}</div>
      {{/each}}
      {{#each config.resources as |res key|}}
      <div class="item-field flex2 item-field-fixed-short cs-col-header {{#if @first}}cs-group-sep{{/if}}">{{abbrev3 (localize res)}}</div>
      {{/each}}
      <div class="item-field flex1 right"></div>
    </li>

    {{#each npcs as |pc key|}}
    <li class="item flexrow cs-actor-row" data-actor-id="{{pc.id}}">
      <div class="cs-portrait-col">
        <img class="cs-portrait" src="{{pc.img}}" title="{{pc.name}}" />
      </div>
      <div class="item-field item-name cs-name-col">
        <a class="actor-open cs-actor-name">{{pc.name}}</a>
      </div>
      {{#each pc.attributes as |attr|}}
      <div class="item-field flex2 item-field-fixed-short cs-stat">
        <a class="summary-roll cs-rollable" data-type="attribute" data-key="{{attr.key}}">{{attr.value}}</a>
      </div>
      {{/each}}
      {{#each pc.aptitudes as |apt|}}
      <div class="item-field flex2 item-field-fixed-short cs-stat {{#if @first}}cs-group-sep{{/if}}">
        <a class="summary-roll cs-rollable" data-type="aptitude" data-key="{{apt.key}}">{{apt.value}}</a>
      </div>
      {{/each}}
      {{#each pc.resources as |res|}}
      <div class="item-field flex2 item-field-fixed-short cs-resource {{#if @first}}cs-group-sep{{/if}}">
        <span class="cs-res-val">{{res.value}}</span><span class="cs-res-sep">/</span><span class="cs-res-max">{{res.max}}</span>
      </div>
      {{/each}}
      <div class="item-field flex1 right">
        <a class="item-control actor-delete" title="{{localize "BOL.ui.delete"}}"><i class="fas fa-trash"></i></a>
      </div>
    </li>
    {{/each}}

    {{!-- Horoscope group section --}}
    {{#if (countKeys horoscopeGroupList)}}
      <li class="item flexrow cs-section-header">
        <div class="cs-portrait-col"></div>
        <div class="item-name flex4 left">{{localize "BOL.ui.horoscopeGroup"}}</div>
        <div class="item-field flex2 center cs-col-header">{{localize "BOL.ui.type"}}</div>
        <div class="item-field flex2 center cs-col-header">{{localize "BOL.ui.horoscopeDiceRemaining"}}</div>
        <div class="item-field flex2 center cs-col-header">{{localize "BOL.ui.horoscopeDiceMax"}}</div>
        <div class="item-field flex1 right"></div>
      </li>
      {{#each horoscopeGroupList as |horo id|}}
        <li class="item flexrow cs-actor-row" data-item-id="{{horo.id}}">
          <div class="cs-portrait-col">
            <img class="cs-portrait" src="icons/magic/perception/eye-ringed-glow-angry-large-red.webp" />
          </div>
          <h4 class="item-name flex4 left cs-actor-name">{{horo.name}}</h4>
          <div class="item-field flex2 center">
            <span class="item-field">{{upperFirst horo.type}}</span>
          </div>
          <div class="item-field flex2 center">
            <input class="cs-input" type="number" id="horoscope-group-edit-available" value="{{horo.availableDice}}" data-horo-id="{{id}}" />
          </div>
          <div class="item-field flex2 center">
            <input class="cs-input" type="number" id="horoscope-group-edit-max" value="{{horo.maxDice}}" data-horo-id="{{id}}" />
          </div>
          <div class="item-field flex1 right"></div>
        </li>
      {{/each}}
    {{/if}}

  </ol>

</form>