{% extends 'layouts/base.html' %}

{% block title %}Página Inicial - {{ block.super }}{% endblock %}

{% block content %}

<div class="mb-6">
    <h1 class="text-3xl font-bold text-gray-800">
        Bem-vindo, {{ user.get_full_name|default:user.username }}!
    </h1>
    
    <p class="text-gray-500 text-sm"> 
        {{ data_atual }} - <span id="realtime-clock">{{ hora_inicial }}</span> 
    </p>
</div>

<div class="bg-white p-6 rounded-lg shadow-md">
    <h2 class="font-semibold text-lg text-gray-700"></h2>
    <p class="mt-2 text-gray-600">
       
    </p>
</div>

<script>
    function updateClock() {
        // Pega a data/hora atual do navegador do utilizador
        const now = new Date();

        // Formata a hora, minuto e segundo (garantindo 2 dígitos com padStart)
        const hours = String(now.getHours()).padStart(2, '0');
        const minutes = String(now.getMinutes()).padStart(2, '0');
        const seconds = String(now.getSeconds()).padStart(2, '0');

        // Monta a string HH:MM:SS
        const timeString = `${hours}:${minutes}:${seconds}`;

        // Encontra o elemento span pelo ID e atualiza o seu conteúdo
        const clockElement = document.getElementById('realtime-clock');
        if (clockElement) { // Verifica se o elemento existe antes de tentar atualizá-lo
            clockElement.textContent = timeString;
        }
    }

    // Chama a função updateClock imediatamente para exibir a hora correta ao carregar
    updateClock(); 
    
    // Configura para chamar a função updateClock a cada 1000 milissegundos (1 segundo)
    setInterval(updateClock, 1000); 
</script>

{% endblock %}