<div class="clearareaBox area-box">

	<div class="sheet-headline sheet-banner splatFont">
		<span class="sheet-banner-text">{{localize 'wod.spheres.spheres'}}</span>
	</div>

	<div class="">
		{{#each data.system.spheres as |sphere key|}}

			{{#if (topSpheres key)}}<div class="magic-statArea pullLeft">{{/if}}

			<div class="clearareaBox {{#if (eq sphere.label ../data.system.affinity)}}highlightedPowerRow{{/if}}" style="line-height: 23px;">
				<label class="{{#if (lt sphere.max 6)}}pullLeft{{/if}} spheres-headlineWidth headlineNormalSpheres splatFont" for="data.system.spheres.{{key}}.value"  
					{{#if (eq sphere.label ../data.system.affinity)}}title="{{localize 'wod.bio.mage.affinitysphere'}}"{{/if}}>{{localize sphere.label}}</label>

				<div class="resource-value" 
					data-value="{{sphere.value}}"
					data-name="data.system.spheres.{{key}}.value">

					{{#numLoop sphere.max}}					
						<span class="resource-value-step sphere-resource-values {{#if (gt sphere.max 5)}}supernaturalAttribute{{/if}}" data-type="{{../../config.sheettype.mage}}" data-index="{{this}}"></span>					
					{{/numLoop}}

					{{#if (eq ../locked false)}}
						<div class="pullRight speciality-magic-icon {{#if (and (eq sphere.speciality '') (gte sphere.value 4))}}item-warning{{/if}}{{#if (and (ne sphere.speciality '') (gte sphere.value 4))}}item-notice{{/if}}">
							<a class="item-edit" title="{{localize 'wod.labels.edit.sphere'}}" data-type="Sphere" data-item-id="{{key}}"><i class="fa-solid fa-pen-to-square"></i></a>
						</div>
					{{else}}
						{{#if (gte sphere.value 4)}}
							<div class="pullRight speciality-magic-icon">
								<i class="fa-solid fa-circle-exclamation {{#if (eq sphere.speciality '')}}item-warning{{else}}item-notice{{/if}}" title="{{sphere.speciality}}"></i>
							</div>
						{{else}}
							<div class="pullRight speciality-magic-empty-icon">
								&nbsp;
							</div>
						{{/if}}
					{{/if}}
					
				</div>
			</div>	

			{{#if (bottenSpheres key)}}</div>{{/if}}
		
		{{/each}}	
	</div> 

</div>	