{{#if supernaturals.length}}
<ol class="item-list cde-supernatural-list">
  {{#each supernaturals as |item|}}
  <li class="item cde-supernatural-item" data-item-id="{{item._id}}">
    <div class="cde-supernatural-header flexrow">
      <img src="{{item.img}}" title="{{item.name}}" width="28" height="28" />
      <div class="cde-supernatural-info">
        <span class="cde-supernatural-name">{{item.name}}</span>
        {{#if item.system.activation}}
        <span class="cde-act-badge cde-act--{{item.system.activation}}" title="{{ getActivationLabel item.system.activation }}">{{ getActivationLabel item.system.activation }}</span>
        {{/if}}
      </div>
      <div class="item-controls">
        <a class="item-control" title="{{ localize 'CDE.SupernaturalEdit' }}" data-action="edit"><i class="fas fa-edit"></i></a>
        <a class="item-control" title="{{ localize 'CDE.SupernaturalDelete' }}" data-action="delete"><i class="fas fa-trash"></i></a>
      </div>
    </div>
    {{#if item.system.description}}
    <div class="cde-supernatural-desc">{{{item.system.description}}}</div>
    {{/if}}
  </li>
  {{/each}}
</ol>
{{else}}
<p class="cde-empty-list">{{ localize "CDE.NoSupernaturals" }}</p>
{{/if}}
<p>
  <a class="item-control" title="{{ localize 'CDE.SupernaturalCreate' }}" data-action="create" data-type="supernatural"><i class="fas fa-plus"></i> {{ localize "CDE.SupernaturalCreate" }}</a>
</p>