{% extends "base.html" %}
{% block content %}
<h1 id="datetime" data-time="{{now.isoformat()}}">{{now.strftime("%Y/%m/%d %H:%M:%S")}}</h1>
<script>
    // JavaScript to update the datetime dynamically
    function formatDateTime(date) {
        const year = date.getFullYear();
        const month = String(date.getMonth() + 1).padStart(2, '0'); // Months are zero-based
        const day = String(date.getDate()).padStart(2, '0');
        const hours = String(date.getHours()).padStart(2, '0');
        const minutes = String(date.getMinutes()).padStart(2, '0');
        const seconds = String(date.getSeconds()).padStart(2, '0');

        return `${year}/${month}/${day} ${hours}:${minutes}:${seconds}`;
        }
    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 = formatDateTime(currentTime);

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

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

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