async function fetchAndDisplayBooks() {
  try {
    let books = [{"title":"Tinker, Tailor, Soldier, Spy","shorttitle":"Tinker, Tailor, Soldier, Spy","authorstring":"John le Carré","description":"From the New York Times bestselling author of A Legacy of Spies. The man he knew as \"Control\" is dead, and the young Turks who forced him out now run the Circus. But George Smiley isn't quite ready for retirement—especially when a pretty, would-be defector surfaces with a shocking accusation: a Soviet mole has penetrated the highest level of British Intelligence. Relying only on his wits and a small, loyal cadre, Smiley recognizes the hand of Karla—his Moscow Centre nemesis—and sets a trap to catch the traitor. The Oscar-nominated feature film adaptation of Tinker Tailor Soldier Spy is directed by Tomas Alfredson (Let the Right One In) and features Gary Oldman as Smiley, Academy Award winner Colin Firth (The King's Speech), and Tom Hardy (Inception). With an introduction by the author.","descriptionHtml":"From the New York Times bestselling author of A Legacy of Spies. The man he knew as \"Control\" is dead, and the young Turks who forced him out now run the Circus. But George Smiley isn't quite ready for retirement—especially when a pretty, would-be defector surfaces with a shocking accusation: a Soviet mole has penetrated the highest level of British Intelligence. Relying only on his wits and a small, loyal cadre, Smiley recognizes the hand of Karla—his Moscow Centre nemesis—and sets a trap to catch the traitor. The Oscar-nominated feature film adaptation of Tinker Tailor Soldier Spy is directed by Tomas Alfredson (Let the Right One In) and features Gary Oldman as Smiley, Academy Award winner Colin Firth (The King's Speech), and Tom Hardy (Inception). With an introduction by the author.","isbn":"9780143120933","amazonurl":"http://www.amazon.com/Tinker-Tailor-Soldier-Spy-George/dp/014312093X?linkCode=ll1&tag=codexmap-20&linkId=8d37aaf25f3947e1637a2ada957a9c8f&ref_=as_li_ss_tl","HawaiiProject":"https://www.thehawaiiproject.com/book/Tinker-Tailor-Soldier-Spy--by--John-le-Carré--30260","tbr":"https://tbrapp.co/book/30260","AppleBooks":"https://goto.applebooks.apple/9780143120933","BarnesNoble":"https://www.barnesandnoble.com/s/9780143120933","Bookshop":"https://bookshop.org/a/19558/9780143120933","coverarturl":"https://images-na.ssl-images-amazon.com/images/I/51kOkrVZEcL.jpg","bookid":"30260","publicationdate":"2002-01-01 00:00:00"},{"title":"Bangkok Tattoo","shorttitle":"Bangkok Tattoo","authorstring":"John Burdett","description":"Detective Sonchai Jitpleecheep of the Royal Thai Police returns in his riveting and smokily atmospheric new thriller.A farang–a foreigner–has been murdered, his body horribly mutilated, at the Bangkok brothel co-owned by Sonchai’s mother and his boss. The dead man was a CIA agent. To make matters worse, the apparent culprit is sweet-natured Chanya, the brothel’s top earner and a woman whom the devoutly Buddhist sleuth has loved for several lifetimes. How can Sonchai solve this crime without sending Chanya to prison? How can he engage in a cover-up without endangering his karma? And how will he ever get to the bottom of a case whose interested parties include American spooks, Muslim fundamentalists, and gangsters from three countries? As addictive as opium, as hot as Sriracha chili sauce, and bursting with surprises, Bangkok Tattoo will leave its mark on you. Read more","descriptionHtml":"Detective Sonchai Jitpleecheep of the Royal Thai Police returns in his riveting and smokily atmospheric new thriller.A farang–a foreigner–has been murdered, his body horribly mutilated, at the Bangkok brothel co-owned by Sonchai’s mother and his boss. The dead man was a CIA agent. To make matters worse, the apparent culprit is sweet-natured Chanya, the brothel’s top earner and a woman whom the devoutly Buddhist sleuth has loved for several lifetimes. How can Sonchai solve this crime without sending Chanya to prison? How can he engage in a cover-up without endangering his karma? And how will he ever get to the bottom of a case whose interested parties include American spooks, Muslim fundamentalists, and gangsters from three countries? As addictive as opium, as hot as Sriracha chili sauce, and bursting with surprises, Bangkok Tattoo will leave its mark on you.   Read more","isbn":"1400032911","amazonurl":"https://www.amazon.com/Bangkok-Tattoo-Royal-Detective-Novel/dp/1400032911/ref=monarch_sidesheet?linkCode=ll1&tag=codexmap-20&linkId=8d37aaf25f3947e1637a2ada957a9c8f&ref_=as_li_ss_tl","HawaiiProject":"https://www.thehawaiiproject.com/book/Bangkok-Tattoo--by--John-Burdett--584234","tbr":"https://tbrapp.co/book/584234","AppleBooks":"https://goto.applebooks.apple/9781400032914","BarnesNoble":"https://www.barnesandnoble.com/s/1400032911","Bookshop":"https://bookshop.org/a/19558/9781400032914","coverarturl":"https://images-na.ssl-images-amazon.com/images/I/51ufgTEFYHL.jpg","bookid":"584234","publicationdate":"2005-05-10 00:00:00"},{"title":"The Flanders Panel","shorttitle":"The Flanders Panel","authorstring":"Arturo Pérez-Reverte","description":"A fifteenth-century painting by a Flemish master is about to be auctioned when Julia, a young art restorer, discovers a peculiar inscription hidden in a corner: Who killed the knight? In the painting, the Duke of Flanders and his knight are locked in a game of chess, and a dark lady lurks mysteriously in the background. Julia is determined to solve the five-hundred-year-old murder, but as she begins to look for clues, several of her friends in the art world are brutally murdered in quick succession. Messages left with the bodies suggest a crucial connection between the chess game in the painting, the knight's murder, the sordid underside of the contemporary art world, and the latest deaths. Just when all of the players in the mystery seem to be pawns themselves, events race toward a shocking conclusion. A thriller like no other, The Flanders Panel presents a tantalizing puzzle for any connoisseur of mystery, chess, art, and history.","descriptionHtml":"<div>A fifteenth-century painting by a Flemish master is about to be auctioned when Julia, a young art restorer, discovers a peculiar inscription hidden in a corner: Who killed the knight? In the painting, the Duke of Flanders and his knight are locked in a game of chess, and a dark lady lurks mysteriously in the background. Julia is determined to solve the five-hundred-year-old murder, but as she begins to look for clues, several of her friends in the art world are brutally murdered in quick succession. Messages left with the bodies suggest a crucial connection between the chess game in the painting, the knight's murder, the sordid underside of the contemporary art world, and the latest deaths. Just when all of the players in the mystery seem to be pawns themselves, events race toward a shocking conclusion. A thriller like no other, The Flanders Panel presents a tantalizing puzzle for any connoisseur of mystery, chess, art, and history.<br><br><br></div>","isbn":"9780156029582","amazonurl":"http://www.amazon.com/The-Flanders-Panel-Arturo-Perez-Reverte/dp/0156029588?linkCode=ll1&tag=codexmap-20&linkId=8d37aaf25f3947e1637a2ada957a9c8f&ref_=as_li_ss_tl","HawaiiProject":"https://www.thehawaiiproject.com/book/The-Flanders-Panel--by--Arturo-Pérez-Reverte--4551","tbr":"https://tbrapp.co/book/4551","AppleBooks":"https://goto.applebooks.apple/9780156029582","BarnesNoble":"https://www.barnesandnoble.com/s/9780156029582","Bookshop":"https://bookshop.org/a/19558/9780156029582","coverarturl":"https://images-na.ssl-images-amazon.com/images/I/51gyFxxx6lL.jpg","bookid":"4551","publicationdate":"2004-06-07 00:00:00"}];

    // Create a container for the book list
    const bookList = document.createElement('div');
    bookList.className = 'book-list';

    // Add some basic styling
    const style = document.createElement('style');
    style.textContent = `
            body {
              --cover-width: 70px;
              --cover-height: calc(var(--cover-width) * 1.55);
              --cover-radius: 8px;
              --cover-bordercolor: rgba(255, 255, 255, 0.5);
              --widget-background: black;
              --widget-textcolor: white;
            }
            
            .book-list {
              display: flex;
              flex-direction: column;
              gap: 10px;
              padding: 4px;
              max-widthX: 250px;
              background: var(--widget-background);
            }
            
            .book-card {
              display: flex;
              flex-direction: row;
              align-items: center;
              overflow: hidden;
            }

            @media (max-width:1080px) {
              .book-card {
                 flex-direction: column;
              }
            }
            
            .book-cover-container {
              flexX: 0 0 var(--cover-width);
              width: var(--cover-width);
              height: var(--cover-height);
              border-radius: var(--cover-radius);
              background: var(--cover-bordercolor);
              displayX: flex;
		          padding: 2px;
            }
            .book-cover-link {
              display: block; 
              height: 100%
            }
            .book-cover {
              display: block;
              widthX: var(--cover-width);
              heightX: var(--cover-height);
              border-radius: var(--cover-radius);
              object-fit: cover;
              height: 100%;
              width: 100%;
              marginX: 1px;
              box-shadow: 0 0 1px 0px white inset, 0 0 1px 0px white;
            }
            
            .book-info {
              flex: 1;
              padding: 8px;
              display: flex;
              flex-direction: column;
              justify-content: center;
              background: var(--widget-background);
              color: var(--widget-textcolor);
            }
            
            .book-title {
              margin: 0 0 0px 0 !important;
              font-size: 1rem;
              font-weight: bold;
              color: var(--widget-textcolor);
            }
            
            .book-author {
              color: var(--widget-textcolor);
              margin-bottom: 0px !important;
              font-size: 0.75rem;
            }
        `;

    document.head.appendChild(style);

    // Create and append book cards
    books.forEach(book => {
      const bookCard = document.createElement('div');
      bookCard.className = 'book-card';

      // h2: margin-top: 0px;
      bookCard.innerHTML = `
                <div class="book-cover-container">
                <a href="${book.tbr}" target="_blank" class="book-cover-link">
                    <img src="${book.coverarturl}" 
                      alt="Cover of ${book.shorttitle}"
                      class="book-cover">
                </a>
                </div>
                <div class="book-info">
                    <div class="book-title">${book.shorttitle}</div>
                    <p class="book-author">by ${book.authorstring}</p>
                </div>
            `;

      bookList.appendChild(bookCard);
    });

    // Add the book list to the document
    const booksContainer = document.getElementById('fdb2eae44c496f82eb8c4d968057560d');
    if (booksContainer) {
      booksContainer.appendChild(bookList);
    } else {
      console.error('Element with id "books" not found');
    }

    //
    var poweredDiv = document.createElement("div");
    poweredDiv.setAttribute('style', 'padding-top: 4px; display: flex; justify-content: center; align-items: center;' );
    
    var poweredImage = document.createElement("img");
        
    var poweredLink = document.createElement("a");
    var poweredImgLink = document.createElement("a");
    
    poweredDiv.className ='LT_powered';
    
    poweredImage.className ="favicon";
    poweredImage.setAttribute('src', "https://bookshipapp.com/assets/icon/favicon.ico");
    poweredImage.setAttribute('width', '16px');
    poweredImage.setAttribute('height', '16px');
    
    poweredLink.setAttribute('href', 'https://www.bookshipapp.com')
    poweredLink.setAttribute('target', '_top');
    poweredLink.setAttribute('style', 'display: flex;');
    poweredLink.innerHTML='Powered by Bookship';
    
    poweredImgLink.setAttribute('href', 'https://www.bookshipapp.com')
    poweredImgLink.setAttribute('target', '_top');
    poweredImgLink.setAttribute('style', 'display: flex;padding-right: 4px;');
    poweredImgLink.appendChild(poweredImage);
      
    poweredDiv.appendChild(poweredImgLink);
    poweredDiv.appendChild(poweredLink);
    booksContainer.appendChild(poweredDiv);
  } catch (error) {
    console.error('Error fetching or displaying books:', error);
    const errorMessage = document.createElement('div');
    errorMessage.style.color = 'red';
    errorMessage.style.padding = '20px';
    errorMessage.textContent = 'Sorry, there was an error loading the books.';
    document.body.appendChild(errorMessage);
  }
}

fetchAndDisplayBooks();

// Call the function when the document is loaded
// document.addEventListener('DOMContentLoaded', fetchAndDisplayBooks);