receipts/templates/receipt-form.html.tera

58 lines
1.5 KiB
Plaintext

{% 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 %}