{{! Features Tab }}
<section
  class='tab features scrollable {{tab.cssClass}}'
  data-group='primary'
  data-tab='features'
>
  <section class='grid grid-3col'>
    {{!-- <aside class='sidebar'>
      {{! The grid classes are defined in scss/global/_grid.scss. To use,
          use both the "grid" and "grid-Ncol" class where "N" can be any number
          from 1 to 12 and will create that number of columns.  }}
      <div class='abilities flexcol'>
        {{#each system.abilities as |ability key|}}
          <div class='ability flexrow flex-group-center'>
            <label
              class='resource-label rollable flexlarge align-left'
              data-action='roll'
              data-roll='d20+@abilities.{{key}}.mod'
              data-label='{{localize (lookup @root.config.abilities key)}}'
            >{{localize (lookup @root.config.abilities key)}}</label>
            <input
              type='text'
              name='system.abilities.{{key}}.value'
              value='{{ability.value}}'
              class='ability-score'
              data-dtype='Number'
            />
            <span
              class='ability-mod rollable'
              data-action='roll'
              data-roll='d20+@abilities.{{key}}.mod'
              data-label='{{localize (lookup @root.config.abilities key)}}'
            >{{numberFormat ability.mod decimals=0 sign=true}}</span>
          </div>
        {{/each}}
      </div>
    </aside> --}}

    {{! For the main features list, span the right two columns }}
    {{!-- <section class='main grid-span-2'>
      <ol class='items-list'>
        <li class='item flexrow items-header'>
          <div class='item-name'>{{localize 'Name'}}</div>
          <div class='item-controls'>
            {{#if @root.editMode}}
              <a
                class='item-control item-create'
                title='Create item'
                data-action='createDoc'
                data-document-class='Item'
                data-type='spritepower'
              >
                <i class='fa-solid fa-plus'></i>
                {{localize 'DOCUMENT.New' type=(localize 'TYPES.Item.spritepower')}}
              </a>
            {{/if}}
          </div>
        </li>
        {{#each powers as |item id|}}
          <li
            class='item flexrow'
            data-item-id='{{item._id}}'
            data-drag='true'
            data-document-class='Item'
          >
            <div class='item-name'>
              <div class='item-image'>
                <a class='rollable' data-roll-type='item' data-action='roll'>
                  <img
                    src='{{item.img}}'
                    title='{{item.name}}'
                    width='24'
                    height='24'
                  />
                </a>
              </div>
              <div>{{item.name}}</div>
            </div>
            <div class='item-controls'>
              <a
                class='item-control item-edit'
                title='{{localize "DOCUMENT.Update" type=(localize 'TYPES.Item.spritepower')}}'
                data-action='viewDoc'
              >
                <i class='fa-solid fa-edit'></i>
              </a>
              {{#if @root.editMode}}
                <a
                  class='item-control item-delete'
                  title='{{localize "DOCUMENT.Delete" type=(localize 'TYPES.Item.spritepower')}}'
                  data-action='deleteDoc'
                >
                  <i class='fa-solid fa-trash'></i>
                </a>
              {{/if}}
            </div>
          </li>
        {{/each}}
      </ol>
    </section>
  </section> --}}

<!-- Sprite Powers: -->
<section class="section powers">
  <header class="section-head">
    <h2 class="section-title">
      {{ localize 'shadowrun6.section.spritepowers.title' }}
    </h2>

    {{#if @root.editMode}}
      <div class="item-controls">
        <a
          class="item-control item-create"
          title="{{localize 'DOCUMENT.New' type=(localize 'TYPES.Item.spritepower')}}"
          data-action="createDoc"
          data-document-class="Item"
          data-type="spritepower"
        >
          <i class="fas fa-plus"></i>
        </a>
      </div>
    {{/if}}
  </header>

  <div class="section-header">
    <div></div>
    <div>{{ localize 'shadowrun6.label.column.name' }}</div>
    <div>{{ localize 'shadowrun6.section.spells.column.sustained' }}</div>
    <div>{{ localize 'shadowrun6.label.column.action' }}</div>
  </div>

  <ol class="section-list">
    {{#each powers as |item id|}}
      <li
        class="section-item"
        data-item-id="{{item.id}}"
        data-document-class="Item"
      >
        <div class="section-row">
          <div class="section-column">
            <button
              type="button"
              class="item-desc-toggle {{#if (not item.system.description)}}collapsible closed empty{{else}}collapsible closed{{/if}}"
              {{#if item.system.description}}
                data-action="itemDescToggle"
                data-item-id="{{item.id}}"
                title="{{localize 'SR6.title.clickItemName'}}"
              {{/if}}
            >
              +
            </button>
          </div>

          <div class="section-name draggable" data-item-id="{{item.id}}" draggable="true">
            {{item.name}}
          </div>

          <div class="section-column">
            {{#if (eq item.system.duration 'sustained')}}
              {{!-- <label class="switch" title="{{localize 'shadowrun6.section.sustained.toggle'}}">
                <input
                  type="checkbox"
                  data-action="itemSustainToggle"
                  {{checked item.system.isSustained}}
                >
                <span class="shadowrun6-slider round"></span>
              </label> --}}
              <a
                class="item-control item-toggle"
                data-action='itemSustainToggle'
                title="{{localize "shadowrun6.section.sustained.toggle"}}"
              >
                <i class='fas {{#if item.system.isSustained}}fa-toggle-on{{else}}fa-toggle-off{{/if}}'></i>
              </a>
            {{/if}}
          </div>

          <div class="section-column item-controls">
            <a
              class="item-control draggable"
              title="{{skillHint actor item.system.skill 'resonance'}}"
              data-action="roll"
              data-roll-type="item"
              data-item-id="{{item.id}}"
              data-uuid="{{item.uuid}}"
            >
              <i class="fas fa-dice-six"></i>
            </a>

            <a
              class="item-control item-edit"
              title="{{localize 'DOCUMENT.Update' type=(localize 'TYPES.Item.spritepower')}}"
              data-action="viewDoc"
            >
              <i class="fas fa-edit"></i>
            </a>

            {{#if @root.editMode}}
              <a
                class="item-control item-delete"
                title="{{localize 'DOCUMENT.Delete' type=(localize 'TYPES.Item.spritepower')}}"
                data-action="deleteDoc"
              >
                <i class="fas fa-trash"></i>
              </a>
            {{/if}}
          </div>
        </div>

        <section class="collapsible-content closed" data-item-id="{{item.id}}">
          <strong>{{ localize 'shadowrun6.item.description' }}</strong>
          <div>{{{item.system.description}}}</div>
        </section>
      </li>
    {{/each}}
  </ol>
</section>
<!-- /Sprite Powers -->




</section>
