const TEMPLATE = document.createElement("template");
TEMPLATE.innerHTML = `<span class="hours">--</span><span class="deux-points">:</span><span class="minutes">--</span>`

class ClockElement extends HTMLElement {
    constructor(){
        super()
        setInterval(this.updateContent.bind(this), 1000);
    }
    
    connectedCallback(){
        this.replaceChildren(TEMPLATE.content.cloneNode(true))
        this.updateContent()
    }

    updateContent(){
        if(!this.querySelector(".hours"))
            return

        let now = new Date();
        this.querySelector(".hours").textContent = now.getHours().toString().padStart(2, "0")
        this.querySelector(".minutes").textContent = now.getMinutes().toString().padStart(2, "0")
        this.setAttribute("datetime", now.toISOString())
    }
}

customElements.define("gavle-clock", ClockElement)