<div class="section" style="display: inline-block; width:100%; min-width: 350px;">
 <div class="section-head">
	<h2 class="section-title">{{ localize 'shadowrun6.section.qualities' }}</h2>
	<a class="item-control quality-create" title="{{localize 'shadowrun6.section.qualities_add' }}">
		<h2 class="fas fa-plus"></h2>
	</a>
</div>
<table class="item-list">
		{{#each actor.items as |item id|}}
		{{#iff item.type '==' 'quality'}}
		<tr class="item list-item draggable" data-item-id="{{item.id}}" data-uuid="{{item.uuid}}">
			<td style="margin-right: 1rem; width: 0.7em;">
				{{#if item.system.description }}
				<button type="button" name="collapseGear{{id}}" class="collapsible closed" data-item-id="{{this.id}}">+</button>
				{{else}}
				<button type="button" name="collapseGear{{id}}" class="collapsible closed empty" data-item-id="{{this.id}}">+</button>
				{{/if}}
			</td>
			<td style="height:20px;"> {{item.name}}</td>
			<td class="centered" style="width: 40px;">
				<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="3">
				<div class="collapsible-content closed" style="font-size: 0.8em;">
					<div style="font-weight: bold;">{{ localize 'shadowrun6.qualityedit.explain' }}</div>
					<div>{{{item.system.explain}}} &nbsp;</div>
					<div style="font-weight: bold;">{{ localize 'shadowrun6.item.description' }}</div>
					<div>{{{item.enriched.description}}}</div>
				</div>
			</td>
       	</tr>
		{{/iff}}
		{{/each}}
</table>
</div>