<div class="aspects-section">
    <div class="aspect-fields">
        <label class="attribute-label">
            {{localize 'chiaroscuro.aspects.solar'}}
            <input type="number" name="system.aspects.aspects.solar" value="{{data.system.aspects.aspects.solar}}" class="select-on-focus" data-dtype="Number" min="0" max="100" {{^if data.editable_not_soft_locked}}disabled{{/if}}/>
        </label>
        <label class="attribute-label">
            {{localize 'chiaroscuro.aspects.lunar'}}
            <input type="number" name="system.aspects.aspects.lunar" value="{{data.system.aspects.aspects.lunar}}" class="select-on-focus" data-dtype="Number" min="0" max="100" {{^if data.editable_not_soft_locked}}disabled{{/if}}/>
        </label>
        <label class="attribute-label">
            {{localize 'chiaroscuro.aspects.gauge'}}
            <input type="number" name="system.aspects.aspects.gauge" value="{{data.system.aspects.aspects.gauge}}" class="select-on-focus" data-dtype="Number" min="-10" max="10" {{^if data.editable_not_soft_locked}}disabled{{/if}}/>
        </label>
        <div class="gauge-bar-wrapper">
            <div class="gauge-bar" style="width: {{data.aspectsData.gaugePercent}}%; background-color: {{data.aspectsData.gaugeColor}};"></div>
        </div>
    </div>
</div>
