{% extends "_base.html" %}
{% block title %}{{ title }}{% endblock title %}
{% block content %}
    <h1>{{ title }}</h1>

    <div class="entry-list">
      {% set last_category = "___INIT___" %}

      {% for file in files %}
        {% set current_cat = file.category | default(value="Uncategorized") %}

        {# If file.category is None, we treat it as special top-level items #}
        {% if not file.category %}
             {# Just print the item, assuming sorted at top #}
             <div class="entry-item">
                <a href="./{{ file.filename }}">{{ file.title }}</a>
                <span class="local-date" data-timestamp="{{ file.datetime }}">{{ file.datetime }}</span>
             </div>
        {% else %}
            {# If it is a categorized item #}
            {% if current_cat != last_category %}
                <h3 class="category-header">{{ current_cat }}</h3>
                {% set_global last_category = current_cat %}
            {% endif %}

            <div class="entry-item indent">
                <a href="./{{ file.filename }}">{{ file.title }}</a>
                <span class="local-date" data-timestamp="{{ file.datetime }}">{{ file.datetime }}</span>
            </div>
        {% endif %}
      {% endfor %}
    </div>

    <h2>Recent Changes</h2>
    {% if changelog | length > 0 %}
    <p><a href="{% if is_static %}changelog.html{% else %}changelog{% endif %}">View full changelog</a></p>
    <ul>
        {% for entry in changelog | slice(end=5) %}
        <li>
            <code style="color: var(--accent)">{{ entry.date | truncate(length=10, end="") }}</code> 
            {{ entry.message }}
        </li>
        {% endfor %}
    </ul>
    {% else %}
    <p>No recent changes recorded.</p>
    {% endif %}

   <script>
    document.addEventListener("DOMContentLoaded", function() {
      const dateElements = document.querySelectorAll('.local-date');

      dateElements.forEach(el => {
        const rawValue = el.getAttribute('data-timestamp');
        const unixTimestamp = parseInt(rawValue);

        if (!isNaN(unixTimestamp)) {
          const date = new Date(unixTimestamp * 1000);

          el.textContent = date.toLocaleString(undefined, {
            year: 'numeric',
            month: 'short',
            day: 'numeric',
            hour: '2-digit',
            minute: '2-digit'
          });
        }
      });
    });
  </script>
{% endblock content %}