<div id="failedCriteriaCard" class="mt-3">
  <div class="wcag-row-column">
    <div>
      <h3 class="wcag-title">Failed Criteria (<span id="failedCriteriaCount">0</span>)</h3>
    </div>

    <ul id="failedCriteriaList" class="unbulleted-list">
      <!-- dynamically populated -->
    </ul>

    <button
      id="viewAllFailedCriteria"
      type="button"
      class="view-all-link"
      data-bs-toggle="modal"
      data-bs-target="#failedCriteriaModal"
      hidden
    >
      View all failed criteria
      <svg width="8" height="10" viewBox="0 0 6 10" aria-hidden="true" focusable="false">
        <path
          d="M0.726562 7.06L3.7799 4L0.726562 0.94L1.66656 0L5.66656 4L1.66656 8L0.726562 7.06Z"
          fill="#5735DF"
        />
      </svg>
    </button>
  </div>
</div>

<!-- Failed Criteria Modal -->
<div id="failedCriteriaModal" class="modal fade" tabindex="-1" aria-labelledby="failedCriteriaModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
    <div class="modal-content">
      <div class="modal-header modal-title mt-2">
        <h1 class="modal-title fw-bold" id="failedCriteriaModalLabel">
          Failed Criteria (<span id="failedCriteriaModalCount">0</span>)
        </h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <ul id="failedCriteriaModalList" class="unbulleted-list">
          <!-- dynamically populated -->
        </ul>
      </div>
    </div>
  </div>
</div>
