{% extends "base" %} {% block head %}
<title>Receipt: ${{ amount }} at {{ vendor }}</title>
<style>
  @media screen and (min-width: 900px) {
    article {
      display: flex;
      justify-content: space-between;
    }

    .attributes {
      margin-right: 1em;
    }

    .photo img {
      max-width: 100%;
    }
  }
</style>
{% endblock %} {% block main %}
<h1>Receipt</h1>
<nav>
  <sl-button href="/receipts">
    <sl-icon slot="prefix" name="chevron-left"></sl-icon>Receipts
  </sl-button>
</nav>
<article>
  <div class="attributes">
    <p>
      <sl-input
        label="Date"
        value='{{ date | date(format="%A %_d %B %Y") }}'
        readonly
      ></sl-input>
    </p>
    <p>
      <sl-input label="Vendor" value="{{ vendor }}" readonly></sl-input>
    </p>
    <p>
      <sl-input
        type="number"
        min="0.01"
        step="0.01"
        label="Amount"
        name="amount"
        value="{{ amount }}"
        readonly
      ></sl-input>
    </p>
    <p>
      <sl-textarea label="Notes" name="notes" readonly>{{ notes }}</sl-textarea>
    </p>
  </div>
  <div class="photo">
    <p>
      <img src="/receipts/{{ id }}/view/{{ filename }}" />
    </p>
  </div>
</article>
{% endblock %} {% block scripts %}
<script src="/static/receipt.js"></script>
{% endblock %}