// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing

exports[`CreateSecretStorageDialog handles the happy path 1`] = `
<div>
  <div
    data-focus-guard="true"
    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
    tabindex="0"
  />
  <div
    aria-labelledby="mx_BaseDialog_title"
    class="mx_CreateSecretStorageDialog"
    data-focus-lock-disabled="false"
    role="dialog"
    tabindex="-1"
  >
    <div
      class="mx_Dialog_header"
    >
      <h1
        class="mx_Heading_h3 mx_Dialog_title mx_CreateSecretStorageDialog_centeredTitle"
        id="mx_BaseDialog_title"
      >
        Set up Secure Backup
      </h1>
    </div>
    <div>
      <form>
        <p
          class="mx_CreateSecretStorageDialog_centeredBody"
        >
          Safeguard against losing access to encrypted messages & data by backing up encryption keys on your server.
        </p>
        <div
          class="mx_CreateSecretStorageDialog_primaryContainer"
          role="radiogroup"
        >
          <label
            class="mx_StyledRadioButton mx_StyledRadioButton_enabled mx_StyledRadioButton_checked mx_StyledRadioButton_outlined"
          >
            <input
              checked=""
              name="keyPassphrase"
              type="radio"
              value="key"
            />
            <div>
              <div />
            </div>
            <div
              class="mx_StyledRadioButton_content"
            >
              <div
                class="mx_CreateSecretStorageDialog_optionTitle"
              >
                Generate a Recovery Key
              </div>
              <div>
                We'll generate a Recovery Key for you to store somewhere safe, like a password manager or a safe.
              </div>
            </div>
            <div
              class="mx_StyledRadioButton_spacer"
            />
          </label>
          <label
            class="mx_StyledRadioButton mx_StyledRadioButton_enabled mx_StyledRadioButton_outlined"
          >
            <input
              name="keyPassphrase"
              type="radio"
              value="passphrase"
            />
            <div>
              <div />
            </div>
            <div
              class="mx_StyledRadioButton_content"
            >
              <div
                class="mx_CreateSecretStorageDialog_optionTitle"
              >
                Enter a Security Phrase
              </div>
              <div>
                Use a secret phrase only you know, and optionally save a Recovery Key to use for backup.
              </div>
            </div>
            <div
              class="mx_StyledRadioButton_spacer"
            />
          </label>
        </div>
        <div
          class="mx_Dialog_buttons"
        >
          <span
            class="mx_Dialog_buttons_row"
          >
            <button
              data-testid="dialog-cancel-button"
              type="button"
            >
              Cancel
            </button>
            <button
              class="mx_Dialog_primary"
              data-testid="dialog-primary-button"
              type="button"
            >
              Continue
            </button>
          </span>
        </div>
      </form>
    </div>
  </div>
  <div
    data-focus-guard="true"
    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
    tabindex="0"
  />
</div>
`;

exports[`CreateSecretStorageDialog handles the happy path 2`] = `
<div>
  <div
    data-focus-guard="true"
    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
    tabindex="0"
  />
  <div
    aria-labelledby="mx_BaseDialog_title"
    class="mx_CreateSecretStorageDialog"
    data-focus-lock-disabled="false"
    role="dialog"
    tabindex="-1"
  >
    <div
      class="mx_Dialog_header"
    >
      <h1
        class="mx_Heading_h3 mx_Dialog_title"
        id="mx_BaseDialog_title"
      >
        Save your Recovery Key
      </h1>
    </div>
    <div>
      <div>
        <p>
          Store your Recovery Key somewhere safe, like a password manager or a safe, as it's used to safeguard your encrypted data.
        </p>
        <div
          class="mx_CreateSecretStorageDialog_primaryContainer mx_CreateSecretStorageDialog_recoveryKeyPrimarycontainer"
        >
          <div
            class="mx_CreateSecretStorageDialog_recoveryKeyContainer"
          >
            <div
              class="mx_CreateSecretStorageDialog_recoveryKey"
            >
              <code>
                encoded private key
              </code>
            </div>
            <div
              class="mx_CreateSecretStorageDialog_recoveryKeyButtons"
            >
              <div
                class="mx_AccessibleButton mx_Dialog_primary mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary"
                role="button"
                tabindex="0"
              >
                Download
              </div>
              <span>
                 or 
              </span>
              <div
                class="mx_AccessibleButton mx_Dialog_primary mx_CreateSecretStorageDialog_recoveryKeyButtons_copyBtn mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary"
                role="button"
                tabindex="0"
              >
                Copy
              </div>
            </div>
          </div>
        </div>
        <div
          class="mx_Dialog_buttons"
        >
          <span
            class="mx_Dialog_buttons_row"
          >
            <button
              class="mx_Dialog_primary"
              data-testid="dialog-primary-button"
              disabled=""
              type="button"
            >
              Continue
            </button>
          </span>
        </div>
      </div>
    </div>
  </div>
  <div
    data-focus-guard="true"
    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
    tabindex="0"
  />
</div>
`;

exports[`CreateSecretStorageDialog when there is an error fetching the backup version shows an error 1`] = `
<div>
  <div
    data-focus-guard="true"
    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
    tabindex="0"
  />
  <div
    aria-labelledby="mx_BaseDialog_title"
    class="mx_CreateSecretStorageDialog"
    data-focus-lock-disabled="false"
    role="dialog"
    tabindex="-1"
  >
    <div
      class="mx_Dialog_header"
    />
    <div>
      <div>
        <p>
          Unable to query secret storage status
        </p>
        <div
          class="mx_Dialog_buttons"
        >
          <div
            class="mx_Dialog_buttons"
          >
            <span
              class="mx_Dialog_buttons_row"
            >
              <button
                data-testid="dialog-cancel-button"
                type="button"
              >
                Cancel
              </button>
              <button
                class="mx_Dialog_primary"
                data-testid="dialog-primary-button"
                type="button"
              >
                Retry
              </button>
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div
    data-focus-guard="true"
    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
    tabindex="0"
  />
</div>
`;
