{% extends "base" %} {% block head %}
<title>Add Receipt</title>
{% endblock %} {% block main %}
<h1>Add Receipt</h1>
<nav>
  <sl-button href="/receipts">
    <sl-icon slot="prefix" name="chevron-left"></sl-icon>Receipts
  </sl-button>
</nav>
<article>
  <form>
    <p>
      <sl-input
        name="vendor"
        label="Vendor"
        placeholder="Vendor"
        required
      ></sl-input>
    </p>
    <p>
      <sl-input type="date" name="date" label="Date" required></sl-input>
    </p>
    <p>
      <sl-input
        type="number"
        min="0.01"
        step="0.01"
        label="Amount"
        name="amount"
        required
      ></sl-input>
    </p>
    <p><sl-textarea label="Notes" name="notes"></sl-textarea></p>
    <sl-details summary="Take Photo" id="photo-box">
      <camera-input>Your browser does not support taking photos.</camera-input>
    </sl-details>
    <sl-details summary="Upload Photo" style="text-align: center">
      <p>
        <img id="upload-preview" style="max-height: 400px"/>
      </p>
      <p>
        <input name="photo" type="file" style="display: none" />
        <sl-button size="large" variant="primary" class="choose-file">
          <sl-icon slot="prefix" name="image" label="Choose File"></sl-icon>
          Choose File
        </sl-button>
      </p>
    </sl-details>
    <footer class="table-actions">
      <sl-button type="submit" variant="primary" disabled>Submit</sl-button>
    </footer>
  </form>
</article>
{% endblock %}
{% block scripts %}
<script src="/static/receipt-form.js"></script>
{% endblock %}