{{!-- ======================================================================== --}}
{{!-- INLINE PARTIAL DEFINITIONS --}}
{{!-- ======================================================================== --}}
{{!-- TODO: remove duplicate add and delete button definition --}}

{{!--
!-- Render an "add" button for a given data type.
!--
!-- @param datType: hand over the dataType to the partial as hash parameter
--}}
{{#*inline "addItemButton"}}
    <div class="item-controls">
        <a class="item-control item-create" title="Create item" data-type="{{dataType}}">
            <i class="fas fa-plus"></i>
            {{localize 'DS4.UserInteractionAddItem'}}</a>
    </div>
{{/inline}}
{{!--
!-- Render a group of an "edit" and a "delete" button for the current item.
!-- The current item is defined by the data-item-id HTML property of the parent li element.
--}}
{{#*inline "itemControlButtons"}}
    <div class="item-controls">
        <a class="item-control item-edit" title="Edit Item"><i class="fas fa-edit"></i></a>
        <a class="item-control item-delete" title="Delete Item"><i class="fas fa-trash"></i></a>
    </div>
{{/inline}}


{{#*inline "talentRankValue"}}
    <input class="item-num-val item-change" data-dtype="Number" type="number" min="0" step="1"
        {{#if (eq property 'base') }}max="{{item.data.data.rank.max}}"{{/if}}
        {{disabled}}
        data-property="data.rank.{{property}}" value="{{lookup item.data.data.rank property}}"
        title="{{localize localizeString}}" />
{{/inline}}

{{!--
!-- Render a talent list row from a given item.
!-- 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
!-- @param partial-block: hand over custom children of the flexbox in the partial block.
--}}
{{#*inline "talentListEntry"}}
    <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="flex2 item-name item-change" type="text" value="{{item.name}}" data-dtype="String"
            data-property="name" title="{{localize 'DS4.ItemName'}}">
        <div class="flex3 flexrow talent-ranks-equation">
            {{!-- acquired rank --}}
            {{> talentRankValue item=item property='base' localizeString='DS4.TalentRankBase'}}
            <span> ( of </span>
            {{!-- maximum acquirable rank --}}
            {{> talentRankValue item=item property='max' localizeString='DS4.TalentRankMax'}}
            <span>) + </span>
            {{!-- additional ranks --}}
            {{> talentRankValue item=item property='mod' localizeString='DS4.TalentRankMod'}}
            <span> = </span>
            {{!-- derived total rank --}}
            {{> talentRankValue item=item property='total' localizeString='DS4.TalentRankTotal' disabled='disabled'}}
        </div>
        {{!-- description --}}
        <div class="flex4 item-description">{{{item.data.data.description}}}</div>
        {{!-- control buttons --}}
        {{> itemControlButtons}}
    </li>
{{/inline}}


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


<div class="tab items" data-group="primary" data-tab="talents">
    <ol class="items-list">
        <li class="item flexrow item-header">
            {{!-- image --}}
            <div class="flex05 item-image"></div>
            {{!-- name --}}
            <div class="flex2 item-name">{{localize 'DS4.ItemName'}}</div>
            {{!-- rank info --}}
            <div class="flex3">{{localize 'DS4.TalentRank'}}</div>
            {{!-- description --}}
            <div class="flex4">{{localize 'DS4.HeadingDescription'}}</div>
            {{!-- add button --}}
            {{> addItemButton dataType='talent' }}
        </li>
        {{#each itemsByType.talent as |item id|}}
            {{> talentListEntry item=item}}
        {{/each}}
    </ol>
</div>