<div class="flex-grow-1 align-items-stretch">
  <main aria-label="Report main content" class="d-flex flex-column flex-grow-1">
    <div class="row m-0 py-4 px-3 d-flex" style="flex-wrap: nowrap">
      <div id="aboutScanDiv" class="pe-md-2 d-flex" style="flex: 1; flex-basis: 300px">
        <div id="scanabout-compliance-card" class="card h-100" style="width: -webkit-fill-available">
          <div class="card-body"><%- include("components/summaryScanAbout") %></div>
        </div>
      </div>
      <div id="scanResultsDiv" class="ps-md-2" style="flex: 2; margin-left: 10px">
        <div id="summary-scan-results-card" class="card h-100">
          <div class="card-body">
            <h2>Scan results</h2>
            <div class="d-flex justify-content-between align-items-center">
              <span class="fw-bold"> WCAG (A & AA) Passes </span>
              <span aria-label="Pass percentage" class="ms-2">
                <%= wcagPassPercentage.totalWcagChecksAA - wcagPassPercentage.totalWcagViolationsAA  %> /  <%= wcagPassPercentage.totalWcagChecksAA %> of automated checks
              </span>
            </div>
            <div class="wcag-compliance-passes-bar mb-5 d-flex">
              <svg width="500" role="none" height="6" fill="none" xmlns="http://www.w3.org/2000/svg"
                style="display: flex; width: 100%; position: absolute">
                <rect width="100%" height="10" rx="3" fill="#E7ECEE" style="justify-content: left"></rect>
                <rect width="<%= wcagPassPercentage.passPercentageAA %>%" height="6" rx="3" fill="#9021a6" style="">
                </rect>
              </svg>
            </div>
            <ul class="unbulleted-list">
              <% Object.keys(items).forEach((category)=> { %> <%- include("components/summaryScanResults", { category:
                  category }) %>
                  <% }) %>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <div class="mx-3">
      <h2 class="mb-2">Summary of issues:</h2>
      <p>
        Only 
        <a href="https://go.gov.sg/oobee-details" target="_blank">20 WCAG 2.2 Success Criteria (A & AA)</a>
        can be automatically checked so
        <a aria-label="Manual testing guide" href="https://go.gov.sg/a11y-manual-testing" target="_blank">manual
          testing</a>
        is still required. For more details, please refer to the HTML report.
      </p>
    </div>
    <%- include("components/summaryTable") %>
  </main>
</div>
