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

{{!--
!-- Base template to display a value with unit.
!-- @param unitDatum: the object to display; must have a value and a unit attribute
!-- @param localizationString
!-- @param unitNames: mapping of allowed unitDatum.unit values to localized unit name
!-- @param unitAbbrs: mapping of allowed unitDatum.unit values to unit abbreviation
--}}
{{#*inline "unit"}}
<div class="unit-data-pair item-num-val"
    title="{{localize localizationString}} [{{lookup unitNames unitDatum.unit}}]" >
    {{#if unitDatum.value }}
    {{unitDatum.value}}&thinsp;{{lookup unitAbbrs unitDatum.unit}}
    {{else}}-{{/if}}
</div>
{{/inline}}
{{!-- 
!-- Two templates based on the "unit" template for displaying values with unit.
!-- Both accept a `config` object holding the unitNames and unitAbbr instead of
!-- directly handing over the latter two.
--}}
{{#*inline "temporalUnit"}}
{{> unit unitNames=config.i18n.temporalUnits unitAbbrs=config.i18n.temporalUnitsAbbr unitDatum=unitDatum localizationString=localizationString}}
{{/inline}}

{{#*inline "distanceUnit"}}
{{> unit unitNames=config.i18n.distanceUnits unitAbbrs=config.i18n.distanceUnitsAbbr unitDatum=unitDatum localizationString=localizationString}}
{{/inline}}


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


<div class="tab spells" data-group="primary" data-tab="spells">
    <ol class="items-list">
        <li class="item flexrow item-header">
            {{!-- equipped --}}
            <div class="flex05 item-image" title="{{localize 'DS4.ItemEquipped'}}">{{localize 'DS4.ItemEquippedAbbr'}}</div>
            {{!-- image --}}
            <div class="flex05 item-image"></div>
            {{!-- name --}}
            <div class="flex2 item-name">{{localize 'DS4.ItemName'}}</div>
            {{!-- spell type --}}
            <div class="item-image" title="{{localize 'DS4.SpellType'}}">{{localize 'DS4.SpellTypeAbbr'}}</div>
            {{!-- spell bonus --}}
            <div class="item-num-val" title="{{localize 'DS4.SpellBonus'}}">{{localize 'DS4.SpellBonusAbbr'}}</div>
            {{!-- max. distance --}}
            <div class="item-num-val" title="{{localize 'DS4.SpellMaxDistance'}}"><i class="fas fa-ruler"></i></div>
            {{!-- duration --}}
            <div class="item-num-val" title="{{localize 'DS4.SpellDuration'}}"><i class="far fa-clock"></i></div>
            {{!-- cooldown duration --}}
            <div class="item-num-val" title="{{localize 'DS4.SpellCooldownDuration'}}"><i class="fas fa-hourglass-half"></i></div>
            {{!-- description --}}
            {{!-- <div class="flex3">{{localize 'DS4.Description'}}</div> --}}
            {{!-- control buttons placeholder --}}
            <div></div>
        </li>
        {{#each itemsByType.spell as |item id|}}
        <li class="item flexrow" data-item-id="{{item._id}}">
            <input class="flex05 item-image item-change" type="checkbox" {{checked item.data.data.equipped}} data-dtype="Boolean"
                    data-property="data.equipped" title="{{localize 'DS4.ItemEquipped'}}">
            {{!-- 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'}}" />
            {{!-- spell type --}}
            <div class="flex05 item-image">
                <img src="{{lookup ../config.icons.spellTypes item.data.data.spellType}}"
                    title="{{lookup ../config.i18n.spellTypes item.data.data.spellType}}" width="24" height="24" />
            </div>
            {{!-- spell bonus --}}
            <input class="item-num-val item-change" type="text" data-dtype="String"
                data-property="data.bonus" value="{{item.data.data.bonus}}" title="{{localize 'DS4.SpellBonus'}}" />
            {{!-- max. distance --}}
            {{> distanceUnit localizationString='DS4.SpellMaxDistance' unitDatum=item.data.data.maxDistance config=../config}}
            {{!-- duration --}}
            {{> temporalUnit localizationString='DS4.SpellDuration' unitDatum=item.data.data.duration config=../config}}
            {{!-- cooldown duration --}}
            {{> temporalUnit localizationString='DS4.SpellCooldownDuration' unitDatum=item.data.data.cooldownDuration config=../config}}
            {{!-- description --}}
            {{!-- <div class="flex3 item-description">{{{item.data.data.description}}}</div> --}}
            {{!-- control buttons --}}
            {{> systems/ds4/templates/actor/partials/overview-control-buttons.hbs }}
        </li>
        {{/each}}
    </ol>
    {{!-- add button --}}
    {{> systems/ds4/templates/actor/partials/overview-add-button.hbs dataType='spell' }}
</div>