{{#> 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 (defined spell.system.usage_cost)}}
						{{localize "dotdungeon.actor.pc.spells.title.cost" cost=spell.system.usage_cost}}
					{{/if}}
				</span>
			</summary>


			<div class="spell">
				<div class="spell__description">
					{{localize "dotdungeon.actor.pc.spells.description.label"}}
					<p class="{{ifThen spell.system.description '' 'placeholder'}}">
						{{#if spell.system.description}}
							{{spell.system.description}}
						{{else}}
							{{localize "dotdungeon.actor.pc.spells.description.placeholder"}}
						{{/if}}
					</p>
				</div>
				{{#if spell.system.skill}}
					<div class="spell__skill">
						{{localize
							"dotdungeon.actor.pc.spells.skill.label"
							skill=(localize (concat "dotdungeon.keyword.skill." spell.system.skill))
						}}
					</div>
				{{/if}}
				<div class="actions">
					<button
						type="button"
						class="confirm"
						data-embedded-edit="{{spell.uuid}}"
					>
						{{localize "dotdungeon.actor.pc.spells.edit"}}
					</button>
					<button
						type="button"
						class="neutral equal-padding"
						aria-label="{{localize "dotdungeon.actor.pc.spells.aria.chat"}}"
						data-message-type="Spell"
						data-message-flavor="{{spell.name}} {{localize "dotdungeon.actor.pc.spells.title.cost" cost=spell.system.usage_cost}}"
						data-message-content="{{spell.system.description}}"
						data-embedded-id="{{spell.uuid}}"
					>
						<div aria-hidden="true" class="icon icon--20">
							{{{ ../icons.chat-bubble }}}
						</div>
					</button>
					<button
						type="button"
						class="danger equal-padding"
						aria-label="{{localize "dotdungeon.actor.pc.spells.aria.delete"}}"
						data-embedded-delete
						data-embedded-id="{{spell.uuid}}"
					>
						<div aria-hidden="true" class="icon icon--20">
							{{{ ../icons.garbage-bin }}}
						</div>
					</button>
				</div>
			</div>
		</details>
	{{else}}
		<p>
			{{localize "dotdungeon.actor.pc.spells.empty"}}
		</p>
	{{/each}}


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