async domCreateCarouselSlideCollection()

in source/webapp/src/lib/js/imagePreview.js [433:504]
67 lines of code
1 McCabe index (conditional complexity)

  async domCreateCarouselSlideCollection(card, active = '') {
    const svg = BasePreview.createSvgImage('face collection');

    const element = `
    <div class="carousel-item ${active}" id="carousel-face-collection">
      <img class="d-block w-100" src="${svg}" alt="FaceCollection">
      <div class="carousel-content d-none d-md-block">
        <div class="container">
          <div class="row">
            <!-- description -->
            <div class="col-sm-9 px-0">
              <p>
                Click on <strong>Snapshot</strong> to index a face.<br>
                By indexing a face and adding it to your Amazon Rekognition collection, it greatly improves the face matching process and as a result, it yields a much better, accurate result.
              </p>
              <p>
                When you finish indexing faces, click on <strong>Re-analyze</strong> to re-process the analysis.
              </p>
            </div>

            <!-- snapshot and re-analyze -->
            <div class="col-sm mt-auto mb-auto px-0">
              <div>
                <button
                  type="button"
                  class="btn btn-sm btn-primary float-right mb-3"
                  data-action="snapshot">
                  Snapshot
                </button>
                <button
                  type="button"
                  class="btn btn-sm btn-success float-right mb-3"
                  data-action="re-analyze">
                  Re-analyze
                </button>
              </div>
            </div>
          </div>

          <!-- faces being indexed -->
          <div class="row">
            <div class="col-sm-8 px-0">
              <span class="lead mt-2 mb-2 d-block">Indexed faces</span>
            </div>
          </div>
          <div class="row" id="${ImagePreview.Constants.Id.IndexedFaceCollection}">
          </div>

          <!-- faces queued for GT -->
          <div class="row">
            <div class="col-sm-6 px-0">
              <span class="lead mt-2 mb-2 d-block">Queued faces</span>
            </div>
            <div class="col-sm mt-auto mb-auto px-0">
              <button
                type="button"
                class="btn btn-primary btn-sm float-right collapse"
                data-action="send-to-ground-truth">
                Send to Ground Truth
              </button>
            </div>
          </div>
          <div class="row" id="${ImagePreview.Constants.Id.QueuedFaceCollection}">
          </div>
        </div>
        <div class="mb-5"></div>
      </div>
    </div>
    `;

    return element;
  }