{% extends "base" %} {% block head %}
<title>Receipts</title>
<style>
  article {
    text-align: center;
  }

  .receipt-card {
    max-width: 250px;
    margin: 1em;
  }

  .receipt-card > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .receipt-card .vendor {
    font-weight: bold;
    font-size: 115%;
  }

  .receipt-card .date {
    font-size: 75%;
    color: var(--sl-color-neutral-500);
  }

  .receipt-card :link,
  .receipt-card :visited {
    color: var(--sl-color-neutral-900);
    text-decoration: none;
  }
</style>
{% endblock %} {% block main %}
<h1>Receipts</h1>
<p class="table-actions">
  <sl-button variant="primary" size="large" href="/receipts/add"
    ><sl-icon slot="prefix" name="file-earmark-plus"></sl-icon>Add
    Receipt</sl-button
  >
</p>
<article>
  {% for receipt in receipts -%}
  <sl-card class="receipt-card">
    <img
      slot="image"
      src="/receipts/{{ receipt.id }}/view/{{ receipt.filename }}"
      alt="Receipt {{ receipt.id }}"
    />
    <a href="/receipts/{{ receipt.id }}">
      <div class="vendor">{{ receipt.vendor }}</div>
      <div class="amount">$ {{ receipt.amount }}</div>
    </a>
    <div class="date">{{ receipt.date | date(format="%A %_d %B %Y") }}</div>
  </sl-card>
  {% endfor %}
</article>
{% endblock %} {% block scripts %}
<script src="/static/receipt-list.js"></script>
<script>
  (() => {
    document.querySelectorAll(".receipt-card").forEach((e) => {
      const a = e.querySelector("a");
      if (a && a.href) {
        e.style.cursor = "pointer";
        e.addEventListener("click", () => {
          window.location.href = a.href;
        });
      }
    });
  })();
</script>
{% endblock %}