<section class="ability-scores optional-ability-{{ abilityRows.optional }}">
    <div class="rows">
        <div class="top">
            {{#each abilityRows.top}}
                {{> ".ability-score" flipped=true }}
            {{/each}}
        </div>
        <div class="bottom">
            {{#each abilityRows.bottom}}
                {{> ".ability-score" }}
            {{/each}}
        </div>
    </div>
</section>

{{#*inline ".ability-score"}}
    <div class="ability-score {{~#if flipped}} flipped{{/if}}" data-ability="{{ key }}">
        <a class="label {{ @root.rollableClass }} ability-check" data-action="roll" data-type="ability">{{ abbr }}</a>
        <div class="mod">
            {{#if @root.editable}}
            <button type="button" class="config-button unbutton" data-action="showConfiguration" data-config="ability"
                    data-tooltip="{{ localize 'DND5E.AbilityConfigure' ability=label }}"
                    aria-label="{{ localize 'DND5E.AbilityConfigure' ability=label }}">
                <i class="fas fa-cog" inert></i>
            </button>
            {{else}}
            {{ dnd5e-formatModifier mod }}
            {{/if}}
        </div>
        <div class="score">
            {{#if @root.editable}}
            <input type="text" name="system.abilities.{{ key }}.value" value="{{ source.value }}" placeholder="10"
                   data-dtype="Number" class="uninput">
            {{else}}
            {{ value }}
            {{/if}}
        </div>
    </div>
{{/inline}}
