<form id="{{id}}" class="{{classes}}" data-appid="{{appId}}" autocomplete="off" onsubmit="event.preventDefault();">

    <div class="col left">
        <div class="attribute elevation" data-tooltip="HUD.Elevation">
            <i class="fas fa-angle-up"></i>
            <input type="text" name="elevation" value="{{elevation}}" {{disabled (or locked (and isGamePaused (not isGM)))}}>
        </div>

        <div class="control-icon" data-action="sort-up" data-tooltip="HUD.ToFront">
            <img src="{{icons.up}}" width="36" height="36"/>
        </div>

        <div class="control-icon" data-action="sort-down" data-tooltip="HUD.ToBack">
            <img src="{{icons.down}}" width="36" height="36"/>
        </div>

        {{#if canConfigure}}
        <div class="control-icon" data-action="config" data-tooltip="HUD.OpenConfig">
            <i class="fas fa-cog"></i>
        </div>
        {{/if}}
    </div>

    <div class="col middle">
        <div class="attribute bar2">
            {{#if displayBar2}}
            <input type="text" name="bar2" value="{{bar2Data.value}}" {{#unless bar2Data.editable}}disabled{{/unless}}>
            {{/if}}
        </div>

        <div class="attribute bar1">
            {{#if displayBar1}}
            <input type="text" name="bar1" value="{{bar1Data.value}}" {{#unless bar1Data.editable}}disabled{{/unless}}>
            {{/if}}
        </div>
    </div>

    <div class="col right">
        {{#if isGM}}
        <div class="control-icon {{visibilityClass}}" data-action="visibility" data-tooltip="HUD.ToggleVis">
            <img src="{{icons.visibility}}" width="36" height="36"/>
        </div>
        {{/if}}

        <div class="control-icon {{effectsClass}}" data-action="effects" data-tooltip="HUD.AssignStatusEffects">
            <img src="{{icons.effects}}" width="36" height="36"/>
        </div>
        <div class="status-effects">
            {{#each statusEffects as |status|}}
            <img class="effect-control {{status.cssClass}}" src="{{status.src}}"
                 {{#if status.title}}data-tooltip="{{status.title}}"{{/if}} data-status-id="{{status.id}}"/>
            {{/each}}
        </div>

        <div class="control-icon {{targetClass}}" data-action="target" data-tooltip="HUD.ToggleTargetState">
            <i class="fas fa-bullseye"></i>
        </div>

        {{#if canToggleCombat}}
        <div class="control-icon {{combatClass}}" data-action="combat" data-tooltip="HUD.ToggleCombatState">
            <img src="{{icons.combat}}" width="36" height="36"/>
        </div>


					{{#if combatClass}}
					<div class="control-icon {{effectsClass}} maneuvers" data-action="maneuvers" data-tooltip="GURPS.setManeuver">
							<img src="{{icons.maneuvers}}" width="36" height="36"/>
					</div>
					<div class="maneuver-palette">
							{{#each maneuvers as |status|}}
							<img class="maneuver-control {{status.cssClass}}" src="{{status.src}}"
									{{#if status.title}}data-tooltip="{{status.title}}"{{/if}} data-status-id="{{status.id}}"/>
							{{/each}}
					</div>
					{{/if}}
        {{/if}}
</form>
    </div>
