<form class="actor-sheet {{cssClass}}" autocomplete="off">
	<header class="flexbox" style="background-color: beige; padding: 5px; border: 2px solid black;">

		<!-- Logo -->
		<div class="flexcolumn-5" style="height: 200px;">
			<img  class="profile-img" src="/systems/midgard5/assets/icons/backgrounds/bg1.webp" alt="Midgard">
		</div>

		<!-- Name, Class, Level, Race, Occupation -->
		<div class="flexcolumn-2" style="margin:0px 5px 0px 5px;">
			<table class="bordered">
				<tr>
					<td >{{localize "midgard5.actor-name"}}</td>
					<td colspan="3"><input name="name" type="text" value="{{actor.name}}" data-dtype="String"  /></td>
				</tr>
				<tr>
					<td >{{localize "midgard5.class"}}</td>
					<td><input name="data.info.class" type="text" value="{{data.info.class}}" data-dtype="String" /></td>
					<td >{{localize "midgard5.level"}}</td>
					<td>{{data.calc.level}}</td>
			</table>

			<table style="font-weight: bold;">
				<tr height = 10px></tr>
				<tr>
					<td >
						<input list="races" type="search" name="data.info.race" value="{{data.info.race}}" />
						<datalist id="races">
							<option value="Mensch">
							<option value="Elf">
							<option value="Gnom">
							<option value="Halbling">
							<option value="Zwerg">
						</datalist>
					</td>
					<td ><input name="data.info.occupation" type="text" value="{{data.info.occupation}}" data-dtype="String" /></td>
				</tr>
				<tr>
					<td style="text-align: center; font-size: small">{{localize "midgard5.race"}}</td>
					<td style="text-align: center; font-size: small">{{localize "midgard5.occupation"}}</td>
				</tr>
			</table>

			<table style="width: 100%;">
				<tr>
					<td class="attribute">{{localize "midgard5.actor-st"}}</td>
					<td class="attribute">{{localize "midgard5.actor-gs"}}</td>
					<td class="attribute">{{localize "midgard5.actor-gw"}}</td>
					<td class="attribute">{{localize "midgard5.actor-ko"}}</td>
					<td class="attribute">{{localize "midgard5.actor-in"}}</td>
					<td class="attribute">{{localize "midgard5.actor-zt"}}</td>
					<td class="attribute">{{localize "midgard5.actor-au"}}</td>
					<td class="attribute">{{localize "midgard5.actor-pa"}}</td>
					<td class="attribute">{{localize "midgard5.actor-wk"}}</td>
					<td class="attribute">{{localize "midgard5.actor-git"}}</td>
				</tr>
				<tr>
					<td class="attribute-value roll-attribute-button" data-attribute="st" data-value="{{data.calc.attributes.st.value}}">{{data.calc.attributes.st.value}}</td>
					<td class="attribute-value roll-attribute-button" data-attribute="gs" data-value="{{data.calc.attributes.gs.value}}">{{data.calc.attributes.gs.value}}</td>
					<td class="attribute-value roll-attribute-button" data-attribute="gw" data-value="{{data.calc.attributes.gw.value}}">{{data.calc.attributes.gw.value}}</td>
					<td class="attribute-value roll-attribute-button" data-attribute="ko" data-value="{{data.calc.attributes.ko.value}}">{{data.calc.attributes.ko.value}}</td>
					<td class="attribute-value roll-attribute-button" data-attribute="in" data-value="{{data.calc.attributes.in.value}}">{{data.calc.attributes.in.value}}</td>
					<td class="attribute-value roll-attribute-button" data-attribute="zt" data-value="{{data.calc.attributes.zt.value}}">{{data.calc.attributes.zt.value}}</td>
					<td class="attribute-value roll-attribute-button" data-attribute="au" data-value="{{data.calc.attributes.au.value}}">{{data.calc.attributes.au.value}}</td>
					<td class="attribute-value roll-attribute-button" data-attribute="pa" data-value="{{data.calc.attributes.pa.value}}">{{data.calc.attributes.pa.value}}</td>
					<td class="attribute-value roll-attribute-button" data-attribute="wk" data-value="{{data.calc.attributes.wk.value}}">{{data.calc.attributes.wk.value}}</td>
					<td class="attribute-value roll-attribute-button" data-attribute="git" data-value="{{data.calc.stats.poisonResistance.value}}">{{data.calc.stats.poisonResistance.value}}</td>
				</tr>
			</table>
		</div>

		<!-- Profilbild -->
		<div class="flexcolumn-5" style="height: 200px;text-align: center;" >
			<img class="profile-img" src="{{actor.img}}" data-edit="img" title="{{actor.name}}" />
		</div>

		<!-- LP + AP -->
		<div class="flexcolumn-1">
			<table>
				<tr>
					<td><b>{{localize "midgard5.actor-lp-short"}}</b></td>
					<td colspan="9">
						<div class="health-bar">
							<input name="data.lp.value" type="text" value="{{data.lp.value}}" data-dtype="Number" />
							{{#times data.lp.max}}
								{{#if (lt this ../data.lp.value)}}
									<div class="lp-bar-item update-lp" data-value="{{this}}"></div>
								{{else}}
									<div class="lp-bar-item-empty update-lp" data-value="{{this}}"></div>
								{{/if}}
							{{/times}}
							<input name="data.lp.max" type="text" value="{{data.lp.max}}" data-dtype="Number" />
						</div>
					</td>
				</tr>
				<tr>
					<td><b>{{localize "midgard5.actor-ap-short"}}</b></td>
					<td colspan="9">
						<div class="health-bar">
							<input name="data.ap.value" type="text" value="{{data.ap.value}}" data-dtype="Number" />
							{{#times data.ap.max}}
								{{#if (lt this ../data.ap.value)}}
									<div class="ap-bar-item update-ap" data-value="{{this}}"></div>
								{{else}}
									<div class="ap-bar-item-empty update-ap" data-value="{{this}}"></div>
								{{/if}}
							{{/times}}
							<input name="data.ap.max" type="text" value="{{data.ap.max}}" data-dtype="Number" />
						</div>
					</td>
				</tr>
			</table>
		</div>
	</header>

	{{!-- Character Sheet Navigation --}}
	<nav class="sheet-navigation tabs" data-group="primary">
		<a class="item active" data-tab="base_values">{{ localize "midgard5.base_values" }}</a>
		<a class="item" data-tab="skills">{{ localize "midgard5.skills" }}</a>
		<a class="item" data-tab="gear">{{ localize "midgard5.gear" }}</a>
		{{#if actor.system.info.magicUsing }}
			<a class="item" data-tab="spells">{{ localize "midgard5.spells" }}</a>
		{{/if}}
		<a class="item" data-tab="kampfkuenste">{{ localize "midgard5.kampfkuenste" }}</a>
		<a class="item" data-tab="effects">{{ localize "midgard5.effects" }}</a>
	</nav>

	<section class="sheet-content">

		<div class="tab base_values flexcol" data-group="primary" data-tab="base_values">
			{{> "systems/midgard5/templates/sheets/character/base_values.hbs"}}
		</div>

		<div class="tab base_values flexcol" data-group="primary" data-tab="skills">
			{{> "systems/midgard5/templates/sheets/character/skills.hbs"}}
		</div>

		<div class="tab base_values flexcol" data-group="primary" data-tab="gear">
			{{> "systems/midgard5/templates/sheets/character/gear.hbs"}}
		</div>

		<div class="tab base_values flexcol" data-group="primary" data-tab="spells">
			{{> "systems/midgard5/templates/sheets/character/spells.hbs"}}
		</div>

		<div class="tab base_values flexcol" data-group="primary" data-tab="kampfkuenste">
			{{> "systems/midgard5/templates/sheets/character/kampfkuenste.hbs"}}
		</div>

		<div class="tab base_values flexcol" data-group="primary" data-tab="effects">
			{{> "systems/midgard5/templates/sheets/character/effects.hbs"}}
		</div>
	</section>
</form>