<div class="scan-results__container">
  <div class="scan-results__brief">
    <p class="scan-results__brief-issues-title">
      <img src="/modules/custom/acquia_optimize/images/warning.svg" alt="Warning symbol">
      6 issues total detected
    </p>
    <p>Quick Scan completed</p>
    <p class="scan-results__brief-scanned-date">Scanned date: 15/01/2025</p>
      </div>
  <div class="scan-results__details">
    <ul>
      <li>
        <div id="accessibility-results" class="scan-results__details-container">
          <div class="scan-results__label">
            <span>
              <img src="/modules/custom/acquia_optimize/images/user-square.svg" alt="Accessibility symbol">
              Accessibility
            </span>
            <span>
              <img src="/modules/custom/acquia_optimize/images/warning.svg" alt="Warning symbol">
              4
            </span>
          </div>
          <div class="scan-results__expansion">
                                          <div id="a-issues" class="scan-results__expansion__details">
                  <span>
                    <span class="highlighted-letter">A</span>
                    Failing A checks
                  </span>
                  <span>
                    View 4 issues
                    <img src="/modules/custom/acquia_optimize/images/right-arrow.svg" alt="Right arrow">
                  </span>
                </div>
                                                                                        </div>
        </div>
      </li>
      <li>
        <div class="scan-results__details-container">
          <div class="scan-results__label">
            <span>
              <img src="/modules/custom/acquia_optimize/images/file-check.svg" alt="Readability symbol">
              Readability
            </span>
            <span>
              Na
            </span>
          </div>
        </div>
      </li>
      <li>
        <div id="seo-results" class="scan-results__details-container">
          <div class="scan-results__label">
            <span>
              <img src="/modules/custom/acquia_optimize/images/chart-line.svg" alt="SEO symbol">
              SEO
            </span>
            <span>
              <img src="/modules/custom/acquia_optimize/images/warning.svg" alt="Warning symbol">
              2
            </span>
          </div>
        </div>
      </li>
      <li>
        <div class="scan-results__details-container">
          <div class="scan-results__label">
            <span>
              <img src="/modules/custom/acquia_optimize/images/lock.svg" alt="Lock symbol">
              Data Privacy
            </span>
            <span>
              <img src="/modules/custom/acquia_optimize/images/check-circle.svg" alt="Warning symbol">
              0
            </span>
          </div>
        </div>
      </li>
    </ul>
  </div>
</div>
<div class="scan-results__seo-container">
  <p class="acquia-optimize-back-button scan-results__back-button">
    <img src="/modules/custom/acquia_optimize/images/left-arrow.svg" alt="Back arrow">
    Quick Scan Results
  </p>
  <div class="scan-results__seo-container__title">
    <span>SEO Opportunities</span>
    <span>2</span>
  </div>
  <ul>
    <li>
      <span>High impact SEO Opportunities</span>
      <span>0</span>
    </li>
    <li>
      <span>Medium impact SEO Opportunities</span>
      <span>1</span>
    </li>
    <li>
      <span>Low impact SEO Opportunities</span>
      <span>1</span>
    </li>
    <li>
      <span>Technical SEO Opportunities</span>
      <span>0</span>
    </li>
    <li>
      <ul>
                      <li>
              <span>
                <span class="classification-label">alert</span>
                <span>Missing H1</span>
              </span>
              <span>1</span>
            </li>
                      <li>
              <span>
                <span class="classification-label">info</span>
                <span>Missing META description</span>
              </span>
              <span>1</span>
            </li>
                </ul>
    </li>
  </ul>
</div>
<div class="issues-container scan-results__accessibility-container-a-issues">
    <p class="acquia-optimize-back-button scan-results__back-button">
      <img src="/modules/custom/acquia_optimize/images/left-arrow.svg" alt="Back arrow">
      Quick Scan Results
    </p>
    <p class="issues-title">Level A Accessibility Issues</p>
    <ul>
              <li class="issue-list__item a-issue-1">
          <span>Image has non-empty accessible name</span>
          <span>2</span>
        </li>
              <li class="issue-list__item a-issue-2">
          <span>Heading has non-empty accessible name</span>
          <span>2</span>
        </li>
          </ul>
  </div>
  <div class="issues-container a-issue-1__drilldown">
      <p class="acquia-optimize-back-button accessibility-issues__back-button">
        <img src="/modules/custom/acquia_optimize/images/left-arrow.svg" alt="Back arrow">
        Level A Accessibility Issues
      </p>
      <p class="issues-title">Image has non-empty accessible name</p>
      <ul>
                  <li>
            <code>&lt;img&gt;</code>
          </li>
                  <li>
            <code>&lt;img&gt;</code>
          </li>
              </ul>
    </div>
    <div class="issues-container a-issue-2__drilldown">
      <p class="acquia-optimize-back-button accessibility-issues__back-button">
        <img src="/modules/custom/acquia_optimize/images/left-arrow.svg" alt="Back arrow">
        Level A Accessibility Issues
      </p>
      <p class="issues-title">Heading has non-empty accessible name</p>
      <ul>
                  <li>
            <code>&lt;h1&gt;&lt;/h1&gt;</code>
          </li>
                  <li>
            <code>&lt;h1&gt;&lt;/h1&gt;</code>
          </li>
              </ul>
    </div>
    <div class="issues-container scan-results__accessibility-container-aa-issues">
    <p class="acquia-optimize-back-button scan-results__back-button">
      <img src="/modules/custom/acquia_optimize/images/left-arrow.svg" alt="Back arrow">
      Quick Scan Results
    </p>
    <p class="issues-title">Level AA Accessibility Issues</p>
    <ul>
          </ul>
  </div>
  <div class="issues-container scan-results__accessibility-container-aaa-issues">
    <p class="acquia-optimize-back-button scan-results__back-button">
      <img src="/modules/custom/acquia_optimize/images/left-arrow.svg" alt="Back arrow">
      Quick Scan Results
    </p>
    <p class="issues-title">Level AAA Accessibility Issues</p>
    <ul>
          </ul>
  </div>
  <script>
  document.querySelector('.acquia-optimize-quick-scan-button').value = 'Re-scan page';
</script>