{% extends "layout.html" %}
{% block title %}Billing Limits{% endblock %}
{% block content %}
<h1 class="text-2xl font-light mb-4 ">Billing Projects Limits</h1>
<table class='table-fixed overflow-hidden rounded'>
  <thead>
    <th class='h-16 bg-slate-200 font-normal pl-2 text-left rounded-tl'>Billing Project</th>
    <th class='h-16 bg-slate-200 font-normal text-left'>Accrued Cost</th>
    <th class='h-16 bg-slate-200 font-normal text-left'>Limit</th>
  </thead>
  <tbody>
    {% for row in open_billing_projects %}
    <tr class='border border-collapse hover:bg-slate-100'>
      <td class='py-2 pl-2'>{{ row['billing_project'] }}</td>
      <td class='py-2'>{{ row['accrued_cost'] }}</td>
      <td class='py-2 pr-2'>{{ row['limit'] }}</td>
    </tr>
    {% endfor %}
    <tr class='border border-collapse bg-slate-200'>
      <td colSpan=3 class='p-2 text-lg text-light'>Closed projects</td>
    </tr>
    {% for row in closed_billing_projects %}
    <tr class='border border-collapse bg-slate-50 font-light hover:bg-slate-100'>
      <td class='py-2 pl-2'>{{ row['billing_project'] }}</td>
      <td class='py-2'>{{ row['accrued_cost'] }}</td>
      <td class='py-2 pr-2'>{{ row['limit'] }}</td>
    </tr>
    {% endfor %}
  </tbody>
</table>
{% endblock %}