<form class="{{cssClass}} flexcol" autocomplete="off">
    <header class="sheet-header flexrow">
        <img class="profile" src="{{actor.img}}" data-tooltip="{{actor.name}}" alt="{{actor.name}}"
             data-edit="img">
        <section class="header-details flexrow">
            {{> "dnd5e.actor-warnings"}}

            <h1 class="charname">
                <input name="name" type="text" value="{{actor.name}}" placeholder="{{localize 'DND5E.Name'}}">
            </h1>
            <ul class="summary flexrow">
                <li class="size">
                    <span>{{lookup (lookup config.actorSizes system.traits.size) "label"}}</span>
                </li>
                <li class="vehicle-type">
                    <select name="system.vehicleType">
                      {{selectOptions config.vehicleTypes selected=system.vehicleType}}
                    </select>
                </li>
                <li class="dimensions">
                    <input type="text" name="system.traits.dimensions" value="{{system.traits.dimensions}}"
                           placeholder="{{localize 'DND5E.Dimensions'}}">
                </li>
                <li class="source">
                    {{#if system.source.directlyEditable}}
                        <input type="text" name="system.source.custom" value="{{ system.source.custom }}"
                                     placeholder="{{ localize 'DND5E.SOURCE.FIELDS.source.label' }}">
                    {{else}}
                        <span data-tooltip="{{ system.source.label }}">{{ system.source.label }}</span>
                    {{/if}}
                    {{#if editable}}
                        <a class="config-button" data-action="source" data-tooltip="DND5E.SOURCE.Action.Configure">
                            <i class="fas fa-cog" inert></i>
                        </a>
                    {{/if}}
                </li>
            </ul>
            <ul class="attributes flexrow">
                <li class="attribute health">
                    <h4 class="attribute-name box-title">{{localize 'DND5E.HitPoints'}}</h4>
                    <div class="attribute-value multiple">
                        <input name="system.attributes.hp.value" type="text" data-dtype="Number"
                            value="{{hp.value}}" placeholder="&mdash;" data-tooltip="DND5E.HitPointsCurrent">
                        <span class="sep"> &sol; </span>
                        <input name="system.attributes.hp.max" type="text" data-dtype="Number"
                            value="{{hp.max}}" placeholder="&mdash;" data-tooltip="DND5E.HitPointsMax">
                    </div>
                    <footer class="attribute-footer">
                        <input class="temphp" name="system.attributes.hp.dt" type="text" data-dtype="Number"
                            placeholder="{{localize 'DND5E.Threshold'}}"
                            value="{{hp.dt}}" data-tooltip="DND5E.DamageThreshold">
                        <input class="temphp" name="system.attributes.hp.mt" type="text" data-dtype="Number"
                            placeholder="{{localize 'DND5E.VehicleMishap'}}"
                            value="{{hp.mt}}" data-tooltip="DND5E.VehicleMishapThreshold">
                    </footer>
                </li>
                <li class="attribute">
                    <h4 class="attribute-name box-title">{{localize 'DND5E.ArmorClass'}}</h4>
                    <div class="attribute-value">
                        {{numberInput system.attributes.ac.flat name="system.attributes.ac.flat" min=0 step=1
                                      placeholder="—"}}
                    </div>
                    <footer class="attribute-footer">
                        <input type="text" name="system.attributes.ac.motionless"
                               placeholder="&mdash;" value="{{system.attributes.ac.motionless}}"
                               data-tooltip="DND5E.ArmorClassMotionless">
                    </footer>
                </li>
                <li class="attribute movement">
                    <h4 class="attribute-name box-title">{{ localize "DND5E.Movement" }}</h4>
                    <a class="config-button" data-action="movement" data-tooltip="DND5E.MovementConfig">
                        <i class="fas fa-cog"></i>
                    </a>
                    <div class="attribute-value">
                        <span>{{movement.primary}}</span>
                    </div>
                    <footer class="attribute-footer">
                        <span>{{movement.special}}</span>
                    </footer>
                </li>
            </ul>
        </section>
    </header>

    <nav class="sheet-navigation tabs" data-group="primary">
        <a class="item active" data-tab="attributes">{{localize 'DND5E.Attributes'}}</a>
        <a class="item" data-tab="features">{{localize 'DND5E.Features'}}</a>
        <a class="item" data-tab="cargo">{{localize 'DND5E.VehicleCargoCrew'}}</a>
        <a class="item" data-tab="effects">{{ localize "DND5E.Effects" }}</a>
        <a class="item" data-tab="biography">{{localize 'DND5E.Description'}}</a>
    </nav>

    <section class="sheet-body">
        <div class="tab attributes flexrow" data-group="primary" data-tab="attributes">
            <ul class="ability-scores flexrow">
            {{#each abilities as |ability id|}}
                <li class="ability" data-ability="{{id}}">
                    <h4 class="ability-name box-title rollable">{{ability.label}}</h4>
                    <input type="text" name="system.abilities.{{id}}.value" value="{{ability.value}}"
                           class="ability-score"  placeholder="0" data-dtype="Number">
                    <div class="ability-modifiers flexrow">
                        <span class="ability-mod" data-tooltip="DND5E.Modifier">
                            {{numberFormat ability.mod decimals=0 sign=true}}
                        </span>
                    </div>
                </li>
            {{/each}}
            </ul>
            <section class="center-pane flexcol">
                <div class="counters">
                    <div class="counter flexrow creature-cap">
                        <h4>{{localize 'DND5E.VehicleCreatureCapacity'}}</h4>
                        <div class="counter-value">
                            <input type="text" placeholder="&mdash;"
                                   name="system.attributes.capacity.creature"
                                   value="{{system.attributes.capacity.creature}}">
                        </div>
                    </div>
                    <div class="counter flexrow cargo-cap">
                        <h4>{{localize 'DND5E.VehicleCargoCapacity'}}</h4>
                        <div class="counter-value">
                            {{numberInput system.attributes.capacity.cargo name="system.attributes.capacity.cargo" min=0
                                          placeholder=0}}
                        </div>
                    </div>
                    <div class="counter flexrow stations">
                        <h4>{{localize 'DND5E.VehicleActionStations'}}</h4>
                        <div class="counter-value">
                            <input name="system.attributes.actions.stations" type="checkbox"
                                   data-dtype="Boolean" value="{{system.attributes.actions.stations}}"
                                   {{checked system.attributes.actions.stations}}>
                        </div>
                    </div>
                    <div class="counter flexrow actions">
                        <h4>{{localize 'DND5E.ActionPl'}}</h4>
                        <div class="counter-value">
                            {{numberInput system.attributes.actions.value name="system.attributes.actions.value" min=0
                                          step=1 placeholder=0 title=(localize "DND5E.VehicleActionsHint")}}
                        </div>
                    </div>
                    <div class="counter flexrow action-thresholds">
                        <h4>{{localize 'DND5E.VehicleActionThresholds'}}</h4>
                        <div class="counter-value">
                            <span class="sep">&lt;</span>
                            {{numberInput system.attributes.actions.thresholds.[2] min=0 step=1 placeholder="—"
                                          name="system.attributes.actions.thresholds.2"
                                          title=(localize "DND5E.VehicleActionThresholdsFull")}}
                            <span class="sep">&lt;</span>
                            {{numberInput system.attributes.actions.thresholds.[1] min=0 step=1 placeholder="—"
                                          name="system.attributes.actions.thresholds.1"
                                          title=(localize "DND5E.VehicleActionThresholdsMid")}}
                            <span class="sep">&lt;</span>
                            {{numberInput system.attributes.actions.thresholds.[0] min=0 step=1 placeholder="—"
                                          name="system.attributes.actions.thresholds.0"
                                          title=(localize "DND5E.VehicleActionThresholdsMin")}}
                        </div>
                    </div>
                </div>
                {{> "dnd5e.actor-traits"}}
            </section>
        </div>

        <div class="tab features flexcol" data-group="primary" data-tab="features">
            {{> "dnd5e.actor-features" sections=features}}
        </div>

        <div class="tab cargo flexcol" data-group="primary" data-tab="cargo">
            {{> "dnd5e.inventory" sections=cargo}}
        </div>
        <div class="tab effects flexcol" data-group="primary" data-tab="effects">
            {{> "dnd5e.active-effects"}}
        </div>
        <div class="tab biography flexcol" data-group="primary" data-tab="biography">
            {{editor biographyHTML target="system.details.biography.value" button=true editable=editable
                     engine="prosemirror" collaborate=false}}
        </div>
    </section>
</form>
