{#- The grid itself. Served alone when the address carries partial=1. -#}
{% macro state_fields() %}{% for k, v in state.params() %}<input type="hidden" name="{{ k }}" value="{{ v }}">{% endfor %}{% endmacro %}
{% set headers = [("id", "Bill"), ("arrived", "Arrived"), ("customer", "Customer"),
                  ("service", "Service"), ("outlet", "Outlet"), ("unit", "Units"),
                  ("payment", "Charged"), ("status", "Status")] %}
<div id="grid" class="grid">
  {% if message %}<p class="msg {{ message[0] }}" role="status">{{ message[1] }}</p>{% endif %}
  {% if keyset %}
  <p class="summary">Newest first, {{ rows|length }} bills after the last one you saw (keyset paging).</p>
  {% elif total %}
  <p class="summary">Showing {{ (state.page - 1) * state.size + 1 }}&ndash;{{ [state.page * state.size, total]|min }}
    of {{ "{:,}".format(total) }} bills &middot; page {{ state.page }} of {{ pages }}</p>
  {% else %}
  <p class="summary">No bill matches these filters.</p>
  {% endif %}
  <table class="bills">
    <thead>
      <tr>
        {% for key, label in headers %}
        <th><a data-grid href="{{ state.sort_href(key) }}">{{ label }}</a>
          {%- if key == state.sort %} {{ "&#9650;"|safe if state.dir == "asc" else "&#9660;"|safe }}{% endif %}</th>
        {% endfor %}
        <th>Paid</th>
        <th>Actions</th>
      </tr>
    </thead>
    <tbody>
    {% for r in rows %}
      {% if r.id == edit and r.status in next_status %}
      <tr class="editing" data-id="{{ r.id }}">
        <td>{{ r.id }}</td><td>{{ r.arrived[:16] }}</td><td>{{ r.customer }}</td><td>{{ r.service }}</td>
        <td>{{ r.outlet|replace("Profitina Laundry ", "") }}</td><td class="num">{{ r.unit }}</td>
        <td class="num">{{ r.payment|rupiah }}</td>
        <td>
          <form method="post" action="/bills/status">
            {{ state_fields() }}
            <input type="hidden" name="id" value="{{ r.id }}">
            <input type="hidden" name="from" value="{{ r.status }}">
            <select name="to" aria-label="New status">
              <option value="{{ next_status[r.status] }}">{{ next_status[r.status] }}</option>
            </select>
            <button type="submit">Update</button>
          </form>
        </td>
        <td class="num">{{ r.paid|rupiah }}</td>
        <td class="actions"><a data-grid href="{{ state.href() }}">Cancel</a></td>
      </tr>
      {% elif r.id == confirm and r.status == "queued" and r.paid == 0 %}
      <tr class="confirming" data-id="{{ r.id }}">
        <td>{{ r.id }}</td><td>{{ r.arrived[:16] }}</td><td>{{ r.customer }}</td><td>{{ r.service }}</td>
        <td>{{ r.outlet|replace("Profitina Laundry ", "") }}</td><td class="num">{{ r.unit }}</td>
        <td class="num">{{ r.payment|rupiah }}</td>
        <td><span class="status {{ r.status }}">{{ r.status }}</span></td>
        <td class="num">{{ r.paid|rupiah }}</td>
        <td class="actions">
          <form method="post" action="/bills/delete">
            {{ state_fields() }}
            <input type="hidden" name="id" value="{{ r.id }}">
            Delete for good? <button class="danger" type="submit">Delete {{ r.id }}</button>
            <a data-grid href="{{ state.href() }}">Keep</a>
          </form>
        </td>
      </tr>
      {% else %}
      <tr data-id="{{ r.id }}">
        <td>{{ r.id }}</td><td>{{ r.arrived[:16] }}</td><td>{{ r.customer }}</td><td>{{ r.service }}</td>
        <td>{{ r.outlet|replace("Profitina Laundry ", "") }}</td><td class="num">{{ r.unit }}</td>
        <td class="num">{{ r.payment|rupiah }}</td>
        <td><span class="status {{ r.status }}">{{ r.status }}</span></td>
        <td class="num">{{ r.paid|rupiah }}</td>
        <td class="actions">
          {% if r.status in next_status %}<a data-grid href="{{ state.href(extra=[('edit', r.id)]) }}">Edit</a>{% endif %}
          {% if r.status == "queued" and r.paid == 0 %}<a class="danger" data-grid data-delete="{{ r.id }}"
             href="{{ state.href(extra=[('delete', r.id)]) }}">Delete</a>{% endif %}
        </td>
      </tr>
      {% endif %}
    {% endfor %}
    </tbody>
    {% if not keyset %}
    <tfoot>
      <tr><td colspan="6">Total charged, all {{ "{:,}".format(total) }} matching bills</td>
          <td class="num">{{ charged|rupiah }}</td><td colspan="3"></td></tr>
    </tfoot>
    {% endif %}
  </table>
  {% if keyset %}
  <nav class="pager" aria-label="Pages">
    <a data-grid href="{{ state.href(page=1) }}">Newest</a>
    {% if rows|length == state.size %}{% set last = rows[-1] %}
    <a data-grid href="{{ state.href(page=1, extra=[('after', last.arrived ~ '|' ~ last.id)]) }}">Older &rarr;</a>
    {% endif %}
  </nav>
  {% elif pages > 1 %}
  <nav class="pager" aria-label="Pages">
    {% if state.page > 1 %}
    <a data-grid href="{{ state.href(page=1) }}">&laquo; First</a>
    <a data-grid href="{{ state.href(page=state.page - 1) }}">&lsaquo; Prev</a>
    {% endif %}
    {% for n in range([1, state.page - 2]|max, [pages, state.page + 2]|min + 1) %}
      {% if n == state.page %}<span class="current">{{ n }}</span>
      {% else %}<a data-grid href="{{ state.href(page=n) }}">{{ n }}</a>{% endif %}
    {% endfor %}
    {% if state.page < pages %}
    <a data-grid href="{{ state.href(page=state.page + 1) }}">Next &rsaquo;</a>
    <a data-grid href="{{ state.href(page=pages) }}">Last &raquo;</a>
    {% endif %}
  </nav>
  {% endif %}
  <p class="export"><a href="{{ state.href('/bills.csv', page=1) }}">Download all matching bills as CSV</a></p>
</div>