<section class="content">
    <section class="header">
        {{#if school}}
        <div class="school">
            {{#with (lookup @root.config.spellSchools school) as |schoolConfig|}}
            <dnd5e-icon src="{{ schoolConfig.icon }}"></dnd5e-icon>
            {{/with}}
        </div>
        {{/if}}
        <div class="top">
            <img src="{{ img }}" alt="{{ name }}">
            <div class="name name-stacked">
                <span class="title">{{ name }}</span>
                <span class="subtitle">{{{ subtitle }}}</span>
            </div>
        </div>
        <div class="bottom">
            <div class="price">
                {{#if price}}
                <i class="currency {{ price.denomination }}"></i>
                <span>{{ dnd5e-numberFormat price.value }}</span>
                {{/if}}
            </div>

            <div class="charges">
                {{#if uses.max}}
                <span class="value">{{ uses.value }}</span>
                <span class="separator">&sol;</span>
                <span class="max">{{ uses.max }}</span>
                <span>{{ localize "DND5E.Charges" }}</span>
                {{/if}}
            </div>
            <div class="weight">
                {{#if weight}}
                <i class="fas fa-weight-hanging"></i>
                <span>{{ weight.value }}</span>
                {{/if}}
            </div>
        </div>
    </section>
    {{#if isSpell}}
        {{> "dnd5e.spell-block" }}
    {{/if}}
    <section class="description">{{{ description.value }}}</section>
    <ul class="pills">
        {{#each properties}}
        <li class="pill transparent">
            <span class="label">{{ this }}</span>
        </li>
        {{/each}}
    </ul>
    {{#if controlHints}}
    <div class="control-hint lock-hint">
        <img src="systems/dnd5e/icons/svg/mouse-middle.svg" alt="{{ localize "DND5E.Controls.MiddleClick" }}">
        <span>{{ localize "DND5E.Controls.LockHint" }}</span>
    </div>
    {{/if}}
</section>
