{{ define "content" }}
<div class="page-head">
  <h1>{{ T "tills.title" }}</h1>
  <a class="btn secondary" href="/settings">← {{ T "settings.title" }}</a>
</div>

<div class="catalog-layout">
  <div class="card">
    <h3>{{ T "tills.add" }}</h3>
    <p class="muted">{{ T "tills.add_help" }}</p>
    <button class="btn primary" hx-post="/api/sync/enroll-token" hx-target="#till-qr" hx-swap="innerHTML">{{ T "tills.show_qr" }}</button>
    <div id="till-qr" style="margin-top:.6rem"></div>
    <hr style="margin:1rem 0; border:none; border-top:1px dashed #d1d5db">
    <h3>{{ T "tills.join" }}</h3>
    <p class="muted">{{ T "tills.join_help" }}</p>
    <form hx-post="/api/sync/join" hx-target="#join-msg" hx-swap="innerHTML">
      <label>{{ T "tills.join_code" }} <input type="text" name="code" placeholder='{"url":"http://192.168.1.10:8080","token":"..."}' required></label>
      <label>{{ T "tills.join_name" }} <input type="text" name="name" placeholder="Till 2"></label>
      <button class="btn" type="submit">{{ T "tills.join_btn" }}</button>
      <div id="join-msg" class="muted" aria-live="polite" style="min-height:1.2rem"></div>
    </form>
  </div>

  {{ if .SyncPrimary }}
  <div class="card">
    <h3>{{ T "tills.promote_title" }}</h3>
    <p class="muted">{{ T "tills.promote_help" }}</p>
    <form hx-post="/api/sync/promote" hx-target="#promote-msg" hx-swap="innerHTML"
          hx-confirm="{{ T "tills.promote_confirm" }}">
      <label>{{ T "tills.promote_confirm_label" }}
        <input type="text" name="confirm" placeholder="PROMOTE" autocomplete="off" required></label>
      <button class="btn" type="submit">{{ T "tills.promote_btn" }}</button>
      <div id="promote-msg" class="muted" aria-live="polite" style="min-height:1.2rem"></div>
    </form>
  </div>
  {{ end }}

  <div class="card">
    <h3>{{ T "tills.enrolled" }}</h3>
    {{ if .Tills }}
    <table class="table">
      <thead><tr><th>{{ T "tills.col_name" }}</th><th>{{ T "tills.col_enrolled" }}</th><th>{{ T "tills.col_seen" }}</th><th></th></tr></thead>
      <tbody>
        {{ range .Tills }}
        <tr>
          <td>{{ .Name }}</td>
          <td>{{ .EnrolledAt }}</td>
          <td>{{ if .LastSeenAt }}{{ .LastSeenAt }}{{ else }}—{{ end }}</td>
          <td><button class="btn secondary" hx-post="/api/sync/tills/{{ .ID }}/revoke"
                      hx-confirm="{{ T "tills.revoke_confirm" }}">{{ T "tills.revoke" }}</button></td>
        </tr>
        {{ end }}
      </tbody>
    </table>
    {{ else }}
    <p class="muted">{{ T "tills.none" }}</p>
    {{ end }}
  </div>
</div>
{{ end }}