blurts-server/views/scan.hbs

<main class="container">
  <div class="row scan-results">

    <div class="col-6 headline-col">
      {{#if scannedEmailId }} <!-- show the email address that was scanned -->
        <p id="scanned-email-address">Results for <span id="scannedEmail" data-scanned-email-id={{ scannedEmailId }} class="bold"></span></p>
      {{/if}}
      <h2 class="headline scan-results-headline">{{{ fluentNestedBold "guest-scan-results-headline" breachCount=foundBreaches.length }}}</h2>
    </div>
  </div>

  <div class="row">
    <div class="found-breaches">
      <!-- foundBreaches 1-4 -->
      {{#eachFromTo (getFoundBreaches) 0 4}}
        {{> breach-card cardClass="two-up drop-shadow"}}
      {{/eachFromTo}}

      {{#ifCompare foundBreaches.length ">" 4}}
        <!-- show all breaches button -->
        <div id="show-all-breaches-wrapper" class="col-12 show">
          <p class="txt-cntr">Currently showing <span class="bold">4</span> of <span class="bold">{{ foundBreaches.length }}</span> breaches.</p>
          <button id="show-all-breaches" class="util-btn light-btn" data-event-category="Show All Breaches">{{ getString "show-all-breaches" }}</button>
        </div>

      <!-- foundBreaches 4-foundBreaches.length -->
        <div id="additional-breaches" class="show-additional-breaches hide flx">
          {{#eachFromTo (getFoundBreaches) 4 foundBreaches.length}}
            {{> breach-card cardClass="two-up drop-shadow"}}
          {{/eachFromTo}}
        </div>

      {{/ifCompare}}
    </div>
  </div>
</main>

{{> sign-up-banners/scan-results-sign-up }}

{{> scan-another-email addClass="stacked"}}