{% extends "base" %} {% block head %}
<title>Receipt: ${{ amount }} at {{ vendor }}</title>
<style>
  .photo {
    max-width: 100%;
  }

  .photo img {
    max-width: 100%;
  }

  .photo iframe {
    width: 100%;
    aspect-ratio: 8.5 / 11;
  }

  @media screen and (min-width: 900px) {
    article {
      display: flex;
      justify-content: space-between;
    }

    .attributes {
      margin-right: 1em;
    }

    .photo {
      flex-grow: 1;
    }
  }
</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"
        value="{{ notes }}"
        readonly
      ></sl-textarea>
    </p>
  </div>
  <div class="photo">
    <p>
{% if filename is ending_with(".pdf") %}
      <iframe src="/receipts/{{ id }}/view/{{ filename }}"></iframe>
{% else %}
      <img src="/receipts/{{ id }}/view/{{ filename }}" />
{% endif %}
    </p>
  </div>
</article>
{% endblock %} {% block scripts %}
<script src="/static/receipt.js"></script>
{% endblock %}