<div class="section">
	<div class="section-head">
		<h2 class="section-title">{{ localize 'shadowrun6.section.spells.title' }}</h2>
		<a class="item-control spell-create" title="{{localize 'shadowrun6.section.spells.add' }}">
			<h2 class="fas fa-plus"></h2>
		</a>
	</div>
	<table>
	    <thead>
	      <tr>
	        <th></th>
	        <th style="text-align:left">{{ localize 'shadowrun6.label.column.name' }}</th>
	        <th>{{ localize 'shadowrun6.section.spells.column.range' }}</th>
	        <th style="width: 1em"></th>
			<th>{{ localize 'shadowrun6.section.spells.column.sustained' }}</th>
	        <th>{{ localize 'shadowrun6.section.spells.column.drain' }}</th>
	        <th colspan="2">{{ localize 'shadowrun6.label.column.action' }}</th>
	      </tr>
	    </thead>
		{{#each actor.items as |item id|}}
		{{#iff item.type '==' 'spell'}}
		<tr class="item list-item draggable" data-item-id="{{item.id}}" data-uuid="{{item.uuid}}">
      		<td style="width:1rem"><button type="button" name="collapseSpell{{id}}" class="collapsible closed" data-item-id="{{this.id}}">+</button></td>
			<td> {{item.name}}</td>
			<td class="centered" style="width: 3em"> {{localize (concat (concat "shadowrun6.spell.range_" item.system.range) "_short")}}</td>
			<td class="centered" style="width: 1em">
				{{#if item.system.alchemic}}
				<i class="fas fa-flask"></i>
				{{/if}}
			</td>
			<td class="centered">
				{{#iff item.system.duration '==' 'sustained'}}
				<label class="switch" title='{{localize "shadowrun6.section.sustained.toggle"}}'>
					<input name="spellSustained{{id}}" type="checkbox" data-item-id="{{this.id}}" data-check="system.isSustained" {{checked item.system.isSustained}} type="checkbox" data-dtype="Boolean"/>
						<span class="shadowrun6-slider round"></span>
				</label>
				{{/iff}}
			</td>
			<td class="centered" style="width: 3em">{{item.system.drain}}</td>
			<td class="centered" style="width: 4em">
				<a class="item-control spell-roll" data-type="Roll" data-uuid="{{item.uuid}}" data-item-id="{{item.id}}" title="Roll"><i class="fas fa-dice-six"></i></a>
				<a class="item-control item-edit"   title='{{localize 'shadowrun6.label.edit' }}'><i class="fas fa-edit"></i></a>
				<a class="item-control item-delete" title='{{localize 'shadowrun6.label.delete' }}'><i class="fas fa-trash"></i></a></td>
	   </tr>
       <tr>
         <td colspan="7">
			<div class="collapsible-content closed" style="font-size: 0.8em;">
				<div style="font-weight: bold;">{{ localize 'shadowrun6.item.description' }}</div>
				<div>{{{item.enriched.description}}}</div>
			</div>
         </td>
       </tr>
		{{/iff}}
		{{/each}}
	</table>
</div>