const PRODUCT_NAME = "{{PRODUCT_NAME}}", // Gizmo die Eidechse
  PRODUCT_COLOR = "{{PRODUCT_COLOR}}", // Farbe Grün/Blau/Orange
  PRODUCT_COLOR_CHARACTERISTICS = "{{PRODUCT_COLOR_CHARACTERISTICS}}", // (Glänzend)
  PRODUCT_ID = "{{PRODUCT_ID}}"; // #32420

window.onload = () => {
  for (let i = 0; i < 10; i++) {
    let labels = document.getElementById("labels");

    /* CONTAINER */

    const container = document.createElement("div");
    container.className = "container";

    /* FIRST */

    const div = document.createElement("div");

    const background = document.createElement("div");
    background.className = "background";

    const content = document.createElement("div");
    content.className = "content";

    const productName = document.createElement("h1");
    productName.innerHTML = PRODUCT_NAME;

    const productColor = document.createElement("p");
    productColor.innerHTML = PRODUCT_COLOR;
    productColor.className = "product-color";

    const productColorCharacteristics = document.createElement("p");
    productColorCharacteristics.innerHTML = PRODUCT_COLOR_CHARACTERISTICS;
    productColorCharacteristics.className = "product-color";

    const productId = document.createElement("p");
    productId.innerHTML = PRODUCT_ID;
    productId.className = "product-id";

    const contentDiv = document.createElement("div");

    contentDiv.appendChild(productName);
    contentDiv.appendChild(productColor);
    contentDiv.appendChild(productColorCharacteristics);
    contentDiv.appendChild(productId);

    content.appendChild(contentDiv);

    div.appendChild(background);
    div.appendChild(content);

    container.appendChild(div);

    /* SECOND */

    const div2 = document.createElement("div");

    const manufacturerInfo = document.createElement("div");
    manufacturerInfo.className = "manufacturer-info";

    const manufacturer = document.createElement("p");
    manufacturer.innerHTML = "Hersteller: Jan Umbach";

    const address = document.createElement("p");
    address.innerHTML = "Tannenwäldchen 20";

    const zipCity = document.createElement("p");
    zipCity.innerHTML = "D-34212 Melsungen";

    manufacturerInfo.appendChild(manufacturer);
    manufacturerInfo.appendChild(address);
    manufacturerInfo.appendChild(zipCity);

    div2.appendChild(manufacturerInfo);

    const additionalInfo = document.createElement("div");
    additionalInfo.className = "additional-info";

    const additionalInfoText = document.createElement("p");
    additionalInfoText.innerHTML = "Made in Germany";

    const imgContainer = document.createElement("div");
    imgContainer.className = "img-container";

    const childrenImg = document.createElement("img");
    childrenImg.src = "../../groupsData/shx-product-label/children.jpg";
    childrenImg.alt = "children";
    childrenImg.className = "children";

    const ceImg = document.createElement("img");
    ceImg.src = "../../groupsData/shx-product-label/ce.svg";
    ceImg.alt = "ce";
    ceImg.className = "ce";

    imgContainer.appendChild(childrenImg);
    imgContainer.appendChild(ceImg);

    additionalInfo.appendChild(additionalInfoText);
    additionalInfo.appendChild(imgContainer);

    div2.appendChild(additionalInfo);

    container.appendChild(div2);

    labels.appendChild(container);
  }
};

/*
 <div class="container">
      <div>
        <div class="background"></div>

        <div class="content">
          <div>
            <h1>Gizmo die Eidechse</h1>
            <p class="product-color">Farbe Grün/Blau/Orange</p>
            <p class="product-color">(Glänzend)</p>
            <p class="product-id">#32420</p>
          </div>
        </div>
      </div>

      <div>
        <div class="manufacturer-info">
          <p>Hersteller: Jan Umbach</p>
          <p>Tannenwäldchen 20</p>
          <p>D-34212 Melsungen</p>
        </div>

        <div class="additional-info">
          <p>Made in Germany</p>

          <div class="img-container">
            <img class="children" src="children.jpg" />
            <img class="ce" src="ce.svg" />
          </div>
        </div>
      </div>
    </div>
*/