"use strict";

let currentPage = null;

/**
 * Diese Funktion wird beim Klick auf einen der Buttons im Header aufgerufen. Der geklickte Button erhält die Klasse
 * 'active' und kann dadurch in css separat angesprochen werden.
 * @param sourceElement Das Element, dessen Klick zum Aufruf der Funktion geführt hat
 * @param page Die Seite, die geladen werden soll
 */
function loadPage(sourceElement, page){
    if (currentPage !== null) {
        currentPage.classList.remove("active");
    }
    currentPage = sourceElement;
    currentPage.classList.add("active");

    showPage(page);
}

/**
 * Setzt den Inhalt des #content-Bereichs auf die übergebene Seite.
 * Lädt die Inhalte aus dem entsprechenden <template> der index.html
 * @param page String, der die zu ladende Seite vorgibt
 */
function showPage(page){
    const contentElement = document.querySelector("#content");
    const content = document.querySelector(`#${page}Template`);

    if (content !== null)
        contentElement.innerHTML = content.innerHTML;
    else {
        contentElement.innerHTML = "404 Page not found";
    }
}


// Lädt bei Aufruf der Seite die Startansicht
loadPage(document.querySelector("#homeButton"), 'home');