function addMetadata() {
    // Favicon
    const favicon = document.createElement("link");
    favicon.rel = "icon";
    favicon.href = "../Logo.svg";
    favicon.type = "image/svg+xml";
    document.head.appendChild(favicon);

    // UTF-8 charset
    const charset = document.createElement("meta");
    charset.setAttribute("charset", "UTF-8");
    document.head.appendChild(charset);

    // Viewport for mobile
    const viewport = document.createElement("meta");
    viewport.setAttribute("name", "viewport");
    viewport.setAttribute("content", "width=device-width, initial-scale=1.0");
    document.head.appendChild(viewport);

    // Primary stylesheet
    const css = document.createElement("link");
    css.rel = "stylesheet";
    css.href = "../style.css";
    document.head.appendChild(css);
}

function addHeader() {
    const header = document.querySelector("header");
    if (!header) return;

    // Back Link
    const backLink = document.createElement("a");
    backLink.href = "../index.html";
    backLink.classList.add("header-logo-link");
    backLink.textContent = "<- Back to Index";
    header.appendChild(backLink);

    // Right-side info container
    const info = document.createElement("div");
    info.classList.add("header-info");

    // Title from document.title
    const h1 = document.createElement("h1");
    h1.textContent = document.title;
    info.appendChild(h1);

    // Read date from <meta property="article:published_time">
    const metaDate = document.querySelector('meta[property="article:published_time"]');
    if (metaDate) {
        const dateString = metaDate.getAttribute("content");
        const displayDate = (new Date(dateString)).toLocaleDateString("en-US", {
            month: "short",
            day: "numeric",
            year: "numeric",
            timeZone: "UTC"
        });

        const time = document.createElement("time");
        time.setAttribute("datetime", dateString);
        time.textContent = `Updated ${displayDate}`;
        info.appendChild(time);
    }

    // Read class tag from <meta name="class">
    const metaClass = document.querySelector('meta[name="class"]');
    if (metaClass) {
        const classTag = document.createElement("span");
        classTag.classList.add("class-tag");
        classTag.textContent = `Class: ${metaClass.getAttribute("content")}`;
        info.appendChild(classTag);
    }

    header.appendChild(info);

    const hr = document.createElement("hr");
    header.appendChild(hr);
}

document.addEventListener("DOMContentLoaded", () => {
    addMetadata();
    addHeader();
});