{{#> dotdungeon.panel class="backpack" title="dotdungeon.actor.pc.panel.backpack"}}
	<div class="grid-row">
		<label
			for="{{meta.idp}}-bytes-input"
		>
			{{localize "dotdungeon.actor.pc.backpack.bytes.label"}}
		</label>
		<button
			class="neutral reduced-padding equal-padding"
			data-decrement="system.bytes"
			aria-label="Decrease byte count by one"
		>
			<div aria-hidden="true" class="icon icon--16">
				{{{ icons.minus }}}
			</div>
		</button>
		<input
			id="{{meta.idp}}-bytes-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}}"
		>
		<button
			class="neutral reduced-padding equal-padding"
			data-increment="system.bytes"
			aria-label="Increase byte count by one"
		>
			<div aria-hidden="true" class="icon icon--16">
				{{{ icons.create }}}
			</div>
		</button>
	</div>
	<div class="grid-row">
		<label for="{{meta.idp}}-supplies-input">
			{{localize
				(concat
					"dotdungeon.settings.resourcesOrSupplies.option."
					settings.resourcesOrSupplies
				)
			}}
		</label>
		<button
			class="neutral reduced-padding equal-padding"
			data-decrement="system.supplies"
			aria-label="Decrease supplies count by one"
		>
			<div aria-hidden="true" class="icon icon--16">
				{{{ icons.minus }}}
			</div>
		</button>
		<input
			id="{{meta.idp}}-supplies-input"
			class="supplies-count"
			type="number"
			name="system.supplies"
			value="{{system.supplies}}"
			min="0"
			aria-label="{{localize "dotdungeon.aria.actor.pc.input.supplies"}}"
			aria-valuemin="0"
			aria-valuenow="{{system.supplies}}"
		>
		<button
			class="neutral reduced-padding equal-padding"
			data-increment="system.supplies"
			aria-label="Increase supplies count by one"
		>
			<div aria-hidden="true" class="icon icon--16">
				{{{ icons.create }}}
			</div>
		</button>
	</div>
	<div class="grid-row">
		<label for="{{meta.idp}}-materials-input">
			{{localize "dotdungeon.actor.pc.backpack.materials.label"}}
		</label>
		<button
			class="neutral reduced-padding equal-padding"
			data-decrement="system.materials"
			aria-label="Decrease materials count by one"
		>
			<div aria-hidden="true" class="icon icon--16">
				{{{ icons.minus }}}
			</div>
		</button>
		<input
			id="{{meta.idp}}-materials-input"
			class="materials-count"
			type="number"
			name="system.materials"
			value="{{system.materials}}"
			min="0"
			aria-label="{{localize "dotdungeon.aria.actor.pc.input.materials"}}"
			aria-valuemin="0"
			aria-valuenow="{{system.supplies}}"
		>
		<button
			class="neutral reduced-padding equal-padding"
			data-increment="system.materials"
			aria-label="Increase materials count by one"
		>
			<div aria-hidden="true" class="icon icon--16">
				{{{ icons.create }}}
			</div>
		</button>
	</div>
	<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="item-quantity"
						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}}