<aura:component implements="forceCommunity:availableForAllPageTypes,flexipage:availableForAllPageTypes">

	<!-- Set by Parent Component -->
	<aura:attribute name="numerator" type="Decimal" />
	<aura:attribute name="numeratorLabel" type="String"/>
	<aura:attribute name="denominatorIsSet" type="Boolean" default="true"/>
	<aura:attribute name="denominatorPlaceholder" type="String" default="TBD"/>
	<aura:attribute name="denominator" type="Decimal" />
	<aura:attribute name="denominatorLabel" type="String"/>
	<aura:attribute name="alarm" type="boolean" default="false"/>
	<aura:attribute name="title" type="String" />
	<aura:attribute name="desc" type="String" />

	<!-- set by Controller  -->
	<aura:attribute name="denominatorInt" type="Decimal" />
	<aura:attribute name="percentageTotal" type="Decimal" />

	<aura:method name="updateBar" action="{!c.doUpdateBar}" description="Call when all settable attributes have been set."/>

	<!-- Body -->
	<div>
		<div class="msc-text" style="margin-bottom:1rem;">
			<div class="slds-text-heading_medium">{!v.title}</div>

			<div class="slds-text-body_small">{!v.desc}</div>
		</div>

		<div class="slds-progress-bar" aria-valuemin="0" aria-valuemax="{!v.denominator}" aria-valuenow="{!v.numerator}" role="progressbar">
			<span aura:id="coloredBar" class="slds-progress-bar__value" style="{! 'width: ' + v.percentageTotal + '%;' }">
				<span class="slds-assistive-text">Progress: {!v.numerator}</span>
			</span>
		</div>

		<div class="msc-labeltown">
			<figure aura:id="alarmText" class="msc-lt-item msc-iefix">
				<div class="msc-iefix2">
					<label class="msc-iefix4">{!v.numeratorLabel}</label>
				</div>

				<span class="msc-iefix3">{!v.numerator}</span>
			</figure>

			<figure class="msc-lt-item msc-iefix" style="display:flex;align-items:center;">
				<div class="msc-iefix2">
					<label class="msc-iefix4" >{!v.denominatorLabel}</label>
				</div>

			    <aura:if isTrue="{!v.denominatorIsSet}">
			    	<span class="msc-iefix3">{!v.denominatorInt}</span>
					   <aura:set attribute="else">
			      			<span class="msc-iefix3">{!v.denominatorPlaceholder}</span>
			    		</aura:set>
			  	</aura:if>
			</figure>
		</div>
	</div>

</aura:component>