<div class="daggerheart dh-style tooltip">
    <div class="tooltip-header">
        <h2>{{effect.name}}</h2>
        {{#if effect.appliedBy}}
            <p class="subtitle">{{localize "DAGGERHEART.UI.EffectsDisplay.appliedBy" by=effect.appliedBy}}</p>
        {{/if}}
    </div>

    {{#if effect.description}}
        <div class="description">
            {{{effect.description}}}
        </div>
    {{else if effect.parent.system.description}}
        <div class="description">
            {{{effect.parent.system.description}}}
        </div>
    {{/if}}

    {{#if effect.system.duration.type}}
        <div class="duration-container">
            <div class="duration-inner-container">
                <span>{{localize "EFFECT.DURATION.Label"}}:</span>
                <span>{{localize (concat "DAGGERHEART.CONFIG.ActiveEffectDuration." effect.system.duration.type )}}</span>
            </div>
        </div>
    {{/if}}

    {{#if effect.system.stacking}}
        <div class="effect-stacks-outer-container">
            <div class="effect-stacks-title">{{localize "Stacks"}}</div>
            <div class="effect-stacks-container">
                <div class="effect-stacks-inner-container">
                    <span class="effect-stack-title">{{localize "Current"}}</span>
                    <span>{{effect.system.stacking.value}}</span>
                </div>
                <div class="effect-stacks-inner-container">
                    <span class="effect-stack-title">{{localize "Max"}}</span>
                    <span>{{effect.system.stacking.max}}</span>
                </div>
            </div>
        </div>
    {{/if}}


        <div class="close-hints">
            {{#if (eq effect.type 'beastform')}}
                <p class="close-hint">
                    <i class="fa-solid fa-computer-mouse"></i> {{localize "DAGGERHEART.UI.Tooltip.middleClick"}}
                </p>
            {{/if}}
            {{#unless effect.isLockedCondition}}
                {{#if effect.system.stacking}}
                    <p class="close-hint">
                        <i class="fa-solid fa-computer-mouse"></i> {{localize "DAGGERHEART.UI.EffectsDisplay.increaseStacks"}}
                    </p>
                    {{#if (gt effect.system.stacking.value 1)}}
                        <p class="close-hint">
                            <i class="fa-solid fa-computer-mouse"></i> {{localize "DAGGERHEART.UI.EffectsDisplay.decreaseStacks"}}
                        </p>
                    {{else}}
                        <p class="close-hint">
                            <i class="fa-solid fa-computer-mouse"></i> {{localize "DAGGERHEART.UI.EffectsDisplay.removeThing" thing=(localize "DAGGERHEART.GENERAL.Effect.single")}}
                        </p>
                    {{/if}}
                {{else}}
                    <p class="close-hint">
                        <i class="fa-solid fa-computer-mouse"></i> {{localize "DAGGERHEART.UI.EffectsDisplay.removeThing" thing=(localize "DAGGERHEART.GENERAL.Effect.single")}}
                    </p>
                {{/if}}
            {{/unless}}
        </div>
</div>