{{#> 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}}
					(Cost: {{spell.system.cost}})
				</span>
			</summary>


			<div class="spell">
				<div class="spell__name">
					<label for="{{spell.uuid}}-name">Name</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">Cost</label>
					<input
						type="text"
						id="{{spell.uuid}}-cost"
						value="{{spell.system.cost}}"
						data-embedded-update="system.cost"
						data-embedded-id="{{spell.uuid}}"
					>
				</div>
				<div class="spell__description">
					<label for="{{spell.uuid}}-description">Description</label>
					<textarea
						id="{{spell.uuid}}-description"
						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"
					>
						<div class="icon icon--20">
							{{{ ../icons.garbage-bin }}}
						</div>
					</button>
				</div>
			</div>
		</details>
	{{else}}
		<p>
			You have no spells yet!
		</p>
	{{/each}}


	<div class="flex-row">
		<button
			class="confirm add-spell"
		>
			Add New Spell
		</button>
	</div>
{{/ dotdungeon.panel}}