const body = document.querySelector(".body");
console.log(document.body.innerHTML);

fetch(window.location.origin + "/pass.json")
  .then((data) => data.json())
  .then((jsondata1) => {
    console.log(jsondata1);
    jsondata1.map((jsondata) => {
      body.innerHTML += `<div ${!jsondata.background ? `style="background: black"` : `style="background: ${jsondata.background}"`} class="pass">
    <div class="pass-header-v">
        <div class="pass-header">
            <div class="pass-header-img">
                <img
                    src="${jsondata.header.img.src}"
                    alt="${jsondata.header.img.alt}"
                />
            </div>
            <div class="pass-header-text">
                <p ${!jsondata.header.desc.color ? "" : `style="color: ${jsondata.header.desc.color}"`} class="pass-desc">${jsondata.header.desc.data}</p>
                <h2 ${!jsondata.header.data.color ? "" : `style="color: ${jsondata.header.data.color}"`} class="pass-name">${jsondata.header.data.data}</h2>
            </div>
        </div>
        ${
          !jsondata.header.body
            ? ``
            : `<div ${!jsondata.header.body.img ? `style="height: max-content"` : ``} class="pass-body-img">
            ${
              !jsondata.header.body.img
                ? ``
                : `<img
                src="${jsondata.header.body.img.src}"
                alt="${jsondata.header.body.img.alt}"
            />`
            }
            ${!jsondata.header.body.desc ? `` : `<p ${!jsondata.header.body.desc.color ? "" : `style="color: ${jsondata.header.body.desc.color}"`} class="pass-desc">${jsondata.header.body.desc.data}</p>`}
            ${!jsondata.header.body.data ? `` : `<p ${!jsondata.header.body.data.color ? "" : `style="color: ${jsondata.header.body.data.color}"`} class="pass-body-img-data"><b>${jsondata.header.body.data.data}</b></p>`}
        </div>`
        }
        ${
          !jsondata.body
            ? ``
            : `<div class="pass-body">
              ${jsondata.body.reduce((acc, block) => {
                return (
                  acc +
                  `<div class="pass-body-text">
                    <div>
                      ${
                        !block.left
                          ? ``
                          : `<p ${!block.left.desc.color ? `` : `style="color: ${block.left.desc.color}"`} class="pass-desc">${block.left.desc.data}</p>
                      <p ${!block.left.data.color ? `` : `style="color: ${block.left.data.color}"`}>
                      ${block.left.data.data}
                      </p>`
                      }
                    </div>
                    <div>
                      ${
                        !block.right
                          ? ``
                          : `<p ${!block.right.desc.color ? `` : `style="color: ${block.right.desc.color}"`} class="pass-desc">${block.right.desc.data}</p>
                      <p ${!block.right.data.color ? `` : `style="color: ${block.right.data.color}"`}>
                      ${block.right.data.data}
                      </p>`
                      }
                    </div>
                </div>`
                );
              }, "")}
            </div>`
        }
    </div>

    ${
      !jsondata.footer
        ? ``
        : `<div class="pass-footer">
        ${
          !jsondata.footer.img
            ? ``
            : `<div ${jsondata.footer.img.type === "rectangle" ? `style="width: 80%;height: 80px;"` : `style="width: 100px; height: 100px"`} class="pass-footer-img">
            <img
                ${jsondata.footer.img.type === "rectangle" ? `style="width: 100%;height: 80px;"` : `style="width: 100px; height: 100px"`}
                src="${jsondata.footer.img.src}"
                alt="${jsondata.footer.img.alt}"
            />
        </div>`
        }
        ${
          !jsondata.footer.subimg
            ? ``
            : `<div class="pass-footer-subimg">
            <img
                src="${jsondata.footer.subimg.src}"
                alt="${jsondata.footer.subimg.alt}"
            />
        </div>`
        }
    </div>`
    }
    </div`;
    });
  });