<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>

		{{!-- Movement Left --}}
		<div class="movement-wrapper">
			<input class="move-points" type="text" value="{{movePoints}}" title="{{localize "HUD.FreeMove"}}">
			<a class="move-icon fa-solid fa-shoe-prints" title="{{localize "HUD.MoveAction"}}"></a>
		</div>

		{{!-- Action Points --}}
		<div class="ap-wrapper">
			<a class="spend-ap" data-tooltip="{{localize "HUD.SubAp"}}">
				<i class="fas fa-square-minus"></i>
			</a>
			<a class="regain-ap" data-tooltip="{{localize "HUD.AddAp"}}">
				<i class="fas fa-square-plus"></i>
			</a>
		</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|}}
			<div class="status-wrapper" data-title="{{status.tooltip}}">
        {{!-- Stackable conditions --}}
        {{#if status.stackable}}{{#ifCond status.stack '>' 0}}
        <div class="status-stack">
          <div class="letter-circle-icon">
            <span>{{status.stack}}</span>
          </div>
        </div>
        {{/ifCond}}{{/if}}

        {{!-- Non-stackable conditions --}}
        {{#unless status.stackable}}{{#if status.fromOther}}
        <div class="status-stack">
          <div class="letter-circle-icon">
            <i class="fa-sm fa-solid fa-lock"></i>
          </div>
        </div>
        {{/if}}{{/unless}}
				<img class="effect-control {{status.cssClass}}" src="{{status.src}}" {{#if
					status.title}}data-tooltip="{{status.title}}" {{/if}} data-status-id="{{status.id}}" />
			</div>
			{{/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}}
	</div>
</form>