<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline'" />
    <title>Print Worker Test</title>
    <style>
      body {
        font-family: 'Courier New', monospace;
        font-size: 12pt;
        font-weight: normal;
        color: #000;
        background-color: #fff;
        margin: 0;
      }
      /* Set the container width to 60mm so it spans the full ticket */
      #root {
        width: 60mm;
        margin: 0 auto;
        padding: 5mm;
      }
      /* Only the title is bold */
      h1 {
        font-size: 16pt;
        margin-bottom: 5mm;
        font-weight: bold;
        -webkit-text-fill-color: #000 !important;
        -webkit-text-stroke: 1px #000;
      }
      p {
        font-size: 12pt;
        margin: 2mm 0;
        font-weight: normal;
        -webkit-text-fill-color: #000 !important;
        -webkit-text-stroke: 1px #000;
      }
      @page {
        margin: 0;
      }
    </style>
  </head>
  <body>
    <div id="root"></div>
    <script>
      const { ipcRenderer } = require('electron');
      
      // Log a message when the DOM is ready
      document.addEventListener('DOMContentLoaded', () => {
        console.log("Worker loaded. Ready to print receipt.");
      });

      // Listen for receipt data sent with the event name "workerSendToPrint"
      ipcRenderer.on('workerSendToPrint', (_event, data) => {
        // Convert the data to HTML markup
        const htmlContent = `
          <h1>${data.title}</h1>
          <p>${data.itemText}</p>
          <p>Date: ${data.dateTime}</p>
          <p>BTW: ${data.btw} %</p>
          <p>Total: ${data.amount} €</p>
          <p>Method: ${data.method}</p>
          <p>${data.goodBy}</p>
        `;
        document.getElementById('root').innerHTML = htmlContent;
        ipcRenderer.send('workerDoneLoading');
      });
    </script>
  </body>
</html>
