<div id="wcag-compliance-card" class="card h-100 p-3">
  <h2 class="mb-0">WCAG Compliance</h2>
  <div class="wcag-compliance-passes-panel">
    <div class="d-flex justify-content-between align-items-center">
      <div class="d-flex align-items-center">
        <span class="fw-bold">WCAG (A & AA) Passes</span>
        <button
          aria-label="More on automated testing WCAG coverage"
          id="wcagModalToggle"
          class="ms-2"
          data-bs-toggle="modal"
          data-bs-target="#wcagModal"
        >
          <svg
            width="14"
            height="14"
            viewBox="0 0 14 14"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M11.9528 2.05329C9.22079 -0.68205 4.78867 -0.68477 2.0533 2.04718C-0.682042 4.7792 -0.684795 9.21135 2.04722 11.9467C4.77917 14.6821 9.21135 14.6848 11.9467 11.9528C14.682 9.22085 14.6848 4.78863 11.9528 2.05329ZM7.00216 11.2406C6.6319 11.2406 6.33174 10.9405 6.33174 10.5702C6.33174 10.1999 6.63187 9.89976 7.00216 9.89976C7.37243 9.89976 7.67259 10.1999 7.67259 10.5702C7.67255 10.9405 7.37243 11.2406 7.00216 11.2406ZM8.09214 7.20401C7.70918 7.42788 7.67645 7.7033 7.6748 8.49691C7.6747 8.54938 7.67453 8.60233 7.67423 8.65558C7.67185 9.03068 7.36712 9.33312 6.99253 9.33312C6.99105 9.33312 6.98957 9.33312 6.98813 9.33312C6.61159 9.33074 6.3083 9.02356 6.31066 8.64699C6.31099 8.59568 6.31109 8.54468 6.31119 8.49415C6.31287 7.67852 6.31492 6.66352 7.40395 6.02694C8.27777 5.51613 8.3879 5.18059 8.28543 4.74029C8.16503 4.2231 7.69273 4.08907 7.32418 4.1312C7.20042 4.14541 6.58322 4.24724 6.58322 4.85783C6.58322 5.23431 6.27795 5.5396 5.90141 5.5396C5.52487 5.5396 5.21964 5.23431 5.21964 4.85783C5.21964 3.76416 6.02107 2.90831 7.16859 2.77656C8.35043 2.64099 9.35515 3.32135 9.61338 4.4312C9.99939 6.08915 8.61379 6.89911 8.09214 7.20401Z"
              fill="#c9c8c6"
            />
          </svg>
        </button>
      </div>
          <span aria-label="Pass percentage" class="ms-2"><%= wcagPassPercentage %>%</span>
    </div>
    <div class="wcag-compliance-passes-bar">
      <div
        class="wcag-compliance-passes-bar-progress"
        style="width: <%= wcagPassPercentage %>%"
      ></div>
    </div>
  </div>
</div>
<div
  id="wcagModal"
  class="modal fade"
  tabindex="-1"
  aria-labelledby="wcagModalLabel"
  aria-hidden="true"
>
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h3 class="modal-title fw-bold" id="wcagModalLabel">Automated Testing WCAG Coverage</h3>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <div>
          Only 19 WCAG 2.2 Success Criteria can be checked reasonably through automated testing:
        </div>
        <div class="accordion my-3" id="wcagLinksAccordion">
          <div class="accordion-item">
            <div class="accordion-header" id="wcagLinksAccordionTitle">
              <button
                class="accordion-button collapsed"
                type="button"
                data-bs-toggle="collapse"
                data-bs-target="#wcagLinksAccordionContent"
                aria-expanded="false"
                aria-controls="wcagLinksAccordionContent"
              >
                19 WCAG Success Criteria (A & AA)
              </button>
            </div>
            <div
              id="wcagLinksAccordionContent"
              class="accordion-collapse collapse"
              aria-labelledby="wcagLinksAccordionTitle"
              data-bs-parent="#accordionExample"
            >
              <div class="accordion-body">
                <ul id="wcagLinksList">
                  <% Object.entries(wcagLinks).forEach(link => { %>
                  <li>
                    <a href="<%= link[1] %>" target="_blank"><%= link[0] %></a>
                  </li>
                  <% }) %>
                </ul>
              </div>
            </div>
          </div>
        </div>
        <div>
          <strong>Manual testing is still recommended</strong> as they involve subjective judgements
          and human interpretation, which cannot be fully automated.
        </div>
      </div>
    </div>
  </div>
</div>