{% extends "base" %}
{% block head %}
<link rel="stylesheet" href="/static/transaction.css" />
<title>Update Transaction: {{ description }}</title>
{% endblock %}
{% block main %}
<h1>Update Transaction</h1>
<nav>
  <sl-breadcrumb>
    <sl-breadcrumb-item href="/transactions">Transactions</sl-breadcrumb-item>
    <sl-breadcrumb-item>{{ description }}</sl-breadcrumb-item>
  </sl-breadcrumb>
</nav>
<form name="transaction">
  <p>
    <sl-input label="Date" value="{{ date }}" readonly></sl-input>
  </p>
  <p>
    <sl-input label="Description" value="{{ description }}" readonly></sl-input>
  </p>
  <p>
    <sl-input
      type="number"
      min="0.01"
      step="0.01"
      label="Amount"
      name="amount"
      value="{{ amount }}"
    ></sl-input>
  </p>
  <p><sl-textarea label="Notes" name="notes"></sl-textarea></p>
  <sl-details summary="Take Photo" id="photo-box">
    <p class="fallback">Your browser does not support taking photos.</p>
    <div id="photo-view" class="invisible">
      <div class="workspace">
        <video class="invisible"></video>
      </div>
      <div class="buttons">
        <sl-tooltip content="Take Photo">
          <sl-icon-button name="camera" label="Take Photo"></sl-icon-button>
        </sl-tooltip>
        <sl-tooltip content="Start Over">
          <sl-icon-button
            name="trash"
            label="Start Over"
          ></sl-icon-button>
        </sl-tooltip>
      </div>
    </div>
  </sl-details>
  <footer>
    <sl-button type="reset" variant="secondary">Reset</sl-button
    ><sl-button type="submit" variant="primary">Submit</sl-button>
  </footer>
</form>
{% endblock %}
{% block scripts %}
<script src="/static/transaction.js"></script>
{% endblock %}