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

    <ol>
      {% for file in files %}
      <li>
        <a href="./{{ file.filename }}">{{ file.title }}</a> -
        <span class="local-date" data-timestamp="{{ file.datetime }}">
            {{ file.datetime }}
        </span>
      </li>
      {% endfor %}
    </ol>

    <hr />

    <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 %}