<div class="d-flex flex-grow-1 align-items-stretch main-container">
  <%- include("components/screenshotLightbox") %>
  <main class="d-flex flex-grow-1" style="min-width: 0;">
    <section class="w-100 m-4" style="max-width: calc(100% - 3rem); box-sizing: border-box;">
      <%- include("components/header/SiteInfo") %>
      <div class="compliance-summary gap-4 mt-4">
        <div class="col card rounded"><%- include("components/wcagCompliance/WcagCompliance") %></div>
        <div class="col card rounded"><%- include("components/topTen") %></div>
      </div>
      <%- include("components/prioritiseIssues/PrioritiseIssues") %>
      <!-- jsOffMessage -->
      <p id="jsOffMessage" class="mx-3">
        Please open this file in a browser to experience the report's full functionality.
      </p>
      <%- include("components/allIssues/AllIssues") %>
      <div id="jsOn" class="d-none">
        <%- include("components/ruleModal/ruleOffcanvas") %>
        <p id="containsAISuggestions" class="d-none">Tooltip: Contains AI suggestions.</p>
        <p id="mustFixAriaDescription" class="d-none">Tooltip: <%= items.mustFix.description %></p>
        <p id="goodToFixAriaDescription" class="d-none">
          Tooltip: <%= items.goodToFix.description %>
        </p>
        <p id="passedAriaDescription" class="d-none">Tooltip: <%= items.passed.description %></p>
      </div>
    </section>
  </main>
</div>
<%- include("footer") %>
<%- include("components/header/aboutScanModal/AboutScanModal") %>
