{% extends "base.html" %}
{% block body %}
  <header>
    <h1>Memories of...</h1>
  </header>

  <ul class="name-list">
    {% for name in names %}
      <li><a href="/memories/{{ name | urlencode }}">{{ name }}</a></li>
    {% endfor %}
    <li class="new"><a id="new-button" href="#">Add new person</a></li>
  </ul>
  
  <script>
    document.getElementById("new-button").addEventListener("click", () => {
      const name = prompt("Enter name:")
      if (name) {
        window.location = `memories/${name}`
      }
    });
  </script>
{% endblock %}