<div class="pf2e chat-card item-card"
    {{#if data.item}}data-embedded-item="{{data.item}}"{{/if}}
    data-spell-lvl="{{data.castLevel}}"
    data-cast-level="{{data.castLevel}}"
    data-actor-id="{{actor.id}}"
    data-item-id="{{item.id}}"
    {{#if tokenId}}data-token-id="{{tokenId}}"{{/if}}
>
    <header class="card-header flexrow">
        <img src="{{item.img}}" title="{{item.name}}" width="36" height="36" />
        <h3>{{item.name}}</h3>
        <h4>{{data.levelLabel}}</h4>
    </header>

    <section class="item-properties tags">
        {{~#if data.actionTraits}}
            {{#each data.actionTraits}}
                <span class="tag" data-trait="{{this.name}}" data-description="{{this.description}}">{{localize this.label}}</span>
            {{/each}}
            <hr class="vr" />
        {{~/if}}
        {{#each data.spellTraits}}
            <span class="tag tag_alt" data-trait="{{this.name}}" data-description="{{this.description}}">{{localize this.label}}</span>
        {{/each}}
    </section>

    <section class="card-content">
        {{{data.description.value}}}
        {{#if data.materials.value}}
            <p><strong>{{localize "PF2E.SpellRequirementsLabel"}}</strong> {{data.materials.value}}</p>
        {{/if}}
    </section>

    <section class="card-buttons">
        {{#each data.variants as |variant|}}
            <button type="button" data-action="selectVariant" data-overlay-ids="{{variant.overlayIds}}"{{#if variant.actions}} class="with-image"{{/if}}>
                {{#if variant.actions}}<img src="{{variant.actions}}" />{{/if}}
                <span>{{variant.name}}</span>
            </button>
        {{else}}
            {{#if data.isSave}}
                <button type="button" data-action="save" data-save="{{data.save.type}}" data-dc="{{data.save.value}}" data-owner-title="{{data.save.breakdown}}">{{data.save.label}}</button>
            {{/if}}
            {{#if (or data.check data.hasDamage data.hasCounteractCheck.value data.area.type)}}
                <section class="owner-buttons">
                    {{#if data.check}}
                        <div class="spell-attack-buttons">
                            <button type="button" data-action="spellAttack">{{localize "PF2E.AttackLabel"}}</button>
                            <button type="button" data-action="spellAttack2">{{localize "PF2E.MAPAbbreviationLabel" penalty=data.check.map1}}</button>
                            <button type="button" data-action="spellAttack3">{{localize "PF2E.MAPAbbreviationLabel" penalty=data.check.map2}}</button>
                        </div>
                    {{/if}}
                    {{#if data.hasDamage}}
                        <div class="spell-button">
                            <button type="button" data-action="spellDamage">{{data.damageLabel}}</button>
                        </div>
                    {{/if}}
                    {{#if data.hasCounteractCheck.value}}
                        <div class="spell-button">
                            <button type="button" data-action="spellCounteract">{{localize "PF2E.Counteract"}}</button>
                        </div>
                    {{/if}}
                    {{#if data.area.type}}
                        <div class="spell-button">
                            <button type="button" data-action="spellTemplate">{{localize "PF2E.Item.Spell.PlaceMeasuredTemplate" shape=data.areaType size=data.areaSize unit=data.areaUnit}}</button>
                        </div>
                    {{/if}}
                    {{#if item.isVariant}}
                        <button type="button" data-action="selectVariant" data-original-id="{{item.original.id}}">{{localize "PF2E.Item.Spell.Variants.SelectOtherVariantLabel"}}</button>
                    {{/if}}
                </section>
            {{/if}}
        {{/each}}
    </section>

    <footer class="card-footer">
        {{#each data.properties}}
            <span>{{localize this}}</span>
        {{/each}}
    </footer>
</div>
