<span class="total-amount">
  <%= @budget.formatted_heading_price(@heading) %>
</span>

<div class="progress" role="progressbar" tabindex="0"
     id="progress"
     aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-meter"
       style="width:
       <%= progress_bar_width(@budget.heading_price(@heading),
                              @ballot.amount_spent(@heading)) %>">
  </div>
</div>

<div class="progress spent-amount-progress" role="progressbar" tabindex="0"
     aria-valuenow="20" aria-valuemin="0" aria-valuetext="25 percent" aria-valuemax="100">
  <span class="progress-meter spent-amount-meter"
        style="width:
        <%= progress_bar_width(@budget.heading_price(@heading),
                               @ballot.amount_spent(@heading)) %>">
    <p id="amount-spent" class="progress-meter-text spent-amount-text">
      <%= @ballot.formatted_amount_spent(@heading) %>
      <span id="amount-available" class="amount-available">
        <%= t("budgets.progress_bar.available") %>
        <span><%= @ballot.formatted_amount_available(@heading) %></span>
      </span>
    </p>
  </span>
</div>
