<xf:css src="siropu_donations.less" />
<xf:foreach loop="$goals" value="$goal">
<xf:set var="$progressPercent" value="{$goal.getProgressPercent()}" />
<div style="display: flex;">
<xf:button href="{{ link('donations/donate', null, {'donation_goal_id': $goal.donation_goal_id}) }}" class="button--cta siropuDonations-donateButton" style="padding: 5px;font-size: inherit;" overlay="true" fa="fas fa-donate">{{ phrase('siropu_donations_donate') }}</xf:button>
<div class="siropuDonations-progressBar" style="flex: 1;">
<div class="siropuDonations-progressBar--bar" style="width: {$progressPercent}%; "></div>
<div class="siropuDonations-progressBar--progress" style="width: {$progressPercent}%;">{$progressPercent}%</div>
</div>
</div>
</xf:foreach>