<html lang='en'>
  <head>
    <style>
      @import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300;400;600&display=swap');
    </style>
    <meta charset='UTF-8' />
    <meta name='viewport' content='width=device-width, initial-scale=1.0' />
    <title>Scope Summary Report</title>

    <style>
      body {
        font-family: 'Source Sans Pro', Arial, sans-serif;
        background-color: #ffffff;
        padding: 25px;
        font-size: 14pt;
        font-weight: 400;
        color: #000;
      }

      .page {
        width: 100%;
        max-width: 750px;
        margin: auto;
        background: white;
        padding: 20px;
        border: 3px solid #0c2a72;
        box-sizing: border-box;
      }

      .header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 15px;
      }

      .logo {
        width: 100px;
        height: auto;
      }

      .title-box {
        padding: 6px 25px;
        font-weight: 600; /* SemiBold instead of 1000 */
        text-transform: uppercase;
        font-size: 18px; /* slightly smaller */
        text-align: center;
      }

      .empty-box {
        width: 120px;
        height: 40px;
        border: 2px solid #0c2a72;
      }

      table {
        width: 100%;
        border-collapse: collapse;
        font-size: 14px; /* smaller table text */
        margin-top: 5px;
      }

      /* Table headers */
      th {
        border: 1.6px solid black;
        padding: 5px;
        font-weight: 600; /* bold headers */
        color: black;
      }

      /* Table cells */
      td {
        border: 1.6px solid black;
        padding: 5px;
        font-weight: 400; /* normal weight */
        color: #333333; /* different color */
      }

      /* Ensure <strong> inside td stays normal weight */
      td strong {
        font-weight: 400;
        color: #333333;
      }

      .section-title {
        font-size: 13px; /* smaller headings */
        font-weight: 600; /* SemiBold */
        margin-top: 20px;
        margin-bottom: 5px;
      }

      .remarks {
        height: 100px; /* slightly smaller */
        border: 1.6px solid black;
        margin-top: 5px;
        font-size: 11px;
        padding: 5px;
      }

      .footer {
        text-align: center;
        font-size: 10pt; /* smaller footer */
        margin-top: 15px;
      }
    </style>
  </head>

  <body>
    <div class='page'>
      <!-- HEADER TOP AREA -->
      <div class='header'>
        <img
          src='http://localhost:3000/static/logo.png'
          class='logo'
          alt='logo'
        />
        <div class='title-box'>SCOPE SUMMARY REPORT</div>
        <div class='empty-box'></div>
      </div>

      <!-- MAIN DETAILS TABLE -->
      <table>
        <tr>
          <td><strong>Company Name</strong></td>
          <td colspan='3'>{{company.name}}</td>
        </tr>
        <tr>
          <td><strong>Company Address</strong></td>
          <td colspan='3'>{{company.address}}</td>
        </tr>
        <tr>
          <td><strong>Contact Person</strong></td>
          <td>{{company.contact_person}}</td>
          <td><strong>Designation</strong></td>
          <td>{{company.designation}}</td>
        </tr>
        <tr>
          <td><strong>Email Address</strong></td>
          <td>{{company.email}}</td>
          <td><strong>Mobile No.</strong></td>
          <td>{{company.mobile}}</td>
        </tr>
        <tr>
          <td><strong>Telephone</strong></td>
          <td>{{company.telephone}}</td>
          <td><strong>Fax No.</strong></td>
          <td>{{company.fax}}</td>
        </tr>
        <tr>
          <td><strong>STANDARDS</strong></td>
          <td>
            {{#each company.standardsList}}
              {{this}}{{#unless @last}}, {{/unless}}
            {{/each}}
          </td>
          <td><strong>Validity</strong></td>
          <td>
            ☑ yearly surveillance<br />
            □ 3 years
          </td>
        </tr>
        <tr>
          <td><strong>Certification Body</strong></td>
          <td>{{company.certification_body}}</td>
          <td><strong>Accreditation</strong></td>
          <td>{{company.accreditation}}</td>
        </tr>
      </table>

      <!-- SCOPE OF WORK -->
      <div class='section-title'>Scope of Work:</div>
      <p style='margin: 0 0 10px 0;'>{{company.scope_of_work}}</p>

      <!-- TABLE 2 -->
      <table>
        <tr>
          <th></th>
          <th>Audit Date</th>
          <th>ANZIC Code</th>
          <th>Auditor</th>
          <th>Technical Expert</th>
        </tr>
        {{#each stages}}
          <tr>
            <td>{{stageName}}</td>
            <td>{{auditDate}}</td>
            <td></td>
            <td>{{auditBy.firstName}} {{auditBy.lastName}}</td>
            <td></td>
          </tr>
        {{/each}}
      </table>

      <!-- REMARKS -->
      <div class='section-title'>Remarks:</div>
      <div class='remarks'></div>

      <!-- FOOTER -->
      <div class='footer'>
        P.O. BOX 26826 Abu Dhabi, UAE, Tel No.: +971-26712161, Fax No.:
        +971-2-6713982
      </div>
    </div>
  </body>
</html>