const headerElement = document.querySelector('header');
const footerElement = document.querySelector('footer');

let isLoggedIn = false;

async function loadHeaderFooter() {
  try {
    const headerResponse = await fetch('https://commonhtml.thepenguinontheweb.tech/header-snippet.html');
    if (!headerResponse.ok) throw new Error('Failed to load header');
    const headerHTML = await headerResponse.text();

    const backButtonTemplate = document.getElementById('back-button-template');
    const loginTemplate = document.getElementById('login-template');
    const myAccountTemplate = document.getElementById('my-account-template');

    if (isLoggedIn) {
      headerElement.innerHTML += myAccountTemplate.cloneNode(true);
    }
    else {
      headerElement.innerHTML += loginTemplate.cloneNode(true);
    }

    headerElement.innerHTML = headerHTML;

    const footerResponse = await fetch('https://commonhtml.thepenguinontheweb.tech/footer-snippet.html');
    if (!footerResponse.ok) throw new Error('Failed to load footer');
    const footerHTML = await footerResponse.text();
    footerElement.innerHTML = footerHTML;
  } catch (error) {
    console.error('Error loading header/footer:', error);
  }
}