<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>Étiquette Produit</title>
  <style>
    @page {
      size: 120mm 180mm;
      margin: 0;
    }

    body {
      margin: 0;
      padding: 0;
      font-family: Arial, sans-serif;
    }

    .title {
      font-size: 12px;
    }

    .etiquette {
      width: 120mm;
      height: 180mm;
      border: 1px solid #000;
      padding: 3mm;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    .section {
      margin-bottom: 8px;
    }

    .bold { font-weight: bold; }
    .big { font-size: 30px; }
    .barcode {
      width: 100px;
      height: 100px;
    }

    .grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 5px;
    }

    .line {
      border-top: 1px solid black;
      margin: 5px 0;
    }

    .bottom {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
	strong{
    font-size: 18px;
    }
  </style>
</head>
<body>
  <div class="etiquette">
    <div class="section">
      <div><strong>Société Oriental Snacks</strong></div>
      <div>Lot 16A Z.I. Mghira 3 Ben Arous</div>
    </div>
    <div class="line"></div>
    <div class="section">
      <div class="title">PRODUIT</div>
      <div><strong>{$productName}</strong></div>
      <div>{$codeBarre}</div>
      <div>{$colisage} sachets x {$qte} cartons</div>
    </div>
    <div class="line"></div>
    <div class="section grid">
      <div><span class="title">N° de lot</span><br><span class="big bold">{$ref}</span></div>
      <div><span class="title">DDM</span><br><span class="big bold">{$dlc}</span></div>
    </div>
    <div class="line"></div>
    <div class="section grid">
      <div><span class="title">TYPE</span><br><span class="big bold">{$type}</span></div>
      <div><span class="title">PALETTE N°</span><br><span class="big bold">{$palette}</span></div>
    </div>
    <div class="line"></div>
    <div class="bottom">
      <div>
        <div><span class="title">DF</span><br><strong>{$date}</strong></div>
        <div><span>EM{$user}</span></div>
        <div><span>{$pa}</span></div>
      </div>
      <img src="https://api.qrserver.com/v1/create-qr-code/?data={$ref}&size=150x150" class="barcode" alt="{$ref}">
    </div>
  </div>
</body>
</html>
