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

exports[`renders configure moderation 1`] = `
<div
  className="MainLayout-root"
  data-testid="configure-container"
>
  <form
    autoComplete="off"
    id="configure-form"
    onSubmit={[Function]}
  >
    <div
      className="Box-root Flex-root Layout-root Flex-flex"
    >
      <div
        className="SideBar-root"
      >
        <div
          className="Box-root HorizontalGutter-root HorizontalGutter-double"
        >
          <nav
            className="Navigation-root"
          >
            <ul
              className="Navigation-ul"
            >
              <li>
                <a
                  className="Link-link"
                  href="/admin/configure/general"
                  onClick={[Function]}
                >
                  General
                </a>
              </li>
              <li>
                <a
                  className="Link-link"
                  href="/admin/configure/organization"
                  onClick={[Function]}
                >
                  Organization
                </a>
              </li>
              <li>
                <a
                  className="Link-link Link-linkActive"
                  href="/admin/configure/moderation"
                  onClick={[Function]}
                >
                  Moderation
                </a>
              </li>
              <li>
                <a
                  className="Link-link"
                  href="/admin/configure/wordList"
                  onClick={[Function]}
                >
                  Banned and Suspect Words
                </a>
              </li>
              <li>
                <a
                  className="Link-link"
                  href="/admin/configure/auth"
                  onClick={[Function]}
                >
                  Authentication
                </a>
              </li>
              <li>
                <a
                  className="Link-link"
                  href="/admin/configure/email"
                  onClick={[Function]}
                >
                  Email
                </a>
              </li>
              <li>
                <a
                  className="Link-link"
                  href="/admin/configure/slack"
                  onClick={[Function]}
                >
                  Slack
                </a>
              </li>
              <li>
                <a
                  className="Link-link"
                  href="/admin/configure/advanced"
                  onClick={[Function]}
                >
                  Advanced
                </a>
              </li>
            </ul>
          </nav>
        </div>
        <div
          className="Box-root HorizontalGutter-root HorizontalGutter-double"
        >
          <button
            className="BaseButton-root Button-root Button-sizeLarge Button-colorAlt Button-variantRegular Button-uppercase Button-disabled"
            data-color="alt"
            data-testid="configure-sideBar-saveChanges"
            data-variant="regular"
            disabled={true}
            onBlur={[Function]}
            onFocus={[Function]}
            onMouseOut={[Function]}
            onMouseOver={[Function]}
            onTouchEnd={[Function]}
            type="submit"
          >
            Save Changes
          </button>
        </div>
      </div>
      <div
        className="Main-root"
      >
        <div
          className="Box-root HorizontalGutter-root HorizontalGutter-double"
          data-testid="configure-moderationContainer"
        >
          <fieldset
            className="FieldSet-root Box-root ConfigBox-root"
          >
            <div
              className="Box-root Flex-root ConfigBox-title Flex-flex Flex-justifySpaceBetween"
            >
              <div>
                <legend
                  className="Header-root"
                >
                  Pre-moderation
                </legend>
              </div>
              <div />
            </div>
            <div
              className="ConfigBox-content"
            >
              <fieldset
                className="FieldSet-root Box-root HorizontalGutter-root HorizontalGutter-spacing-4"
              >
                <p
                  className="FormFieldDescription-root"
                >
                  When pre-moderation is turned on, comments will not be published unless
approved by a moderator.
                </p>
                <fieldset
                  className="FieldSet-root Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
                >
                  <legend
                    className="Label-root"
                  >
                    Pre-moderate all comments sitewide
                  </legend>
                  <div>
                    <div
                      className="Box-root Flex-root RadioButton-root Flex-flex Flex-alignCenter"
                    >
                      <input
                        checked={false}
                        className="RadioButton-input"
                        disabled={false}
                        id="moderation-true"
                        name="moderation"
                        onBlur={[Function]}
                        onChange={[Function]}
                        onFocus={[Function]}
                        type="radio"
                        value="true"
                      />
                      <label
                        className="RadioButton-label"
                        htmlFor="moderation-true"
                      >
                        <span>
                          On
                        </span>
                      </label>
                    </div>
                    <div
                      className="Box-root Flex-root RadioButton-root Flex-flex Flex-alignCenter"
                    >
                      <input
                        checked={true}
                        className="RadioButton-input"
                        disabled={false}
                        id="moderation-false"
                        name="moderation"
                        onBlur={[Function]}
                        onChange={[Function]}
                        onFocus={[Function]}
                        type="radio"
                        value="false"
                      />
                      <label
                        className="RadioButton-label RadioButton-labelChecked"
                        htmlFor="moderation-false"
                      >
                        <span>
                          Off
                        </span>
                      </label>
                    </div>
                  </div>
                </fieldset>
                <fieldset
                  className="FieldSet-root Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
                >
                  <legend
                    className="Label-root"
                  >
                    Pre-moderate comments containing links sitewide
                  </legend>
                  <div>
                    <div
                      className="Box-root Flex-root RadioButton-root Flex-flex Flex-alignCenter"
                    >
                      <input
                        checked={false}
                        className="RadioButton-input"
                        disabled={false}
                        id="premodLinksEnable-true"
                        name="premodLinksEnable"
                        onBlur={[Function]}
                        onChange={[Function]}
                        onFocus={[Function]}
                        type="radio"
                        value="true"
                      />
                      <label
                        className="RadioButton-label"
                        htmlFor="premodLinksEnable-true"
                      >
                        <span>
                          On
                        </span>
                      </label>
                    </div>
                    <div
                      className="Box-root Flex-root RadioButton-root Flex-flex Flex-alignCenter"
                    >
                      <input
                        checked={true}
                        className="RadioButton-input"
                        disabled={false}
                        id="premodLinksEnable-false"
                        name="premodLinksEnable"
                        onBlur={[Function]}
                        onChange={[Function]}
                        onFocus={[Function]}
                        type="radio"
                        value="false"
                      />
                      <label
                        className="RadioButton-label RadioButton-labelChecked"
                        htmlFor="premodLinksEnable-false"
                      >
                        <span>
                          Off
                        </span>
                      </label>
                    </div>
                  </div>
                </fieldset>
              </fieldset>
            </div>
          </fieldset>
          <div
            className="Box-root ConfigBox-root"
          >
            <div
              className="Box-root Flex-root ConfigBox-title Flex-flex Flex-justifySpaceBetween"
            >
              <div>
                <legend
                  className="Header-root"
                >
                  New commenter approval
                </legend>
              </div>
              <div />
            </div>
            <div
              className="ConfigBox-content"
            >
              <div
                className="Box-root HorizontalGutter-root HorizontalGutter-spacing-4"
              >
                <p
                  className="FormFieldDescription-root"
                >
                  When this is active, initial comments by a new commenter will be sent to Pending
for moderator approval before publication.
                </p>
                <fieldset
                  className="FieldSet-root Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
                >
                  <legend
                    className="Label-root"
                  >
                    Enable new commenter approval
                  </legend>
                  <div>
                    <div
                      className="Box-root Flex-root RadioButton-root Flex-flex Flex-alignCenter"
                    >
                      <input
                        checked={false}
                        className="RadioButton-input"
                        disabled={false}
                        id="newCommenters.premodEnabled-true"
                        name="newCommenters.premodEnabled"
                        onBlur={[Function]}
                        onChange={[Function]}
                        onFocus={[Function]}
                        type="radio"
                        value="true"
                      />
                      <label
                        className="RadioButton-label"
                        htmlFor="newCommenters.premodEnabled-true"
                      >
                        <span>
                          On
                        </span>
                      </label>
                    </div>
                    <div
                      className="Box-root Flex-root RadioButton-root Flex-flex Flex-alignCenter"
                    >
                      <input
                        checked={true}
                        className="RadioButton-input"
                        disabled={false}
                        id="newCommenters.premodEnabled-false"
                        name="newCommenters.premodEnabled"
                        onBlur={[Function]}
                        onChange={[Function]}
                        onFocus={[Function]}
                        type="radio"
                        value="false"
                      />
                      <label
                        className="RadioButton-label RadioButton-labelChecked"
                        htmlFor="newCommenters.premodEnabled-false"
                      >
                        <span>
                          Off
                        </span>
                      </label>
                    </div>
                  </div>
                </fieldset>
                <div
                  className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
                >
                  <label
                    className="Label-root"
                  >
                    Number of comments that must be approved
                  </label>
                  <div
                    className="TextField-root"
                  >
                    <input
                      autoCapitalize="off"
                      autoComplete="off"
                      autoCorrect="off"
                      className="TextField-input NewCommentersConfig-thresholdTextField TextField-colorRegular TextField-textAlignCenter"
                      disabled={false}
                      name="newCommenters.approvedCommentsThreshold"
                      onBlur={[Function]}
                      onChange={[Function]}
                      onFocus={[Function]}
                      placeholder=""
                      spellCheck={false}
                      type="text"
                      value={2}
                    />
                    <div
                      className="TextField-adornment"
                    >
                      comments
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <fieldset
            className="FieldSet-root Box-root ConfigBox-root"
          >
            <div
              className="Box-root Flex-root ConfigBox-title Flex-flex Flex-justifySpaceBetween"
            >
              <div>
                <legend
                  className="Header-root"
                >
                  Recent history
                </legend>
              </div>
              <div />
            </div>
            <div
              className="ConfigBox-content"
            >
              <fieldset
                className="FieldSet-root Box-root HorizontalGutter-root HorizontalGutter-spacing-4"
              >
                <fieldset
                  className="FieldSet-root Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
                >
                  <div
                    className="Box-root HorizontalGutter-root FormFieldHeader-root HorizontalGutter-spacing-1"
                  >
                    <legend
                      className="Label-root"
                    >
                      Recent comment history time period
                    </legend>
                    <p
                      className="HelperText-root"
                    >
                      Amount of time to calculate a commenter's rejection rate.
                    </p>
                  </div>
                  <div
                    className="Box-root Flex-root Flex-flex Flex-itemGutter gutter"
                  >
                    <div
                      className="TextField-root DurationField-value"
                    >
                      <input
                        aria-label="value"
                        autoCapitalize="off"
                        autoComplete="off"
                        autoCorrect="off"
                        className="TextField-input TextField-colorRegular TextField-textAlignCenter"
                        disabled={false}
                        name="recentCommentHistory.timeFrame-value"
                        onChange={[Function]}
                        placeholder=""
                        spellCheck={false}
                        type="text"
                        value="7"
                      />
                    </div>
                    <span
                      className="DurationField-unit"
                    >
                      Days
                    </span>
                  </div>
                </fieldset>
                <fieldset
                  className="FieldSet-root Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
                >
                  <div
                    className="Box-root HorizontalGutter-root FormFieldHeader-root HorizontalGutter-spacing-1"
                  >
                    <legend
                      className="Label-root"
                    >
                      Recent history filter
                    </legend>
                    <p
                      className="HelperText-root"
                    >
                      Prevents repeat offenders from publishing comments without approval.
When a commenter's rejection rate is above the threshold, their
comments are sent to Pending for moderator approval. This does not
apply to Staff comments.
                    </p>
                  </div>
                  <div>
                    <div
                      className="Box-root Flex-root RadioButton-root Flex-flex Flex-alignCenter"
                    >
                      <input
                        checked={false}
                        className="RadioButton-input"
                        disabled={false}
                        id="recentCommentHistory.enabled-true"
                        name="recentCommentHistory.enabled"
                        onBlur={[Function]}
                        onChange={[Function]}
                        onFocus={[Function]}
                        type="radio"
                        value="true"
                      />
                      <label
                        className="RadioButton-label"
                        htmlFor="recentCommentHistory.enabled-true"
                      >
                        <span>
                          On
                        </span>
                      </label>
                    </div>
                    <div
                      className="Box-root Flex-root RadioButton-root Flex-flex Flex-alignCenter"
                    >
                      <input
                        checked={true}
                        className="RadioButton-input"
                        disabled={false}
                        id="recentCommentHistory.enabled-false"
                        name="recentCommentHistory.enabled"
                        onBlur={[Function]}
                        onChange={[Function]}
                        onFocus={[Function]}
                        type="radio"
                        value="false"
                      />
                      <label
                        className="RadioButton-label RadioButton-labelChecked"
                        htmlFor="recentCommentHistory.enabled-false"
                      >
                        <span>
                          Off
                        </span>
                      </label>
                    </div>
                  </div>
                </fieldset>
                <div
                  className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
                >
                  <div
                    className="Box-root HorizontalGutter-root FormFieldHeader-root HorizontalGutter-spacing-1"
                  >
                    <label
                      className="Label-root"
                    >
                      Rejection rate threshold
                    </label>
                    <p
                      className="HelperText-root"
                    >
                      Rejected comments ÷ (rejected comments + published comments)
over the timeframe above, as a percentage. It does not include
comments pending for toxicity, spam or pre-moderation.
                    </p>
                  </div>
                  <div
                    className="Box-root HorizontalGutter-root HorizontalGutter-spacing-2"
                  >
                    <div
                      className="TextField-root"
                    >
                      <input
                        autoCapitalize="off"
                        autoComplete="off"
                        autoCorrect="off"
                        className="TextField-input RecentCommentHistoryConfig-thresholdTextField TextField-colorRegular TextField-textAlignCenter"
                        disabled={false}
                        name="recentCommentHistory.triggerRejectionRate"
                        onBlur={[Function]}
                        onChange={[Function]}
                        onFocus={[Function]}
                        placeholder=""
                        spellCheck={false}
                        type="text"
                        value="30"
                      />
                      <div
                        className="TextField-adornment"
                      >
                        <span
                          className="TextFieldAdornment-root"
                        >
                          %
                        </span>
                      </div>
                    </div>
                  </div>
                </div>
              </fieldset>
            </div>
          </fieldset>
          <fieldset
            className="FieldSet-root Box-root ConfigBox-root"
            data-testid="perspective-container"
          >
            <div
              className="Box-root Flex-root ConfigBox-title Flex-flex Flex-justifySpaceBetween"
            >
              <div>
                <legend
                  className="Header-root"
                >
                  Toxic comment filter
                </legend>
              </div>
              <div />
            </div>
            <div
              className="ConfigBox-content"
            >
              <fieldset
                className="FieldSet-root Box-root HorizontalGutter-root HorizontalGutter-spacing-4"
              >
                <p
                  className="FormFieldDescription-root"
                >
                  Using the Perspective API, the Toxic Comment filter warns users
when comments exceed the predefined toxicity threshold.
Comments with a toxicity score above the threshold

                  <strong>
                    will not be published
                  </strong>
                   and are placed in
the 
                  <strong>
                    Pending Queue for review by a moderator
                  </strong>
                  .
If approved by a moderator, the comment will be published.
                </p>
                <fieldset
                  className="FieldSet-root Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
                >
                  <legend
                    className="Label-root"
                  >
                    Toxic comment filter
                  </legend>
                  <div>
                    <div
                      className="Box-root Flex-root RadioButton-root Flex-flex Flex-alignCenter"
                    >
                      <input
                        checked={false}
                        className="RadioButton-input"
                        disabled={false}
                        id="integrations.perspective.enabled-true"
                        name="integrations.perspective.enabled"
                        onBlur={[Function]}
                        onChange={[Function]}
                        onFocus={[Function]}
                        type="radio"
                        value="true"
                      />
                      <label
                        className="RadioButton-label"
                        htmlFor="integrations.perspective.enabled-true"
                      >
                        <span>
                          On
                        </span>
                      </label>
                    </div>
                    <div
                      className="Box-root Flex-root RadioButton-root Flex-flex Flex-alignCenter"
                    >
                      <input
                        checked={true}
                        className="RadioButton-input"
                        disabled={false}
                        id="integrations.perspective.enabled-false"
                        name="integrations.perspective.enabled"
                        onBlur={[Function]}
                        onChange={[Function]}
                        onFocus={[Function]}
                        type="radio"
                        value="false"
                      />
                      <label
                        className="RadioButton-label RadioButton-labelChecked"
                        htmlFor="integrations.perspective.enabled-false"
                      >
                        <span>
                          Off
                        </span>
                      </label>
                    </div>
                  </div>
                </fieldset>
                <div
                  className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
                >
                  <div
                    className="Box-root HorizontalGutter-root FormFieldHeader-root HorizontalGutter-spacing-1"
                  >
                    <label
                      className="Label-root"
                      htmlFor="configure-moderation-perspective-threshold"
                    >
                      Toxicity threshold
                    </label>
                    <p
                      className="HelperText-root"
                    >
                      This value can be set a percentage between 0 and 100. This number represents the likelihood that a
comment is toxic, according to Perspective API. By default the threshold is set to 80%.
                    </p>
                  </div>
                  <div
                    className="Box-root HorizontalGutter-root HorizontalGutter-spacing-2"
                  >
                    <div
                      className="TextField-root"
                    >
                      <input
                        autoCapitalize="off"
                        autoComplete="off"
                        autoCorrect="off"
                        className="TextField-input PerspectiveConfig-thresholdTextField TextField-colorRegular TextField-textAlignCenter"
                        disabled={false}
                        id="configure-moderation-perspective-threshold"
                        name="integrations.perspective.threshold"
                        onBlur={[Function]}
                        onChange={[Function]}
                        onFocus={[Function]}
                        placeholder="80"
                        spellCheck={false}
                        type="text"
                        value="80"
                      />
                      <div
                        className="TextField-adornment"
                      >
                        <span
                          className="TextFieldAdornment-root"
                        >
                          %
                        </span>
                      </div>
                    </div>
                  </div>
                </div>
                <div
                  className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
                >
                  <div
                    className="Box-root HorizontalGutter-root FormFieldHeader-root HorizontalGutter-spacing-1"
                  >
                    <label
                      className="Label-root"
                      htmlFor="configure-moderation-perspective-model"
                    >
                      Toxicity model
                    </label>
                    <p
                      className="HelperText-root"
                    >
                      Choose your Perspective Model. The default is TOXICITY.
You can find out more about model choices 
                      <a
                        className="ExternalLink-root"
                        href="https://github.com/conversationai/perspectiveapi/blob/master/api_reference.md#models"
                        rel="noopener noreferrer"
                        target="_blank"
                      >
                        here
                      </a>
                      .
                    </p>
                  </div>
                  <div
                    className="Box-root HorizontalGutter-root HorizontalGutter-spacing-2"
                  >
                    <div
                      className="TextField-root TextField-fullWidth"
                    >
                      <input
                        autoCapitalize="off"
                        autoComplete="off"
                        autoCorrect="off"
                        className="TextField-input TextField-colorRegular"
                        disabled={false}
                        id="configure-moderation-perspective-model"
                        name="integrations.perspective.model"
                        onBlur={[Function]}
                        onChange={[Function]}
                        onFocus={[Function]}
                        placeholder="TOXICITY"
                        spellCheck={false}
                        type="text"
                        value=""
                      />
                    </div>
                  </div>
                </div>
                <fieldset
                  className="FieldSet-root Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
                >
                  <div
                    className="Box-root HorizontalGutter-root FormFieldHeader-root HorizontalGutter-spacing-1"
                  >
                    <legend
                      className="Label-root"
                    >
                      Allow Google to store comment data
                    </legend>
                    <p
                      className="HelperText-root"
                    >
                      Stored comments will be used for future research and community model building purposes to
improve the API over time.
                    </p>
                  </div>
                  <div>
                    <div
                      className="Box-root Flex-root RadioButton-root Flex-flex Flex-alignCenter"
                    >
                      <input
                        checked={true}
                        className="RadioButton-input"
                        data-testid="test-allowStoreCommentData"
                        disabled={false}
                        id="integrations.perspective.doNotStore-true"
                        name="integrations.perspective.doNotStore"
                        onBlur={[Function]}
                        onChange={[Function]}
                        onFocus={[Function]}
                        type="radio"
                        value="false"
                      />
                      <label
                        className="RadioButton-label RadioButton-labelChecked"
                        htmlFor="integrations.perspective.doNotStore-true"
                      >
                        <span>
                          Allow
                        </span>
                      </label>
                    </div>
                    <div
                      className="Box-root Flex-root RadioButton-root Flex-flex Flex-alignCenter"
                    >
                      <input
                        checked={false}
                        className="RadioButton-input"
                        disabled={false}
                        id="integrations.perspective.doNotStore-false"
                        name="integrations.perspective.doNotStore"
                        onBlur={[Function]}
                        onChange={[Function]}
                        onFocus={[Function]}
                        type="radio"
                        value="true"
                      />
                      <label
                        className="RadioButton-label"
                        htmlFor="integrations.perspective.doNotStore-false"
                      >
                        <span>
                          Don't allow
                        </span>
                      </label>
                    </div>
                  </div>
                </fieldset>
                <fieldset
                  className="FieldSet-root Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
                >
                  <div
                    className="Box-root HorizontalGutter-root FormFieldHeader-root HorizontalGutter-spacing-1"
                  >
                    <legend
                      className="Label-root"
                    >
                      Allow Coral to send moderation actions to Google
                    </legend>
                    <p
                      className="HelperText-root"
                    >
                      Sent moderation actions will be used for future research and
community model building purposes to improve the API over time.
                    </p>
                  </div>
                  <div>
                    <div
                      className="Box-root Flex-root RadioButton-root Flex-flex Flex-alignCenter"
                    >
                      <input
                        checked={false}
                        className="RadioButton-input"
                        data-testid="test-allowSendFeedback"
                        disabled={false}
                        id="integrations.perspective.sendFeedback-true"
                        name="integrations.perspective.sendFeedback"
                        onBlur={[Function]}
                        onChange={[Function]}
                        onFocus={[Function]}
                        type="radio"
                        value="true"
                      />
                      <label
                        className="RadioButton-label"
                        htmlFor="integrations.perspective.sendFeedback-true"
                      >
                        <span>
                          Allow
                        </span>
                      </label>
                    </div>
                    <div
                      className="Box-root Flex-root RadioButton-root Flex-flex Flex-alignCenter"
                    >
                      <input
                        checked={true}
                        className="RadioButton-input"
                        disabled={false}
                        id="integrations.perspective.sendFeedback-false"
                        name="integrations.perspective.sendFeedback"
                        onBlur={[Function]}
                        onChange={[Function]}
                        onFocus={[Function]}
                        type="radio"
                        value="false"
                      />
                      <label
                        className="RadioButton-label RadioButton-labelChecked"
                        htmlFor="integrations.perspective.sendFeedback-false"
                      >
                        <span>
                          Don't allow
                        </span>
                      </label>
                    </div>
                  </div>
                </fieldset>
                <div
                  className="Box-root HorizontalGutter-root HorizontalGutter-spacing-3"
                >
                  <h3
                    className="Subheader-root"
                  >
                    Configuration
                  </h3>
                  <p
                    className="HelperText-root"
                  >
                    For additional information on how to set up the Perspective Toxic Comment Filter please visit:

                    <a
                      className="ExternalLink-root"
                      href="https://github.com/conversationai/perspectiveapi#readme"
                      rel="noopener noreferrer"
                      target="_blank"
                    >
                      https://github.com/conversationai/perspectiveapi#readme
                    </a>
                  </p>
                </div>
                <div
                  className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
                >
                  <label
                    className="Label-root"
                    htmlFor="configure-moderation-integrations.perspective.key"
                  >
                    API key
                  </label>
                  <div
                    className="PasswordField-fullWidth PasswordField-root"
                  >
                    <div
                      className="PasswordField-wrapper"
                    >
                      <input
                        autoCapitalize="off"
                        autoComplete="off"
                        autoCorrect="off"
                        className="PasswordField-colorRegular PasswordField-fullWidth PasswordField-input"
                        data-testid="password-field"
                        disabled={false}
                        id="configure-moderation-integrations.perspective.key"
                        name="integrations.perspective.key"
                        onBlur={[Function]}
                        onChange={[Function]}
                        onFocus={[Function]}
                        placeholder=""
                        spellCheck={false}
                        type="password"
                        value=""
                      />
                      <div
                        className="PasswordField-icon"
                        onClick={[Function]}
                        onKeyUp={[Function]}
                        role="button"
                        tabIndex={0}
                        title="Hide API Key"
                      >
                        <i
                          aria-hidden="true"
                          className="Icon-root Icon-sm"
                        >
                          visibility
                        </i>
                      </div>
                    </div>
                  </div>
                </div>
                <div
                  className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
                >
                  <label
                    className="Label-root"
                    htmlFor="configure-moderation-perspective-customEndpoint"
                  >
                    Custom endpoint
                  </label>
                  <p
                    className="HelperText-root"
                  >
                    By default the endpoint is set to https://commentanalyzer.googleapis.com/v1alpha1. You may override this here.
                  </p>
                  <div
                    className="Box-root HorizontalGutter-root HorizontalGutter-spacing-2"
                  >
                    <div
                      className="TextField-root TextField-fullWidth"
                    >
                      <input
                        autoCapitalize="off"
                        autoComplete="off"
                        autoCorrect="off"
                        className="TextField-input TextField-colorRegular"
                        disabled={false}
                        id="configure-moderation-perspective-customEndpoint"
                        name="integrations.perspective.endpoint"
                        onBlur={[Function]}
                        onChange={[Function]}
                        onFocus={[Function]}
                        placeholder="https://commentanalyzer.googleapis.com/v1alpha1"
                        spellCheck={false}
                        type="text"
                        value=""
                      />
                    </div>
                  </div>
                </div>
              </fieldset>
            </div>
          </fieldset>
          <fieldset
            className="FieldSet-root Box-root ConfigBox-root"
            data-testid="akismet-config"
          >
            <div
              className="Box-root Flex-root ConfigBox-title Flex-flex Flex-justifySpaceBetween"
            >
              <div>
                <legend
                  className="Header-root"
                >
                  Spam detection filter
                </legend>
              </div>
              <div />
            </div>
            <div
              className="ConfigBox-content"
            >
              <fieldset
                className="FieldSet-root Box-root HorizontalGutter-root HorizontalGutter-spacing-4"
              >
                <p
                  className="FormFieldDescription-root"
                >
                  The Akismet API filter warns users when a comment is determined likely
to be spam. Comments that Akismet thinks are spam will not be published
and are placed in the Pending Queue for review by a moderator.
If approved by a moderator, the comment will be published.
                </p>
                <fieldset
                  className="FieldSet-root Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
                >
                  <legend
                    className="Label-root"
                  >
                    Spam detection filter
                  </legend>
                  <div>
                    <div
                      className="Box-root Flex-root RadioButton-root Flex-flex Flex-alignCenter"
                    >
                      <input
                        checked={false}
                        className="RadioButton-input"
                        disabled={false}
                        id="integrations.akismet.enabled-true"
                        name="integrations.akismet.enabled"
                        onBlur={[Function]}
                        onChange={[Function]}
                        onFocus={[Function]}
                        type="radio"
                        value="true"
                      />
                      <label
                        className="RadioButton-label"
                        htmlFor="integrations.akismet.enabled-true"
                      >
                        <span>
                          On
                        </span>
                      </label>
                    </div>
                    <div
                      className="Box-root Flex-root RadioButton-root Flex-flex Flex-alignCenter"
                    >
                      <input
                        checked={true}
                        className="RadioButton-input"
                        disabled={false}
                        id="integrations.akismet.enabled-false"
                        name="integrations.akismet.enabled"
                        onBlur={[Function]}
                        onChange={[Function]}
                        onFocus={[Function]}
                        type="radio"
                        value="false"
                      />
                      <label
                        className="RadioButton-label RadioButton-labelChecked"
                        htmlFor="integrations.akismet.enabled-false"
                      >
                        <span>
                          Off
                        </span>
                      </label>
                    </div>
                  </div>
                </fieldset>
                <div
                  className="Box-root HorizontalGutter-root HorizontalGutter-spacing-3"
                >
                  <h3
                    className="Subheader-root"
                  >
                    Configuration
                  </h3>
                  <p
                    className="HelperText-root"
                  >
                    Note: You must add your active domain(s)
in your Akismet account: 
                    <a
                      className="ExternalLink-root"
                      href="https://akismet.com/account/"
                      rel="noopener noreferrer"
                      target="_blank"
                    >
                      https://akismet.com/account/
                    </a>
                  </p>
                </div>
                <div
                  className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
                >
                  <label
                    className="Label-root"
                    htmlFor="configure-moderation-integrations.akismet.key"
                  >
                    API key
                  </label>
                  <div
                    className="PasswordField-fullWidth PasswordField-root"
                  >
                    <div
                      className="PasswordField-wrapper"
                    >
                      <input
                        autoCapitalize="off"
                        autoComplete="off"
                        autoCorrect="off"
                        className="PasswordField-colorRegular PasswordField-fullWidth PasswordField-input"
                        data-testid="password-field"
                        disabled={false}
                        id="configure-moderation-integrations.akismet.key"
                        name="integrations.akismet.key"
                        onBlur={[Function]}
                        onChange={[Function]}
                        onFocus={[Function]}
                        placeholder=""
                        spellCheck={false}
                        type="password"
                        value=""
                      />
                      <div
                        className="PasswordField-icon"
                        onClick={[Function]}
                        onKeyUp={[Function]}
                        role="button"
                        tabIndex={0}
                        title="Hide API Key"
                      >
                        <i
                          aria-hidden="true"
                          className="Icon-root Icon-sm"
                        >
                          visibility
                        </i>
                      </div>
                    </div>
                  </div>
                </div>
                <div
                  className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
                >
                  <label
                    className="Label-root"
                    htmlFor="configure-moderation-akismet-site"
                  >
                    Site URL
                  </label>
                  <div
                    className="Box-root HorizontalGutter-root HorizontalGutter-spacing-2"
                  >
                    <div
                      className="TextField-root TextField-fullWidth"
                    >
                      <input
                        autoCapitalize="off"
                        autoComplete="off"
                        autoCorrect="off"
                        className="TextField-input TextField-colorRegular"
                        disabled={false}
                        id="configure-moderation-akismet-site"
                        name="integrations.akismet.site"
                        onBlur={[Function]}
                        onChange={[Function]}
                        onFocus={[Function]}
                        placeholder=""
                        spellCheck={false}
                        type="text"
                        value=""
                      />
                    </div>
                  </div>
                </div>
              </fieldset>
            </div>
          </fieldset>
        </div>
      </div>
    </div>
  </form>
</div>
`;
