{{#each listItems as |spell id|}}
<li class="spell flexrow draggable" data-entry-compendium="{{spell.compendium}}" data-entry-id="{{id}}">
	<div class="item-image">
		<img
			class=""
			data-src="{{spell.img}}"
			data-tooltip="{{spell.name}}"
			data-tooltip-direction="UP"
			width="32"
			height="32"
		/>
	</div>
	<div class="item-name">
		<span class="item-edit"
			><a data-tooltip="({{spell.compendium}})" data-tooltip-direction="UP">{{spell.name}}</a></span
		>
	</div>
	<div class="spell-tags">
		<span data-tooltip="Spell level" data-tooltip-direction="UP"
			>{{#if spell.data.level}}{{spell.data.level}}{{else}}C{{/if}}</span
		>
		<div class="spacer-large"></div>
		<span
			class="{{#unless spell.data.components.ritual}}negative{{/unless}}"
			data-tooltip="{{localize 'DND5E.Ritual'}}"
			data-tooltip-direction="UP"
			>R</span
		>
		<span
			class="{{#unless spell.data.components.concentration}}negative{{/unless}}"
			data-tooltip="{{localize 'DND5E.Concentration'}}"
			data-tooltip-direction="UP"
			>C</span
		>
		<div class="spacer"></div>
		<span
			class="{{#unless spell.data.components.vocal}}negative{{/unless}}"
			data-tooltip="{{localize 'DND5E.ComponentVerbal'}}"
			data-tooltip-direction="UP"
			>V</span
		>
		<span
			class="{{#unless spell.data.components.somatic}}negative{{/unless}}"
			data-tooltip="{{localize 'DND5E.ComponentSomatic'}}"
			data-tooltip-direction="UP"
			>S</span
		>
		<span
			class="{{#unless spell.data.components.material}}negative{{/unless}}"
			data-tooltip="{{localize 'DND5E.ComponentMaterial'}}"
			data-tooltip-direction="UP"
			>M</span
		>
	</div>
	<div class="filter-tags">
		<input type="hidden" name="level" value="{{spell.data.level}}" />
	</div>
</li>
{{/each}}