{{ define "content" }}
<div class="page-head">
  <h1>{{ T "shifts.title" }}</h1>
  {{ if .HasOpen }}<span class="tag" style="background:rgba(22,163,74,.12); color:var(--success)">{{ T "shifts.open_since" }} {{ .Current.OpenedAt }}</span>
  {{ else }}<span class="tag">{{ T "shifts.none_open" }}</span>{{ end }}
</div>

<div class="catalog-layout">
  <div class="catalog-list">
    {{ if .HasOpen }}
    <div class="card">
      <h2>{{ T "shifts.current" }}</h2>
      <table class="table">
        <tbody>
          <tr><td>{{ T "shifts.register" }}</td><td>{{ .Current.RegisterID }}</td></tr>
          <tr><td>{{ T "shifts.cashier" }}</td><td>{{ .Current.CashierID }}</td></tr>
          <tr><td>{{ T "shifts.opened_at" }}</td><td>{{ .Current.OpenedAt }}</td></tr>
          <tr><td>{{ T "shifts.opening_cash" }}</td><td>{{ money .Current.OpeningCash }}</td></tr>
        </tbody>
      </table>
    </div>
    {{ end }}

    <div class="card" {{ if .HasOpen }}style="margin-top:1rem"{{ end }}>
      <h2>{{ T "shifts.history" }}</h2>
      <table class="table">
        <thead><tr><th>{{ T "shifts.opened_at" }}</th><th>{{ T "shifts.closed_at" }}</th><th>{{ T "shifts.opening_cash" }}</th><th>{{ T "shifts.counted" }}</th><th>{{ T "shifts.expected" }}</th><th>{{ T "shifts.variance" }}</th></tr></thead>
        <tbody>
          {{ if .History }}
            {{ range .History }}
            <tr>
              <td>{{ .OpenedAt }}</td>
              <td>{{ if .Open }}<span class="tag" style="color:var(--success)">{{ T "shifts.open" }}</span>{{ else }}{{ .ClosedAt }}{{ end }}</td>
              <td>{{ money .OpeningCash }}</td>
              <td>{{ if .Open }}—{{ else }}{{ money .ClosingCash }}{{ end }}</td>
              <td>{{ if .Open }}—{{ else }}{{ money .Expected }}{{ end }}</td>
              <td>{{ if .Open }}—{{ else }}<span {{ if ne .Variance 0 }}class="stock-low"{{ end }}>{{ money .Variance }}</span>{{ end }}</td>
            </tr>
            {{ end }}
          {{ else }}
            <tr><td colspan="6" class="empty">{{ T "shifts.no_history" }}</td></tr>
          {{ end }}
        </tbody>
      </table>
    </div>
  </div>

  <div class="card catalog-form">
    {{ if .HasOpen }}
    <h3>{{ T "shifts.close" }}</h3>
    <form id="close-shift-form" hx-post="/api/shifts/close" hx-swap="innerHTML" hx-target="#shift-result"
          hx-on::after-request="if (event.detail.successful) window.location.reload()">
      <input type="hidden" name="shift_id" value="{{ .Current.ID }}">
      <input type="hidden" name="closing_cash" id="closing-cash-minor">
      <label>{{ T "shifts.counted_cash" }} (£)
        <input type="number" id="closing-cash" step="0.01" min="0" required placeholder="0.00"
               onchange="document.getElementById('closing-cash-minor').value = Math.round(parseFloat(this.value || 0) * 100)">
      </label>
      <label>{{ T "shifts.note" }} <input type="text" name="note" placeholder="{{ T "shifts.note_hint" }}"></label>
      <button type="submit" class="btn primary" style="width:100%">{{ T "shifts.close" }}</button>
    </form>

    <details class="catalog-extra">
      <summary>{{ T "shifts.adjustment" }}</summary>
      <form id="adjustment-form" hx-post="/api/shifts/adjustment" hx-swap="innerHTML" hx-target="#shift-result">
        <input type="hidden" name="shift_id" value="{{ .Current.ID }}">
        <input type="hidden" name="amount" id="adjust-minor">
        <label>{{ T "shifts.adjust_type" }}
          <select name="type" required>
            <option value="payout">{{ T "shifts.payout" }}</option>
            <option value="adjustment">{{ T "shifts.adjust" }}</option>
          </select>
        </label>
        <label>{{ T "shifts.amount" }} (£, {{ T "shifts.amount_hint" }})
          <input type="number" id="adjust-pounds" step="0.01" required placeholder="-50.00"
                 onchange="document.getElementById('adjust-minor').value = Math.round(parseFloat(this.value || 0) * 100)">
        </label>
        <label>{{ T "shifts.reason" }} <input type="text" name="reason" required></label>
        <button type="submit" class="btn">{{ T "shifts.record" }}</button>
      </form>
    </details>
    {{ else }}
    <h3>{{ T "shifts.open_new" }}</h3>
    <form id="open-shift-form" hx-post="/api/shifts/open" hx-swap="innerHTML" hx-target="#shift-result"
          hx-on::after-request="if (event.detail.successful) window.location.reload()">
      <label>{{ T "shifts.register" }}
        <select name="register_id" required>
          {{ range .Registers }}<option value="{{ .ID }}">{{ .Name }}</option>
          {{ else }}<option value="reg-default">{{ T "shifts.default_register" }}</option>{{ end }}
        </select>
      </label>
      <input type="hidden" name="opening_cash" id="opening-cash-minor" value="0">
      <label>{{ T "shifts.opening_cash" }} (£)
        <input type="number" id="opening-cash" step="0.01" min="0" required value="0.00"
               onchange="document.getElementById('opening-cash-minor').value = Math.round(parseFloat(this.value || 0) * 100)">
      </label>
      <button type="submit" class="btn primary" style="width:100%">{{ T "shifts.open_new" }}</button>
    </form>
    {{ end }}
    <div id="shift-result" class="muted" style="min-height:1.3rem; margin-top:.5rem"></div>

    <details class="catalog-extra">
      <summary>{{ T "shifts.formula_title" }}</summary>
      <p class="muted" style="font-size:.82rem">{{ T "shifts.formula" }}</p>
    </details>
  </div>
</div>
{{ end }}