{{#> dotdungeon.panel class="backpack" title="dotdungeon.actor.pc.panel.backpack"}}
	<label class="row">
		<span class="grow">
			{{localize "dotdungeon.actor.pc.backpack.bytes.label"}}
		</span>
		<input
			class="bytes-input"
			type="number"
			name="system.bytes"
			value="{{system.bytes}}"
			min="0"
			aria-label="{{localize "dotdungeon.aria.actor.pc.input.bytes"}}"
			aria-valuemin="0"
			aria-valuenow="{{system.bytes}}"
		>
	</label>
	<label class="row">
		<span class="grow">
			{{localize
				(concat
					"dotdungeon.settings.resourcesOrSupplies.option."
					settings.resourcesOrSupplies
				)
			}}
			{{#if settings.devMode}}
				<span class="debug-data">
					({{settings.resourcesOrSupplies}})
				</span>
			{{/if}}
		</span>
		<input
			class="supplies-count"
			type="number"
			name="system.supplies"
			value="{{system.supplies}}"
			min="0"
			max="5"
			aria-label="{{localize "dotdungeon.aria.actor.pc.input.supplies"}}"
			aria-valuemin="0"
			aria-valuemax="5"
			aria-valuenow="{{system.supplies}}"
		>
	</label>
	<label class="row">
		<span class="grow">
			{{localize "dotdungeon.actor.pc.backpack.materials.label"}}
		</span>
		<input
			class="materials-count"
			type="number"
			name="system.materials"
			value="{{system.materials}}"
			min="0"
			max="5"
			aria-label="{{localize "dotdungeon.aria.actor.pc.input.materials"}}"
			aria-valuemin="0"
			aria-valuemax="5"
			aria-valuenow="{{system.supplies}}"
		>
	</label>
	<hr>
	{{#each items.untyped as | item |}}
		<details {{dd-expanded ../meta.expanded item.uuid}}>
			<summary data-collapse-id="{{item.uuid}}">
				{{item.name}} (x {{item.system.quantity}})
			</summary>
			<div class="item">
				{{#if (defined item.system.buy)}}
					<div>Cost: {{item.system.buy}}</div>
				{{/if}}
				<label class="row">
					<span class="grow">Quantity</span>
					<input
						type="number"
						class="bytes-input"
						value="{{item.system.quantity}}"
						data-embedded-update="system.quantity"
						data-embedded-update-on="blur"
						data-embedded-id="{{item.uuid}}"
					>
				</label>
				{{#if item.system.description}}
					<p>{{item.system.description}}</p>
				{{else}}
					<p style="opacity: 75;%">
						This item hasn't been described yet
					</p>
				{{/if}}
				<div class="actions">
					<button
						type="button"
						class="confirm"
						data-embedded-edit="{{item.uuid}}"
					>
						Edit
					</button>
					<button
						type="button"
						class="neutral equal-padding"
						data-message-type="Untyped"
						data-message-content="{{item.system.description}}"
						data-embedded-id="{{item.uuid}}"
					>
						<div aria-hidden="true" class="icon icon--20">
							{{{ ../icons.chat-bubble }}}
						</div>
					</button>
					<button
						type="button"
						class="danger equal-padding"
						data-embedded-delete
						data-embedded-id="{{item.uuid}}"
					>
						<div aria-hidden="true" class="icon icon--20">
							{{{ ../icons.garbage-bin }}}
						</div>
					</button>
				</div>
			</div>
		</details>
	{{/each}}
	<button
		type="button"
		class="confirm"
		data-embedded-create="Untyped"
	>
		<div aria-hidden="true" class="icon icon--20">
			{{{ icons.create }}}
		</div>
		Add Item
	</button>
{{/ dotdungeon.panel}}