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

	<div class="sheet-item">

		<header class="sheet-header">
			<div class="top-area">
				<div class="clearareaBox top-side">
					<div class="pullLeft" style="display: flex;">

						{{#if userpermissions.changeItemImage}}
							<img class="profile-img pointer" src="{{item.img}}" title="{{item.name}}" data-edit="img" />
						{{else}}
							<img src="{{item.img}}" />
						{{/if}}
					</div>

					<div class="pullLeft" style="display: flex; width: 300px;">

						<div class="area-box">

							<div class="top-sidetext">
								{{#if (eq data.system.type "wod.types.treasure")}} 
									{{captilize (localize "wod.types.treasure")}} - {{captilize (localize "wod.labels.level")}} {{data.system.level}}
								{{/if}}
							</div>

							<div class="bioInformationArea floating-label-group">
								<input class="sheet-infoValues editable" name="name" type="text" value="{{item.name}}" data-dtype="String" autocomplete="off" autofocus required />
								<span class="floating-label">{{localize 'wod.bio.name'}}</span>
							</div>													
						</div>	
					</div>

					<div class="pullRight" style="width: auto;">
						{{> "systems/worldofdarkness/templates/actor/parts/profile-img.html"}}		
					</div>
				</div>				
			</div>			
		</header>

		<section class="item-body">

			<div class="dialog-area">
			
				{{#if userpermissions.itemAdministrator}}
					<!-- type -->
					<div class="infobox bioInformationArea floating-label-group">
						<select class="sheet-infoValues editable" name="system.type" data-dtype="String">
							{{selectOptions listData.TypeList selected=data.system.type localize=false}}
						</select>
						<span class="floating-label">{{localize "wod.labels.type"}}</span>
					</div>	
				{{/if}}

				<!-- level -->
				<div class="infobox bioInformationArea floating-label-group">
					<select class="sheet-infoValues editable" name="system.level" data-dtype="String">
						{{selectOptions listData.Level5Value selected=data.system.level localize=false}}
					</select>
					<span class="floating-label">{{localize "wod.labels.power.level"}}</span>
				</div>	

				<div class="infobox bioInformationArea floating-label-group">
					<input class="sheet-infoValues editable" name="system.reference" type="text" value="{{data.system.reference}}" data-dtype="String" autocomplete="off" autofocus required />
					<span class="floating-label">{{localize "wod.labels.trait.reference"}}</span>
				</div>

				{{#if (eqAny data.system.type "wod.types.periapt" "wod.types.matrix")}}
					<div class="clearareaBox">
						<div class="headlineItem headlineBio splatFont">{{localize "wod.advantages.quintessence"}}</div>
					</div>
			
					<div class="infobox clearareaBox">
						<div class="pullLeft" style="margin-right: 10px;">
							<div class="infobox bioInformationArea floating-label-group">
								<input class="sheet-infoValues smallbox editable" name="system.container.value" type="text" value="{{data.system.container.value}}" data-dtype="Number" autocomplete="off" autofocus required />
								<span class="floating-label">{{localize "wod.labels.value"}}</span>
							</div>
						</div>

						<div class="pullLeft">
							<div class="infobox bioInformationArea floating-label-group">
								<input class="sheet-infoValues smallbox editable" name="system.container.max" type="text" value="{{data.system.container.max}}" data-dtype="Number" autocomplete="off" autofocus required />
								<span class="floating-label">{{localize "wod.labels.maxvalue"}}</span>
							</div>
						</div>
					</div>
				{{/if}}

			</div>

			{{#if (eqAnyNot data.system.type "wod.types.periapt" "wod.types.matrix")}}
				<div class="dialog-area">

					<div class="infobox">
						<label class="headlineItem headlineBio splatFont" for="data.isrollable">{{localize "wod.labels.power.rollable"}}</label>
						<input name="system.isrollable" type="checkbox" {{isChecked data.system.isrollable}} />
					</div>

					{{#if data.system.isrollable}}
						{{> "systems/worldofdarkness/templates/sheets/parts/power_rollable.html"}}
					{{/if}}
				</div>
			{{/if}}

			{{> "systems/worldofdarkness/templates/sheets/parts/item_bonus.html"}}

            <!-- description -->
			<div class="dialog-area">
				<div class="clearareaBox">
					<div class="headlineItem headlineBio splatFont">{{localize "wod.labels.description"}}</div>
				</div>
				<div class="infobox">

					{{#if locked}}
						<div class="headlineNormal textarea">{{{data.system.description}}}</div>					
					{{else}}
						{{editor data.system.description target="system.description" engine="prosemirror" button=false owner=owner editable=true}}
					{{/if}}
				</div>
			</div>

			<!-- system -->
			<div class="dialog-area">
				<div class="clearareaBox">
					<div class="headlineItem headlineBio splatFont">{{localize "wod.labels.power.system"}}</div>
				</div>
				<div class="infobox">

					{{#if locked}}
						<div class="headlineNormal textarea">{{{data.system.details}}}</div>					
					{{else}}
						{{editor data.system.details target="system.details" engine="prosemirror" button=false owner=owner editable=true}}
					{{/if}}
				</div>
			</div>

		</section>

	</div>
</form>