{% from "components/big-number.html" import big_number %}

<div class='grid-row grid-gap ajax-block-container'>
  <div class='grid-col-12'>

    <table class="usa-table usa-table--borderless margin-top-1 margin-bottom-5">
      <caption class="usa-sr-only">
        Daily
      </caption>
      <thead>
        <tr>
          <th scope="col">Usage</th>
          <th scope="col">Remaining</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>{{ big_number(40000 - sms_allowance_remaining, smaller=True) }}</td>
          <td>
            {% if sms_cost %}
            {{ big_number(
              sms_cost,
              'spent on text messages',
              currency="$",
              smaller=True
            ) }}
            {% else %}
              {{ big_number(sms_allowance_remaining, smaller=True) }}
            {% endif %}
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>