{% extends "base.html" %}
{% block content %}
<h1 id="datetime" data-time="{{now.isoformat()}}">{{now.isoformat()}}</h1>
<script>
    // JavaScript to update the datetime dynamically
    function updateTime() {
        const dateElement = document.getElementById('datetime');
        const currentTime = new Date(dateElement.dataset.time);

        // Increment the datetime by 1 second
        currentTime.setSeconds(currentTime.getSeconds() + 1);

        // Format the datetime as a readable string
        const formattedTime = currentTime.toLocaleString();

        // Update the displayed datetime
        dateElement.textContent = formattedTime;

        // Update the data-time attribute for the next update
        dateElement.dataset.time = currentTime.toISOString();
    }

    // Update the datetime every second
    setInterval(updateTime, 1000);
</script>
{% endblock %}