// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`ScreenshotsModal creates snapshot 1`] = `
<DocumentFragment>
  <button
    aria-label="Open screenshots modal"
    class="btn fw-bold text-uppercase position-relative btn-outline-secondary btn-sm text-nowrap w-100"
    type="button"
  >
    <div
      class="d-flex align-items-center justify-content-center"
    >
      <svg
        class="me-2"
        fill="currentColor"
        height="1em"
        stroke="currentColor"
        stroke-width="0"
        viewBox="0 0 24 24"
        width="1em"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M20 2H8c-1.103 0-2 .897-2 2v12c0 1.103.897 2 2 2h12c1.103 0 2-.897 2-2V4c0-1.103-.897-2-2-2zM8 16V4h12l.002 12H8z"
        />
        <path
          d="M4 8H2v12c0 1.103.897 2 2 2h12v-2H4V8z"
        />
        <path
          d="m12 12-1-1-2 3h10l-4-6z"
        />
      </svg>
      <span>
        Screenshots
      </span>
    </div>
  </button>
  <div
    class="position-fixed overflow-hidden p-3 top-0 bottom-0 start-0 end-0 modal"
    role="dialog"
  >
    <div
      class="position-absolute closeWrapper"
    >
      <button
        aria-label="Close"
        class="btn-close btn-close-white opacity-100 fs-5 close"
        type="button"
      />
    </div>
    <div
      class="d-flex flex-column h-100 w-100"
    >
      <div
        class="d-flex flex-column h-100 w-100 align-items-center unselectable"
      >
        <div
          class="d-flex flex-grow-1 w-100 pt-3 minHeight"
        >
          <div
            class="d-flex flex-row align-items-center justify-content-between px-3 pt-3 h-100 w-100"
          >
            <div
              class="me-3"
            >
              <button
                aria-label="Go to previous screenshot"
                class="btn btn-link fs-2 arrowBtn disabled disabled"
                disabled=""
              >
                <svg
                  fill="currentColor"
                  height="1em"
                  stroke="currentColor"
                  stroke-width="0"
                  viewBox="0 0 512 512"
                  width="1em"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    d="M256 504C119 504 8 393 8 256S119 8 256 8s248 111 248 248-111 248-248 248zm28.9-143.6L209.4 288H392c13.3 0 24-10.7 24-24v-16c0-13.3-10.7-24-24-24H209.4l75.5-72.4c9.7-9.3 9.9-24.8.4-34.3l-11-10.9c-9.4-9.4-24.6-9.4-33.9 0L107.7 239c-9.4 9.4-9.4 24.6 0 33.9l132.7 132.7c9.4 9.4 24.6 9.4 33.9 0l11-10.9c9.5-9.5 9.3-25-.4-34.3z"
                  />
                </svg>
              </button>
            </div>
            <div
              class="h-100 w-100"
            >
              <div
                class="position-absolute top-0 bottom-0 start-0 end-0 p-5 wrapper bg-transparent"
              >
                <div
                  class="d-flex flex-row align-items-center justify-content-center w-100 h-100"
                >
                  <div
                    class="spinner-border text-primary spinner"
                    role="status"
                  >
                    <span
                      class="visually-hidden"
                    >
                      Loading...
                    </span>
                  </div>
                </div>
              </div>
              <div
                class="d-flex flex-column justify-content-center align-items-center h-100 w-100"
              >
                <div
                  class="d-flex flex-column h-100 w-100 align-items-center"
                >
                  <div
                    class="flex-grow-1 d-flex align-items-center justify-content-center pb-1 position-relative w-100 minHeight"
                  >
                    <div
                      class="h-100 w-100 position-relative"
                    >
                      <img
                        alt="Screenshot: Home page"
                        aria-hidden="true"
                        class="mh-100 mw-100 border border-3 position-relative top-50 start-50 translate-middle image"
                        src="https://artifacthub.github.io/hub/screenshots/screenshot1.jpg"
                      />
                    </div>
                  </div>
                  <div
                    class="text-truncate text-center mt-4 imgTitle"
                  >
                    Home page
                  </div>
                </div>
              </div>
            </div>
            <div
              class="ms-3"
            >
              <button
                aria-label="Go to next screenshot"
                class="btn btn-link fs-2 arrowBtn"
              >
                <svg
                  fill="currentColor"
                  height="1em"
                  stroke="currentColor"
                  stroke-width="0"
                  viewBox="0 0 512 512"
                  width="1em"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    d="M256 8c137 0 248 111 248 248S393 504 256 504 8 393 8 256 119 8 256 8zm-28.9 143.6l75.5 72.4H120c-13.3 0-24 10.7-24 24v16c0 13.3 10.7 24 24 24h182.6l-75.5 72.4c-9.7 9.3-9.9 24.8-.4 34.3l11 10.9c9.4 9.4 24.6 9.4 33.9 0L404.3 273c9.4-9.4 9.4-24.6 0-33.9L271.6 106.3c-9.4-9.4-24.6-9.4-33.9 0l-11 10.9c-9.5 9.6-9.3 25.1.4 34.4z"
                  />
                </svg>
              </button>
            </div>
          </div>
        </div>
        <div
          class="my-3 text-center"
        >
          <button
            aria-label="Go to screenshot number 1"
            class="btn btn-link px-1 disabled opacity-100 disabledDotBtn"
            data-testid="dotBtn"
            disabled=""
          >
            <svg
              fill="currentColor"
              height="1em"
              stroke="currentColor"
              stroke-width="0"
              viewBox="0 0 8 16"
              width="1em"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M0 8c0-2.2 1.8-4 4-4s4 1.8 4 4-1.8 4-4 4-4-1.8-4-4z"
                fill-rule="evenodd"
              />
            </svg>
          </button>
          <button
            aria-label="Go to screenshot number 2"
            class="btn btn-link px-1 dotBtn"
            data-testid="dotBtn"
          >
            <svg
              fill="currentColor"
              height="1em"
              stroke="currentColor"
              stroke-width="0"
              viewBox="0 0 8 16"
              width="1em"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M0 8c0-2.2 1.8-4 4-4s4 1.8 4 4-1.8 4-4 4-4-1.8-4-4z"
                fill-rule="evenodd"
              />
            </svg>
          </button>
          <button
            aria-label="Go to screenshot number 3"
            class="btn btn-link px-1 dotBtn"
            data-testid="dotBtn"
          >
            <svg
              fill="currentColor"
              height="1em"
              stroke="currentColor"
              stroke-width="0"
              viewBox="0 0 8 16"
              width="1em"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M0 8c0-2.2 1.8-4 4-4s4 1.8 4 4-1.8 4-4 4-4-1.8-4-4z"
                fill-rule="evenodd"
              />
            </svg>
          </button>
          <button
            aria-label="Go to screenshot number 4"
            class="btn btn-link px-1 dotBtn"
            data-testid="dotBtn"
          >
            <svg
              fill="currentColor"
              height="1em"
              stroke="currentColor"
              stroke-width="0"
              viewBox="0 0 8 16"
              width="1em"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M0 8c0-2.2 1.8-4 4-4s4 1.8 4 4-1.8 4-4 4-4-1.8-4-4z"
                fill-rule="evenodd"
              />
            </svg>
          </button>
          <button
            aria-label="Go to screenshot number 5"
            class="btn btn-link px-1 dotBtn"
            data-testid="dotBtn"
          >
            <svg
              fill="currentColor"
              height="1em"
              stroke="currentColor"
              stroke-width="0"
              viewBox="0 0 8 16"
              width="1em"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M0 8c0-2.2 1.8-4 4-4s4 1.8 4 4-1.8 4-4 4-4-1.8-4-4z"
                fill-rule="evenodd"
              />
            </svg>
          </button>
          <button
            aria-label="Go to screenshot number 6"
            class="btn btn-link px-1 dotBtn"
            data-testid="dotBtn"
          >
            <svg
              fill="currentColor"
              height="1em"
              stroke="currentColor"
              stroke-width="0"
              viewBox="0 0 8 16"
              width="1em"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M0 8c0-2.2 1.8-4 4-4s4 1.8 4 4-1.8 4-4 4-4-1.8-4-4z"
                fill-rule="evenodd"
              />
            </svg>
          </button>
        </div>
      </div>
    </div>
  </div>
</DocumentFragment>
`;
