<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Certificate of Compliance &amp; Conformity</title>
  <link rel="stylesheet" href="certificate.css">
</head>
<body>
  <main class="certificate-page" aria-label="Certificate of Compliance and Conformity">
    <section class="certificate-sheet">
      <div class="ornamental-border" aria-hidden="true"></div>
      <img class="certificate-watermark" src="{{WATERMARK_LOGO}}" alt="" aria-hidden="true">

      <header class="certificate-header">
        <img class="certificate-brand-logo" src="{{HEADER_LOGO}}" alt="SAMCON Associates Private Limited">
        <h1>Certificate</h1>
        <p class="certificate-kicker">of Compliance &amp; Conformity</p>
        <p class="certificate-type">{{CATEGORY}}</p>
      </header>

      <table class="certificate-details" aria-label="Certificate details">
        <thead>
          <tr>
            <th scope="col">Particulars</th>
            <th scope="col">Details</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th scope="row">Reference No.</th>
            <td>{{REFERENCE_NO}}</td>
          </tr>
          <tr>
            <th scope="row">Door Certificate No.</th>
            <td>{{DOOR_CERTIFICATE_NO}}</td>
          </tr>
          <tr>
            <th scope="row">Date</th>
            <td>{{DATE}}</td>
          </tr>
          <tr>
            <th scope="row">Client</th>
            <td>{{CLIENT}}</td>
          </tr>
          <tr>
            <th scope="row">Address</th>
            <td>{{PROJECT_SITE}}</td>
          </tr>
          <tr>
            <th scope="row">Area / Site</th>
            <td>{{AREA}}</td>
          </tr>
          <tr>
            <th scope="row">Manufacturing Date</th>
            <td>{{MANUFACTURING_DATE}}</td>
          </tr>
          <tr>
            <th scope="row">Fire Rating</th>
            <td>{{FIRE_RATING}}</td>
          </tr>
          <tr>
            <th scope="row">Standards Complied</th>
            <td>{{STANDARDS_COMPLIED}}</td>
          </tr>
          <tr>
            <th scope="row">Validity Period</th>
            <td>{{VALIDITY_PERIOD}}</td>
          </tr>
          <tr>
            <th scope="row">Current Status</th>
            <td>{{CURRENT_STATUS}}</td>
          </tr>
        </tbody>
      </table>

      <p class="certificate-note"><strong>Note:</strong> This is a system-generated document and hence does not require any signature.</p>

      <div class="certificate-verification">
        <div class="qr-slot" aria-label="Verification QR code">{{QR_CODE}}</div>
        <img class="seal" src="{{SEAL_IMAGE}}" alt="SAMCON Associates seal">
      </div>
      <footer class="certificate-footer" aria-label="SAMCON Associates contact information">
        <img src="{{FOOTER_IMAGE}}" alt="SAMCON Associates factory address and contact information">
      </footer>
    </section>
  </main>
  <script>
  (function () {
    var body = document.body;
    if (!body.classList || body.classList.contains('certificate-export')) {
      return;
    }

    var forceFit = body.classList.contains('certificate-fit');
    var sheetWidth = 210 / 25.4 * 96;
    var sheetHeight = 297 / 25.4 * 96;

    function fitCertificate() {
      var viewportWidth = document.documentElement.clientWidth || window.innerWidth || 360;
      var viewportHeight = document.documentElement.clientHeight || window.innerHeight || 640;
      var availableWidth = Math.max(240, viewportWidth - 16);
      var availableHeight = Math.max(320, viewportHeight - 16);
      var scale = Math.min(1, availableWidth / sheetWidth, availableHeight / sheetHeight);
      var shouldFit = forceFit || scale < .995;
      if (!shouldFit) {
        body.classList.remove('certificate-fit');
        body.style.removeProperty('--certificate-fit-width');
        body.style.removeProperty('--certificate-fit-scale');
        body.style.removeProperty('--certificate-fit-height');
        return;
      }

      var fitWidth = Math.ceil(sheetWidth * scale);
      body.classList.add('certificate-fit');
      body.style.setProperty('--certificate-fit-width', fitWidth + 'px');
      body.style.setProperty('--certificate-fit-scale', scale.toFixed(4));
      body.style.setProperty('--certificate-fit-height', Math.ceil(sheetHeight * scale) + 'px');
    }

    fitCertificate();
    window.addEventListener('resize', fitCertificate);
  })();
  </script>
</body>
</html>
