{% extends "base.html" %}
{% block title %}Memories of {{ name }}{% endblock %}
{% block body %}
  <header>
    <a href="../" class="back"><span>&larr;</span></a>
    <h1>Memories of {{ name }}</h1>
  </header>

  <div class="memories">
    <div class="memory-list">
      {% for age, memories in memories_by_month.items() %}
        <div class="age" id="age-{{ age[0] }}-{{ age[1] }}">
          <h2>{{ age | format_years_months }}</h2>
          <ul>
            {% for memory in memories %}
              <li class="memory" id="memory-{{ memory.id }}">
                <a
                  href="../edit/{{ memory.id }}"
                  data-hx-get="../edit/{{ memory.id }}"
                  data-hx-swap="outerHTML"
                  data-hx-select=".edit-memory"
                >
                  {{ memory.note }}
                </a>
              </li>
            {% endfor %}
          </ul>
        </div>
      {% endfor %}
    </div>
  </div>
  
  <div id="new-memory">
    <form
      class="memory-form"
      method="post"
      data-hx-post=""
      data-hx-ext="morph"
      data-hx-swap="morph:outerHTML"
      data-hx-target=".memory-list"
      data-hx-select=".memory-list"
      id="new-memory-form"
      data-hx-swap-oob="true"
    >
      <input type="text" name="note" placeholder="What did {{ name }} do?">
      <input type="date" name="date" value="{{ today }}" required>
      <input type="submit" value="Add">
    </form>
  </div>
  
  <script>
    if (!window.location.hash) {
      const lastMemory = document.querySelector(".memory-list .age:last-child .memory:last-child");
      lastMemory.scrollIntoView();
    }
    
    document.getElementById("new-memory").addEventListener("htmx:afterRequest", evt => {
      const newId = evt.detail.xhr.getResponseHeader("x-id");
      document.getElementById(`memory-${newId}`).scrollIntoView();
    });
  </script>
{% endblock %}