{{#> 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}}
					{{#if spell.system.cost }}
						(Cost: {{spell.system.cost}})
					{{/if}}
				</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"></label>
					<textarea
						id="{{spell.uuid}}-description"
						data-embedded-update="system.description"
						data-embedded-id="{{spell.uuid}}"
					>{{spell.system.description}}</textarea>
				</div>
			</div>
		</details>
	{{else}}
		<p>
			You have no spells yet!
		</p>
	{{/each}}


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