kopparhavet/templates/chat/item-card.html

<div class="kopparhavet chat-item">
    <div class="border">
        {{#if img}}
        <img src="{{img}}" title="{{name}}" />
        {{/if}}

        <h2>{{name}}</h2>
        {{#if isGear}}
        <h4>{{localize "ITEM.GEAR"}}</h4>
        {{/if}}
        {{#if isAdversaryAttack}}
        <h4>{{localize "ITEM.ATTACK"}}</h4>
        {{/if}}
        {{#if isSkill}}
        <h4>{{skillType data.type.value}}</h4>
        {{/if}}
        {{#if isSpell}}
        <h4>{{localize "ITEM.SPELL"}}</h4>
        {{/if}}
        {{#if isTalent}}
        <h4>{{localize "ITEM.TALENT"}}</h4>
        {{/if}}
        {{#if isWeapon}}
        <h4>{{weaponCategory data.category.value}}</h4>
        {{/if}}

        {{#if isArmor}}
        <div class="grid-container" style="grid-template-columns: 1fr auto 1fr auto">
            <strong>{{localize data.price.label}}:</strong> {{data.price.value}}
            {{#if data.helmet.value}}
            <strong>{{localize data.helmet.label}}</strong>
            {{else}}
            <strong>{{localize data.defence.label}}:</strong> {{data.defence.value}}
            {{/if}}
        </div>
        {{#if data.description}}
        <h5>{{localize data.description.label}}</h5>
        {{{data.description.value}}}
        {{/if}}
        {{/if}}

        {{#if isGear}}
        <div class="grid-container" style="grid-template-columns: 1fr auto 1fr auto;">
            <strong>{{localize data.price.label}}:</strong> {{data.price.value}}
            <strong>{{localize data.quantity.label}}:</strong> {{data.quantity.value}}
        </div>

        {{#if data.description}}
        <h5>{{localize data.description.label}}</h5>
        {{{data.description.value}}}
        {{/if}}
        {{/if}}

        {{#if isSkill}}
        {{#if data.description}}
        <h5>{{localize data.description.label}}</h5>
        {{{data.description.value}}}
        {{/if}}
        {{/if}}

        {{#if isAdversaryAttack}}
        <div class="grid-container" style="grid-template-columns: 1fr auto 1fr auto">
            <strong>{{localize data.skill.label}}:</strong> {{data.skill.value}}
            <strong>{{localize data.damage.label}}:</strong> {{data.damage.value}}
        </div>
        {{#if data.description}}
        <h5>{{localize data.description.label}}</h5>
        {{{data.description.value}}}
        {{/if}}
        {{/if}}

        {{#if isSpell}}
        <div class="grid-container" style="grid-template-columns: 1fr auto 1fr auto">
            <strong>{{localize data.cost.label}}:</strong> {{data.cost.value}}
            <strong>{{localize data.difficulty.label}}:</strong> {{rollDifficulty data.difficulty.value}}
            <div style="grid-column-start: 1; grid-column-end: 5;">
                <strong>{{localize data.roll.label}}:</strong> {{spellRoll data.roll.value}}
            </div>
        </div>
        {{#if data.description}}
        <h5>{{localize data.description.label}}</h5>
        {{{data.description.value}}}
        {{/if}}
        {{/if}}

        {{#if isTalent}}
        {{#if data.description}}
        <h5>{{localize data.description.label}}</h5>
        {{{data.description.value}}}
        {{/if}}
        {{/if}}

        {{#if isWeapon}}
        <div class="grid-container" style="grid-template-columns: 1fr auto 1fr auto">
            <strong>{{localize data.price.label}}:</strong> {{data.price.value}}
            <strong>{{localize data.damage.label}}:</strong> {{data.damage.value}}
        </div>
        {{#if data.description}}
        <h5>{{localize data.description.label}}</h5>
        {{{data.description.value}}}
        {{/if}}
        {{/if}}
    </div>
</div>