{{#> dotdungeon.panel class="pets" title="dotdungeon.actor.pc.panel.pets"}}
	{{#each items.pet as | pet |}}
		<details {{dd-expanded ../meta.expanded pet.uuid}}>
			<summary data-collapse-id="{{pet.uuid}}">
				{{ pet.name }}
				{{#if (defined pet.system.upkeep)}}
					<span>
						{{localize "dotdungeon.actor.pets.upkeep" upkeep=(pet.system.upkeep)}}
					</span>
				{{/if}}
			</summary>

			<div class="pet">
				{{#if pet.system.description}}
					<p class="pet_description">
						{{pet.system.description}}
					</p>
				{{/if}}
				<div class="actions">
					<button
						type="button"
						class="confirm equal-padding"
						data-embedded-edit="{{pet.uuid}}"
					>
						Edit
					</button>
					<!--
					<button
						type="button"
						class="neutral equal-padding"
						data-embedded-chat
						data-embedded-id="{{pet.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.pets.aria.delete"}}"
						data-embedded-delete
						data-embedded-id="{{pet.uuid}}"
					>
						<div aria-hidden="true" class="icon icon--20">
							{{{ ../icons.garbage-bin }}}
						</div>
					</button>
				</div>
			</div>
		</details>
	{{else}}
		<p>
			You have no pets, add one using the button below or drag one onto your sheet
		</p>
	{{/each}}
	<button
		type="button"
		class="confirm"
		data-embedded-create="Pet"
	>
		<div aria-hidden="true" class="icon icon--20">
			{{{ icons.create }}}
		</div>
		<span>
			{{localize "dotdungeon.actor.pc.pets.add"}}
		</span>
	</button>
{{/ dotdungeon.panel}}