{{!-- 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 "itemListEntry"}}
<li class="ds4-item-list__row item " data-item-id="{{item._id}}">
    {{!-- image --}}
    <div class="ds4-item-list__image" style="background-image: url('{{item.img}}')" title="{{item.name}}"></div>
    {{!-- name --}}
    <input class="ds4-item-list__editable item-change" type="text" value="{{item.name}}" data-dtype="String"
        data-property="name" title="{{htmlToPlainText item.data.description}}" />
    {{!-- description --}}
    <div class="ds4-item-list__description" title="{{htmlToPlainText item.data.description}}">
        {{{item.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.
--}}
{{#*inline "itemListHeader"}}
<li class="ds4-item-list__row ds4-item-list__row--header">
    {{!-- image --}}
    <div></div>
    {{!-- name --}}
    <div>{{localize 'DS4.ItemName'}}</div>
    {{!-- description --}}
    <div class="flex3">{{localize 'DS4.Description'}}</div>
    {{!-- control buttons placeholder --}}
    <div></div>
</li>
{{/inline}}


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


<div class="tab special-creature-abilities" data-group="primary" data-tab="special-creature-abilities">
    <ol class="ds4-item-list ds4-item-list--special-creature-ability item-list">
        {{> itemListHeader }}
        {{#each itemsByType.specialCreatureAbility as |item id|}}
        {{> itemListEntry item=item}}
        {{/each}}
    </ol>
    {{> systems/ds4/templates/actor/partials/overview-add-button.hbs dataType='specialCreatureAbility' }}
</div>