{{define "navbar"}}
<div class="flex-grow-1"></div>
<ul class="navbar-nav">
  <li class="nav-item"><button class="btn btn-success"
      onclick="navigator.clipboard.writeText('{{.HostUrl}}/list/{{.Reference}}'); alert('The share link to your wishlist has been copied to your clipboard. Anyone with the link will be able to claim gifts for you. Share it with someone!');">Copy
      share link</button></li>
  <li class="nav-item">
    <div class="dropdown">
      <button class="nav-link dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
        Logged in as '{{.Username}}'
      </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 mb-4">
      <div class="card-body">
        <h2>Your wishlist</h2>
        {{with .Gifts}}
        <form method="post" onchange="acceptNames(this, 'deleteSubmit', 'gift')" autocomplete="off">
          <ul class="list-group mb-3">
            {{range .}}
            <li class="list-group-item">
              <input id="wishlist_select_{{.Id}}" class="form-check-input" type="checkbox" name="gift" value="{{.Id}}">
              <label class="form-check-label stretched-link" for="wishlist_select_{{.Id}}">
                {{.Name}}
              </label>
            </li>
            {{end}}
          </ul>
          <button id="deleteSubmit" class="btn btn-danger mb-3" type="submit" name="intent" value="delete_idea"
            disabled>Delete</button>
        </form>
        {{else}}
        <p>Your list is empty. Think of some things to add!</p>
        {{end}}
        <form method="post">
          <div class="input-group">
            <input class="form-control" name="gift_name" required>
            <button class="btn btn-primary" type="submit" name="intent" value="add_idea">Add gift idea</button>
          </div>
        </form>
      </div>
    </section>

    <section class="card">
      <div class="card-body">
        <h2>Your todo list</h2>
        {{with .Todo}}
        <form method="post"
          onchange="acceptNames(this, 'unclaimSubmit', 'gift'); acceptNames(this, 'completeSubmit', 'gift')"
          autocomplete="off">
          <ul class="list-group mb-3">
            {{range .}}
            <li class="list-group-item{{if .Sent}} list-group-item-light{{end}}">
              <input id="todo_select_{{.Id}}" class="form-check-input" type="checkbox" {{if .Sent}}
                aria-describedby="todo_detail_{{.Id}}" disabled{{else}} name="gift" value="{{.Id}}" {{end}}>
              <label for="todo_select_{{.Id}}" class="form-check-label">
                <em>
                  {{if .Sent}}
                  <s>{{.Name}}</s>
                  {{else}}
                  {{.Name}}
                  {{end}}
                </em>
              </label>
              <span id="todo_detail_{{.Id}}">
                for <a href="/list/{{.RecipientRef}}">{{.RecipientName}}</a>
              </span>
            </li>
            {{end}}
          </ul>
          <button id="unclaimSubmit" class="btn btn-warning" type="submit" name="intent" value="unclaim_todo"
            disabled>Unclaim</button>
          <button id="completeSubmit" class="btn btn-success" type="submit" name="mode" value="complete_todo"
            disabled>Complete</button>
        </form>
        {{else}}
        <p class="mb-0">When you claim gifts for others, they will appear here.</p>
        {{end}}
      </div>
    </section>
  </div>
</div>
{{end}}