{{#if (or @root.editable values)}}
<div class="pills-group {{#unless values}}empty{{/unless}}">
    <h3 class="icon">
        {{#if icon}}<i class="{{ icon }}"></i>
        {{~else if svg}}<dnd5e-icon src="systems/dnd5e/icons/svg/{{ svg }}.svg"></dnd5e-icon>{{/if}}
        <span class="roboto-upper">{{ localize label }}</span>
        {{#if @root.editable}}
        <a {{#if configAction}}class="config-button" data-action="{{ configAction }}"
           {{else}}class="trait-selector" data-trait="{{ key }}"{{/if}}
           data-tooltip="{{ localize "DND5E.TraitConfig" trait=(localize label) }}"
           aria-label="{{ localize "DND5E.TraitConfig" trait=(localize label) }}">
            <i class="fas fa-cog"></i>
        </a>
        {{/if}}
    </h3>
    <ul class="pills">
        {{#each values}}
        <li class="pill {{ ../color }} {{ color }}">
            {{#each icons}}
            <i class="{{ icon }}" data-tooltip="{{ label }}" aria-label="{{ label }}"></i>
            {{/each}}
            <span class="label">{{ label }}</span>
            {{#if value}}
            <span class="separator">&vert;</span>
            <span class="value">{{ value }}</span>
            {{/if}}
        </li>
        {{/each}}
    </ul>
</div>
{{/if}}
