{{!-- TODO: Refactor to avoid code duplication with items-overview and talents-overview --}}

{{!-- ======================================================================== --}}
{{!-- INLINE PARTIAL DEFINITIONS --}}
{{!-- ======================================================================== --}}

{{!--
!-- Render a list row for a base item from a given item.
!-- Base item means it just has an image, a description, and a name (and effects).
!-- It is a flexbox with a child for each item value of interest.
!-- The partial assumes a variable item to be given in the context.
!--
!-- @param item: hand over the item to the partial as hash parameter
--}}
{{#*inline "baseItemListEntry"}}
<li class="item flexrow" data-item-id="{{item._id}}">
    {{!-- image --}}
    <div class="flex05 item-image">
        <img src="{{item.img}}" title="{{item.name}}" width="24" height="24" />
    </div>
    {{!-- name --}}
    <input class="flex1 item-name item-change" type="text" value="{{item.name}}" data-dtype="String"
        data-property="name" title="{{localize 'DS4.ItemName'}}">
    {{!-- description --}}
    <div class="flex3 item-description">{{{item.data.data.description}}}</div>
    {{!-- control buttons --}}
    {{> systems/ds4/templates/actor/partials/overview-control-buttons.hbs }}
</li>
{{/inline}}

{{!--
!-- Render a list header for a base item list entries from a given item.
!-- The partial assumes a variable dataType to be given in the context.
!--
!-- @param dataType: the string item type for the list
--}}
{{#*inline "baseItemListHeader"}}
<li class="item flexrow item-header">
    {{!-- image --}}
    <div class="flex05 item-image"></div>
    {{!-- name --}}
    <div class="flex1 item-name">{{localize 'DS4.ItemName'}}</div>
    {{!-- description --}}
    <div class="flex3">{{localize 'DS4.Description'}}</div>
    {{!-- add button --}}
    {{> systems/ds4/templates/actor/partials/overview-add-button.hbs dataType=dataType }}
</li>
{{/inline}}


{{!-- ======================================================================== --}}


<div class="tab special-creature-abilites" data-group="primary" data-tab="special-creature-abilites">
    <ol class="items-list">
        {{> baseItemListHeader dataType='specialCreatureAbility' }}
        {{#each itemsByType.specialCreatureAbility as |item id|}}
        {{> baseItemListEntry item=item}}
        {{/each}}
    </ol>
</div>