{% extends "base" %} {% block head %}
<title>Receipts</title>
<style>
  article {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: stretch;
  }

  .receipt-card {
    max-width: 250px;
    margin: 1em;
    transition: opacity 1s ease;
  }

  .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);
    vertical-align: bottom;
  }

  .receipt-card :link,
  .receipt-card :visited {
    color: var(--sl-color-neutral-900);
    text-decoration: none;
  }

  sl-card.receipt-card::part(base) {
    height: 100%;
  }

  sl-card.receipt-card::part(image) {
    height: 100%;
  }

  sl-card.receipt-card [slot="image"] img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  sl-card.receipt-card::part(body) {
    padding-bottom: calc(var(--padding) / 2);
  }

  sl-card.receipt-card::part(footer) {
    padding: 0 calc(var(--padding) / 2);
  }

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

  #confirm-delete dl {
    display: grid;
    grid-template-columns: max-content max-content;
    gap: var(--sl-spacing-x-small) var(--sl-spacing-medium);
    padding: 1rem;
    margin: 0 0 1.5rem 0;
    width: min-content;
  }
  #confirm-delete dl dt {
    text-align: right;
    font-weight: bold;
  }
  #confirm-delete dl dd {
    margin-left: 0;
  }

  ul.pagination {
    margin: 0;
    padding: 0;
    list-style-type: none;
    text-align: center;
  }

  ul.pagination li {
    display: inline-block;
    margin: 1em;
  }
</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" data-receipt-id="{{ receipt.id }}">
    <a slot="image" href="/receipts/{{ receipt.id }}">
      <img
        src="/receipts/{{ receipt.id }}/thumbnail/{{ receipt.filename }}"
        alt="Receipt {{ receipt.id }}"
      />
    </a>
    <a href="/receipts/{{ receipt.id }}">
      <div class="vendor">{{ receipt.vendor }}</div>
      <div class="amount">$ {{ receipt.amount }}</div>
    </a>
    <footer slot="footer">
      <div
        class="date"
        data-date="{{ receipt.date | date(format='%A %_d %B %Y') }}"
      >
        {{ receipt.date | date(format="%a %_d %b %Y") }}
      </div>
      <sl-icon-button name="trash" label="Delete"></sl-icon-button>
    </footer>
  </sl-card>
  {% endfor %}
</article>
<ul class="pagination">
{%- for page in pages %}
  <li>{% if page == "..." %}...{% else
    %}<sl-button href="?page={{ page }}&count={{ count }}">{{ page }}</sl-button>{%
    endif %}</li>
{%- endfor %}
</ul>
<sl-dialog id="confirm-delete" label="Delete Receipt">
  <p>
    Are you sure you want to delete receipt <span class="receipt-id"></span>?
  </p>
  <dl>
    <dt>Vendor</dt>
    <dd class="vendor"></dd>
    <dt>Amount</dt>
    <dd class="amount"></dd>
    <dt>Date</dt>
    <dd class="date"></dd>
  </dl>
  <footer slot="footer" class="table-actions">
    <sl-button aria-label="No">No</sl-button>
    <sl-button variant="danger" aria-label="Yes">Yes</sl-button>
  </footer>
</sl-dialog>
{% endblock %} {% block scripts %}
<script src="/static/receipt-list.js"></script>
{% endblock %}