{{#> dotdungeon.panel class="spells" title="dotdungeon.actor.pc.panel.spells"}}
	{{#each items.spell as | spell |}}
		<details {{dd-expanded ../meta.expanded spell.uuid}}>
			<summary data-collapse-id="{{spell.uuid}}">
				<span class="flex-grow" style="flex-grow: 1">
					{{spell.name}}
					{{localize "dotdungeon.actor.pc.spells.title.cost" cost=spell.system.cost}}
				</span>
			</summary>


			<div class="spell">
				<div class="spell__name">
					<label for="{{spell.uuid}}-name">
						{{localize "dotdungeon.actor.pc.spells.name.label"}}
					</label>
					<input
						type="text"
						id="{{spell.uuid}}-name"
						value="{{spell.name}}"
						data-embedded-update="name"
						data-embedded-id="{{spell.uuid}}"
					>
				</div>
				<div class="spell__cost">
					<label for="{{spell.uuid}}-cost">
						{{localize "dotdungeon.actor.pc.spells.cost.label"}}
					</label>
					<input
						type="text"
						id="{{spell.uuid}}-cost"
						value="{{spell.system.cost}}"
						placeholder="{{localize "dotdungeon.actor.pc.spells.cost.placeholder"}}"
						data-embedded-update="system.cost"
						data-embedded-id="{{spell.uuid}}"
					>
				</div>
				<div class="spell__description">
					<label for="{{spell.uuid}}-description">
						{{localize "dotdungeon.actor.pc.spells.description.label"}}
					</label>
					<textarea
						id="{{spell.uuid}}-description"
						placeholder="{{localize "dotdungeon.actor.pc.spells.description.placeholder"}}"
						data-embedded-update="system.description"
						data-embedded-id="{{spell.uuid}}"
					>{{spell.system.description}}</textarea>
				</div>
				<div class="spell__actions">
					<button
						class="neutral reduced-padding equal-padding"
					>
						<div class="icon icon--20">
							{{{ ../icons.chat-bubble }}}
						</div>
					</button>
					<button
						class="danger reduced-padding equal-padding"
						data-embedded-delete
						data-embedded-id="{{spell.uuid}}"
					>
						<div class="icon icon--20">
							{{{ ../icons.garbage-bin }}}
						</div>
					</button>
				</div>
			</div>
			<div class="debug-data">
				{{spell.uuid}}
				{{dd-stringify spell}}
			</div>
		</details>
	{{else}}
		<p>
			{{localize "dotdungeon.actor.pc.spells.empty"}}
		</p>
	{{/each}}


	<div class="flex-row">
		<button
			class="confirm add-spell"
		>
			<div aria-hidden="true" class="icon icon--20">
				{{{ icons.create }}}
			</div>
			<span>
				{{localize "dotdungeon.actor.pc.spells.add.label"}}
			</span>
		</button>
	</div>
{{/ dotdungeon.panel}}