{{define "navbar"}}
<nav>
  <ul class="navbar-nav">
    <li class="nav-item">
      <a class="nav-link" href="/">Home</a>
    </li>
  </ul>
</nav>
<div class="flex-grow-1"></div>
<ul class="navbar-nav">
  <li class="nav-item">
    <div class="dropdown">
      <button class="nav-link dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
        Logged in as '{{.CurrentUserName}}'
      </button>
      <ul class="dropdown-menu">
        <li>
          <form class="d-contents" method="post" action="/logout">
            <button class="dropdown-item" type="submit">Logout</button>
          </form>
        </li>
      </ul>
    </div>
  </li>
</ul>
{{end}}

{{define "body"}}
<div class="overflow-y-scroll">
  <div class="container pt-5">
    <section class="card">
      <div class="card-body">
        <h2>{{.Username}}'s list</h2>
        {{with .Gifts}}
        <form method="post" action="/{{$.UserReference}}/update" autocomplete="off"
          onchange="acceptNames(this, 'claimSubmit', 'claimed', 'unclaimed'); acceptNames(this, 'completeSubmit', 'claimed');">
          <button id="claimSubmit" class="btn btn-primary" type="submit" name="mode" value="claim"
            disabled>Claim/Unclaim</button>
          <button id="completeSubmit" class="btn btn-primary" type="submit" name="mode" value="complete"
            disabled>Complete</button>
          <ul class="list-group mt-3">
            {{range .}}
            <li class="list-group-item{{if .Sent}} list-group-item-light{{end}}">
              {{if .ClaimantId}}
              {{if eq .ClaimantId $.CurrentUserId}}
              <input id="foreignlist_select_{{.Id}}" class="form-check-input" type="checkbox"
                aria-describedby="wish_detail_{{.Id}}" name="claimed" value="{{.Id}}" {{if .Sent}}disabled{{end}}>
              {{else}}
              <input id="foreignlist_select_{{.Id}}" class="form-check-input" type="checkbox"
                aria-describedby="wish_detail_{{.Id}}" disabled>
              {{end}}
              {{else}}
              <input id="foreignlist_select_{{.Id}}" class="form-check-input" type="checkbox"
                aria-describedby="wish_detail_{{.Id}}" name="unclaimed" value="{{.Id}}" {{if .Sent}}disabled{{end}}>
              {{end}}
              <label class="form-check-label" for="foreignlist_select_{{.Id}}">
                {{if .Sent}}
                <s>{{.Name}}</s>
                {{else}}
                {{.Name}}
                {{end}}
              </label>
              {{if .ClaimantId}}
              {{if eq .ClaimantId $.CurrentUserId}}
              <span id="wish_detail_{{.Id}}" style="color: blue;">{{if .Sent}}Completed{{else}}Claimed{{end}} by
                you</span>
              {{else}}
              <span id="wish_detail_{{.Id}}" style="color: red;">{{if .Sent}}Completed{{else}}Claimed{{end}} by
                {{.ClaimantName}}</span>
              {{end}}
              {{end}}
            </li>
            {{end}}
          </ul>
        </form>
        {{else}}
        <p>They haven't wished for anything. Ask them to think of some stuff!</p>
        {{end}}
      </div>
    </section>
  </div>
</div>
{{end}}