{{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-warning" type="submit" name="intent" value="claim"
            disabled>Claim/Unclaim</button>
          <button id="completeSubmit" class="btn btn-success" type="submit" name="intent" 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 stretched-link" for="foreignlist_select_{{.Id}}">
                {{if .Sent}}
                <s>{{.Name}}</s>
                {{else}}
                {{.Name}}
                {{end}}
              </label>
              {{if or .ClaimantId (ne .RecipientId .CreatorId)}}
              <div class="d-inline" id="wish_detail_{{.Id}}">
                {{if .ClaimantId}}
                {{if eq .ClaimantId $.CurrentUserId}}
                <span style="color: blue;">{{if .Sent}}Completed{{else}}Claimed{{end}} by
                  <em>you</em></span>
                {{else}}
                <span style="color: red;">{{if .Sent}}Completed{{else}}Claimed{{end}} by
                  {{.ClaimantName}}</span>
                {{end}}
                {{end}}
                {{if ne .RecipientId .CreatorId}}
                {{if eq .CreatorId $.CurrentUserId}}
                <span style="color: green;">Added by <em>you</em></span>
                {{else}}
                <span style="color: green;">Added by {{.CreatorName}}</span>
                {{end}}
                {{end}}
              </div>
              {{end}}
            </li>
            {{end}}
          </ul>
        </form>
        {{else}}
        <p>They don't have any gift ideas. Ask them to think of something, or add an idea yourself! 👇 (everyone
          except them will be able to see it and claim it)</p>
        {{end}}
        <form method="post" action="/{{$.UserReference}}/update">
          <div class="input-group mt-3">
            <input class="form-control" name="gift_name"
              placeholder="This will be invisible to {{.Username}}, but everyone else will be able to see it and possibly claim it."
              required>
            <button class="btn btn-primary" type="submit" name="intent" value="add">Add gift idea</button>
          </div>
        </form>
      </div>
    </section>
  </div>
</div>
{{end}}