<form class="{{ cssClass }}" autocomplete="off">

    {{!-- Header --}}
    <header class="sheet-header">

        {{!-- Image --}}
        <div class="left">

            <img class="item-image" src="{{ item.img }}" alt="{{ name.value }}" {{#if editable}}data-edit="img"{{/if}}>

        </div>

        {{!-- Name & Subtitles --}}
        <div class="middle identity-info">

            {{!-- Name --}}
            {{#if editable}}
            {{ formInput name.field value=name.editable input=inputs.createTextInput
                         classes="document-name uninput" }}
            {{else}}
            <div class="document-name">{{ name.value }}</div>
            {{/if}}

            {{!-- Type-Specific Subtitles --}}
            <ul class="subtitles unlist">
                {{~#each subtitles}}
                {{#unless (and requiresIdentification @root.concealDetails)}}
                {{#if @root.editable}}
                {{#if field}}
                <li {{#if classes}}class="{{ classes }}"{{/if}}>
                    {{ formInput field value=value choices=choices blank=blank placeholder=(localize placeholder)
                                 localize=true }}
                </li>
                {{/if}}
                {{else}}
                {{#if label}}
                <li {{#if classes}}class="{{ classes }}"{{/if}}><span>{{ label }}</span></li>
                {{/if}}
                {{/if}}
                {{/unless}}
                {{/each~}}
            </ul>

        </div>

        {{!-- Weight, Price, Quantity, Level, & School --}}
        <div class="right common-fields {{#if isPhysical}}physical{{/if}}">

            {{#if isPhysical}}

            {{!-- Quantity --}}
            <div class="quantity">
                <span class="separator">&times;</span>
                {{#if editable}}
                {{ formInput fields.quantity value=source.quantity }}
                {{else}}
                <span class="value">{{ dnd5e-numberFormat system.quantity }}</span>
                {{/if}}
            </div>

            {{!-- Weight --}}
            <div class="weight">
                {{#if editable}}
                {{ formInput fields.weight.fields.value value=source.weight.value }}
                {{ formInput fields.weight.fields.units value=source.weight.units choices=config.weightUnits
                             labelAttr="abbreviation" }}
                {{else}}
                <span class="value">{{ dnd5e-numberFormat system.weight.value }}</span>
                <i class="fas fa-weight-hanging"
                   aria-label="{{ lookup (lookup config.weightUnits system.weight.units) "label" }}"></i>
                {{/if}}
            </div>

            {{!-- Price --}}
            {{#if (or isIdentified user.isGM)}}
            <div class="price">
                {{#if editable}}
                {{ formInput fields.price.fields.value value=source.price.value }}
                {{ formInput fields.price.fields.denomination value=source.price.denomination choices=config.currencies
                             labelAttr="abbreviation" }}
                {{else}}
                <span class="value">{{ dnd5e-numberFormat system.price.value }}</span>
                <i class="currency {{ system.price.denomination }}"
                   aria-label="{{ lookup (lookup config.currencies system.price.denomination) "label" }}"></i>
                {{/if}}
            </div>
            {{/if}}

            {{/if}}

            {{!-- Facilities --}}
            {{#if (eq item.type "facility")}}
            <div class="quantity">
                <span class="value">{{ localize "DND5E.FACILITY.Squares" squares=system.squares }}</span>
            </div>
            {{#if (eq system.type.value "basic")}}
            <div class="price">
                <span class="value">{{ dnd5e-numberFormat system.price.value }}</span>
                <i class="currency gp" aria-label="{{ config.currencies.gp.label }}"></i>
            </div>
            {{/if}}
            {{/if}}

            {{!-- School --}}
            {{#if (eq item.type "spell")}}
            <div class="school" aria-label="{{ labels.school }}">
                {{#with (lookup @root.config.spellSchools system.school) as |schoolConfig|}}
                <dnd5e-icon src="{{ schoolConfig.icon }}"></dnd5e-icon>
                {{/with}}
            </div>
            {{/if}}

            {{!-- Level --}}
            {{#if (eq item.type "class")}}
            <div class="level-badge badge" aria-label="{{ localize "DND5E.LevelNumber" level=system.levels }}">
                {{ system.levels }}
            </div>
            {{/if}}

        </div>

    </header>

    {{!-- Tabs --}}
    <nav class="sheet-navigation tabs" data-group="primary">
        {{#each tabs}}
        <a class="{{ classes }}" data-tab="{{ tab }}">
            <span>{{ localize label }}</span>
        </a>
        {{/each}}
    </nav>

    <hr class="ampersand">

    {{!-- Body --}}
    <section class="sheet-body">

        {{!-- Contents --}}
        <div class="tab contents" data-group="primary" data-tab="contents">
            {{> "dnd5e.inventory2" sections=inventory }}
        </div>

        {{!-- Description Tab --}}
        {{> "dnd5e.item-description2" }}

        {{!-- Details --}}
        {{> "dnd5e.item-details" }}

        {{!-- Activities --}}
        {{> "dnd5e.item-activities" }}

        {{!-- Advancement Tab --}}
        {{> "dnd5e.item-advancement2" }}

        {{!-- Effects Tab --}}
        <div class="tab effects" data-group="primary" data-tab="effects">
            {{> "dnd5e.active-effects2" }}
        </div>

    </section>

    {{!-- Child Creation --}}
    <button type="button" class="create-child gold-button interface-only"
            aria-label="{{ localize "CONTROLS.CommonCreate" }}">
        <i class="fas fa-plus" inert></i>
    </button>

</form>
