{% extends "base" %} {% block head %}
<title>Add Receipt</title>
<style></style>
{% 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-select
        id="transactions"
        name="transaction"
        placeholder="Loading transactions …"
        help-text="Select an existing transaction to auto fill fields"
        clearable
      >
        <sl-spinner slot="suffix"></sl-spinner>
        <sl-option value="new">New Gas Station Transaction …</sl-option>
        <sl-option value="deposit">New Refund/Deposit Transaction …</sl-option>
      </sl-select>
    </p>
    <p>
      <sl-input
        name="vendor"
        label="Vendor"
        placeholder="Vendor"
        list="vendors"
        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"
          accept="image/*,application/pdf,.avif"
        />
        <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="reset">Reset</sl-button>
      <sl-button type="submit" variant="primary" disabled>Submit</sl-button>
    </footer>
  </form>
</article>
{% endblock %}
{% block scripts %}
<script src="/static/receipt-form.js"></script>
{% endblock %}