<ul class="rings">
    <li id="air">
        <label class="air {{#ifCond 'air' '==' data.system.stance}}stance-active{{/ifCond}}">
            <div class="ring-circle">
                <i class="i_air dice-picker rollable" data-ring="air"></i>
                <input class="centered-input select-on-focus" type="number" name="system.rings.air" value="{{data.system.rings.air}}" data-dtype="Number" min="1" max="9" placeholder="0" {{^if data.editable_not_soft_locked}}disabled{{/if}}/>
            </div>
            <strong class="ring-set-default {{#ifCond 'air' '==' data.system.default_ring}}default-ring{{/ifCond}}" data-ring="air" title="{{localize 'chiaroscuro.character.default_ring'}}">{{localizeRing 'air'}}</strong>
            <span class="ring-type solaire">☀ Solaire</span>
        </label>
    </li>
    <li id="water">
        <label class="water {{#ifCond 'water' '==' data.system.stance}}stance-active{{/ifCond}}">
            <div class="ring-circle">
                <i class="i_water dice-picker rollable" data-ring="water"></i>
                <input class="centered-input select-on-focus" type="number" name="system.rings.water" value="{{data.system.rings.water}}" data-dtype="Number" min="1" max="9" placeholder="0" {{^if data.editable_not_soft_locked}}disabled{{/if}}/>
            </div>
            <strong class="ring-set-default {{#ifCond 'water' '==' data.system.default_ring}}default-ring{{/ifCond}}" data-ring="water" title="{{localize 'chiaroscuro.character.default_ring'}}">{{localizeRing 'water'}}</strong>
            <span class="ring-type lunaire">☽ Lunaire</span>
        </label>
    </li>
    <li id="fire">
        <label class="fire {{#ifCond 'fire' '==' data.system.stance}}stance-active{{/ifCond}}">
            <div class="ring-circle">
                <i class="i_fire dice-picker rollable" data-ring="fire"></i>
                <input class="centered-input select-on-focus" type="number" name="system.rings.fire" value="{{data.system.rings.fire}}" data-dtype="Number" min="1" max="9" placeholder="0" {{^if data.editable_not_soft_locked}}disabled{{/if}}/>
            </div>
            <strong class="ring-set-default {{#ifCond 'fire' '==' data.system.default_ring}}default-ring{{/ifCond}}" data-ring="fire" title="{{localize 'chiaroscuro.character.default_ring'}}">{{localizeRing 'fire'}}</strong>
            <span class="ring-type solaire">☀ Solaire</span>
        </label>
    </li>
    <li id="earth">
        <label class="earth {{#ifCond 'earth' '==' data.system.stance}}stance-active{{/ifCond}}">
            <div class="ring-circle">
                <i class="i_earth dice-picker rollable" data-ring="earth"></i>
                <input class="centered-input select-on-focus" type="number" name="system.rings.earth" value="{{data.system.rings.earth}}" data-dtype="Number" min="1" max="9" placeholder="0" {{^if data.editable_not_soft_locked}}disabled{{/if}}/>
            </div>
            <strong class="ring-set-default {{#ifCond 'earth' '==' data.system.default_ring}}default-ring{{/ifCond}}" data-ring="earth" title="{{localize 'chiaroscuro.character.default_ring'}}">{{localizeRing 'earth'}}</strong>
            <span class="ring-type lunaire">☽ Lunaire</span>
        </label>
    </li>
    <li id="void">
        <label class="void {{#ifCond 'void' '==' data.system.stance}}stance-active{{/ifCond}}">
            <div class="ring-circle">
                <i class="i_void dice-picker rollable" data-ring="void"></i>
                <input class="centered-input select-on-focus" type="number" name="system.rings.void" value="{{data.system.rings.void}}" data-dtype="Number" min="1" max="9" placeholder="0" {{^if data.editable_not_soft_locked}}disabled{{/if}}/>
            </div>
            <strong class="ring-set-default {{#ifCond 'void' '==' data.system.default_ring}}default-ring{{/ifCond}}" data-ring="void" title="{{localize 'chiaroscuro.character.default_ring'}}">{{localizeRing 'void'}}</strong>
        </label>
    </li>
</ul>