{{define "body"}}
<p>Logged in as '{{.Username}}'</p>
<form method="post" action="/logout">
  <input type="submit" value="Logout">
</form>
<h1>Lishwist</h1>
<dl>
  <dt>User reference:</dt>
  <dd style="display: flex; gap: 0.5rem">
    <pre>{{.Reference}}</pre>
    <div style="display: flex; align-items: center;">
      <button onclick="navigator.clipboard.writeText('{{.HostUrl}}/{{.Reference}}');">Copy link</button>
    </div>
  </dd>
</dl>
<section>
  <h2>Your wishlist</h2>
  {{with .Gifts}}
  <form method="post" action="/wishlist/delete" onchange="acceptNames(this, 'deleteSubmit', 'gift')" autocomplete="off">
    <button id="deleteSubmit" type="submit" name="mode" value="delete" disabled>Delete</button>
    <ul>
      {{range .}}
      <li>
        <label>
          <input type="checkbox" name="gift" value="{{.Id}}">
          {{.Name}}
        </label>
      </li>
      {{end}}
    </ul>
  </form>
  {{else}}
  <p>Your list is empty. Think of some things to add!</p>
  {{end}}
  <form method="post" action="/wishlist/add">
    <input name="gift_name" required>
    <button type="submit">Add gift idea</button>
  </form>
</section>
{{with .Todo}}
<section>
  <h2>Your todo list</h2>
  <form method="post" action="/todo/update"
    onchange="acceptNames(this, 'unclaimSubmit', 'gift'); acceptNames(this, 'completeSubmit', 'gift')"
    autocomplete="off">
    <button id="unclaimSubmit" type="submit" name="mode" value="unclaim" disabled>Unclaim</button>
    <button id="completeSubmit" type="submit" name="mode" value="complete" disabled>Complete</button>
    <ul>
      {{range .}}
      <li>
        <label>
          {{if .Sent}}
          <input aria-describedby="todo_detail_{{.Id}}" type="checkbox" disabled>
          {{else}}
          <input type="checkbox" name="gift" value="{{.Id}}">
          {{end}}
          <em>
            {{if .Sent}}
            <s>{{.Name}}</s>
            {{else}}
            {{.Name}}
            {{end}}
          </em>
        </label>
        <span id="todo_detail_{{.Id}}">
          for <a href="/{{.RecipientRef}}">{{.RecipientName}}</a>
        </span>
      </li>
      {{end}}
    </ul>
  </form>
</section>
{{end}}
{{end}}