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

exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
<div>
  <form
    class="_root_19upo_16"
  >
    <div
      class="mx_NotificationSettings2"
    >
      <div
        class="mx_SettingsSection"
      >
        <div
          class="mx_SettingsSection_subSections"
        >
          <div
            class="mx_SettingsSubsection_content mx_NotificationSettings2_flags"
          >
            <div
              class="_inline-field_19upo_32"
            >
              <div
                class="_inline-field-control_19upo_44"
              >
                <div
                  class="_container_udcm8_10"
                >
                  <input
                    checked=""
                    class="_input_udcm8_24"
                    disabled=""
                    id="_r_1f_"
                    role="switch"
                    type="checkbox"
                  />
                  <div
                    class="_ui_udcm8_34"
                  />
                </div>
              </div>
              <div
                class="_inline-field-body_19upo_38"
              >
                <label
                  class="_label_19upo_59"
                  for="_r_1f_"
                >
                  Enable notifications for this account
                </label>
              </div>
            </div>
            <div
              class="_inline-field_19upo_32"
            >
              <div
                class="_inline-field-control_19upo_44"
              >
                <div
                  class="_container_udcm8_10"
                >
                  <input
                    class="_input_udcm8_24"
                    id="mx_SettingsFlag_vY7Q4uEh9K38"
                    role="switch"
                    type="checkbox"
                  />
                  <div
                    class="_ui_udcm8_34"
                  />
                </div>
              </div>
              <div
                class="_inline-field-body_19upo_38"
              >
                <label
                  class="_label_19upo_59"
                  for="mx_SettingsFlag_vY7Q4uEh9K38"
                >
                  Enable desktop notifications for this session
                </label>
              </div>
            </div>
            <div
              class="_inline-field_19upo_32"
            >
              <div
                class="_inline-field-control_19upo_44"
              >
                <div
                  class="_container_udcm8_10"
                >
                  <input
                    class="_input_udcm8_24"
                    id="mx_SettingsFlag_QgU2PomxwKpa"
                    role="switch"
                    type="checkbox"
                  />
                  <div
                    class="_ui_udcm8_34"
                  />
                </div>
              </div>
              <div
                class="_inline-field-body_19upo_38"
              >
                <label
                  class="_label_19upo_59"
                  for="mx_SettingsFlag_QgU2PomxwKpa"
                >
                  Show message preview in desktop notification
                </label>
              </div>
            </div>
            <div
              class="_inline-field_19upo_32"
            >
              <div
                class="_inline-field-control_19upo_44"
              >
                <div
                  class="_container_udcm8_10"
                >
                  <input
                    checked=""
                    class="_input_udcm8_24"
                    id="mx_SettingsFlag_6hpi3YEetmBG"
                    role="switch"
                    type="checkbox"
                  />
                  <div
                    class="_ui_udcm8_34"
                  />
                </div>
              </div>
              <div
                class="_inline-field-body_19upo_38"
              >
                <label
                  class="_label_19upo_59"
                  for="mx_SettingsFlag_6hpi3YEetmBG"
                >
                  Enable audible notifications for this session
                </label>
              </div>
            </div>
          </div>
          <div
            class="mx_SettingsSubsection"
          >
            <div
              class="mx_SettingsSubsectionHeading"
            >
              <h2
                class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
              >
                I want to be notified for (Default Setting)
              </h2>
            </div>
            <div
              class="mx_SettingsSubsection_description"
            >
              <div
                class="mx_SettingsSubsection_text"
              >
                This setting will be applied by default to all your rooms.
              </div>
            </div>
            <div
              class="mx_SettingsSubsection_content"
            >
              <label
                class="mx_StyledRadioButton mx_StyledRadioButton_disabled mx_StyledRadioButton_checked"
              >
                <input
                  checked=""
                  disabled=""
                  id="defaultNotificationLevel-all_messages"
                  name="defaultNotificationLevel"
                  type="radio"
                  value="all_messages"
                />
                <div>
                  <div />
                </div>
                <div
                  class="mx_StyledRadioButton_content"
                >
                  All messages
                </div>
                <div
                  class="mx_StyledRadioButton_spacer"
                />
              </label>
              <label
                class="mx_StyledRadioButton mx_StyledRadioButton_disabled"
              >
                <input
                  disabled=""
                  id="defaultNotificationLevel-people_mentions_keywords"
                  name="defaultNotificationLevel"
                  type="radio"
                  value="people_mentions_keywords"
                />
                <div>
                  <div />
                </div>
                <div
                  class="mx_StyledRadioButton_content"
                >
                  People, Mentions and Keywords
                </div>
                <div
                  class="mx_StyledRadioButton_spacer"
                />
              </label>
              <label
                class="mx_StyledRadioButton mx_StyledRadioButton_disabled"
              >
                <input
                  disabled=""
                  id="defaultNotificationLevel-mentions_keywords"
                  name="defaultNotificationLevel"
                  type="radio"
                  value="mentions_keywords"
                />
                <div>
                  <div />
                </div>
                <div
                  class="mx_StyledRadioButton_content"
                >
                  Mentions and Keywords only
                </div>
                <div
                  class="mx_StyledRadioButton_spacer"
                />
              </label>
            </div>
          </div>
          <div
            class="mx_SettingsSubsection"
          >
            <div
              class="mx_SettingsSubsectionHeading"
            >
              <h2
                class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
              >
                Play a sound for
              </h2>
            </div>
            <div
              class="mx_SettingsSubsection_description"
            >
              <div
                class="mx_SettingsSubsection_text"
              >
                Applied by default to all rooms on all devices.
              </div>
            </div>
            <div
              class="mx_SettingsSubsection_content"
            >
              <div
                class="mx_LabelledCheckbox"
              >
                <form
                  class="_root_19upo_16"
                >
                  <div
                    class="_inline-field_19upo_32"
                  >
                    <div
                      class="_inline-field-control_19upo_44"
                    >
                      <div
                        class="_container_153f2_10"
                      >
                        <input
                          checked=""
                          class="_input_153f2_18"
                          disabled=""
                          id="checkbox_4yVCeEefiP"
                          type="checkbox"
                        />
                        <div
                          class="_ui_153f2_19"
                        >
                          <svg
                            aria-hidden="true"
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M9.55 17.575q-.2 0-.375-.062a.9.9 0 0 1-.325-.213L4.55 13q-.274-.274-.262-.713.012-.437.287-.712a.95.95 0 0 1 .7-.275q.425 0 .7.275L9.55 15.15l8.475-8.475q.274-.275.713-.275.437 0 .712.275.275.274.275.713 0 .437-.275.712l-9.2 9.2q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063"
                            />
                          </svg>
                        </div>
                      </div>
                    </div>
                    <div
                      class="_inline-field-body_19upo_38"
                    >
                      <label
                        class="_label_19upo_59"
                        for="checkbox_4yVCeEefiP"
                      >
                        <span
                          class="mx_LabelledCheckbox_label"
                        >
                          People
                        </span>
                      </label>
                    </div>
                  </div>
                </form>
              </div>
              <div
                class="mx_LabelledCheckbox"
              >
                <form
                  class="_root_19upo_16"
                >
                  <div
                    class="_inline-field_19upo_32"
                  >
                    <div
                      class="_inline-field-control_19upo_44"
                    >
                      <div
                        class="_container_153f2_10"
                      >
                        <input
                          checked=""
                          class="_input_153f2_18"
                          disabled=""
                          id="checkbox_qpMRMwbPDm"
                          type="checkbox"
                        />
                        <div
                          class="_ui_153f2_19"
                        >
                          <svg
                            aria-hidden="true"
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M9.55 17.575q-.2 0-.375-.062a.9.9 0 0 1-.325-.213L4.55 13q-.274-.274-.262-.713.012-.437.287-.712a.95.95 0 0 1 .7-.275q.425 0 .7.275L9.55 15.15l8.475-8.475q.274-.275.713-.275.437 0 .712.275.275.274.275.713 0 .437-.275.712l-9.2 9.2q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063"
                            />
                          </svg>
                        </div>
                      </div>
                    </div>
                    <div
                      class="_inline-field-body_19upo_38"
                    >
                      <label
                        class="_label_19upo_59"
                        for="checkbox_qpMRMwbPDm"
                      >
                        <span
                          class="mx_LabelledCheckbox_label"
                        >
                          Mentions and Keywords
                        </span>
                      </label>
                    </div>
                  </div>
                </form>
              </div>
              <div
                class="mx_LabelledCheckbox"
              >
                <form
                  class="_root_19upo_16"
                >
                  <div
                    class="_inline-field_19upo_32"
                  >
                    <div
                      class="_inline-field-control_19upo_44"
                    >
                      <div
                        class="_container_153f2_10"
                      >
                        <input
                          checked=""
                          class="_input_153f2_18"
                          disabled=""
                          id="checkbox_fGtmGQvdMW"
                          type="checkbox"
                        />
                        <div
                          class="_ui_153f2_19"
                        >
                          <svg
                            aria-hidden="true"
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M9.55 17.575q-.2 0-.375-.062a.9.9 0 0 1-.325-.213L4.55 13q-.274-.274-.262-.713.012-.437.287-.712a.95.95 0 0 1 .7-.275q.425 0 .7.275L9.55 15.15l8.475-8.475q.274-.275.713-.275.437 0 .712.275.275.274.275.713 0 .437-.275.712l-9.2 9.2q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063"
                            />
                          </svg>
                        </div>
                      </div>
                    </div>
                    <div
                      class="_inline-field-body_19upo_38"
                    >
                      <label
                        class="_label_19upo_59"
                        for="checkbox_fGtmGQvdMW"
                      >
                        <span
                          class="mx_LabelledCheckbox_label"
                        >
                          Audio and Video calls
                        </span>
                      </label>
                    </div>
                  </div>
                </form>
              </div>
            </div>
          </div>
          <div
            class="mx_SettingsSubsection"
          >
            <div
              class="mx_SettingsSubsectionHeading"
            >
              <h2
                class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
              >
                Other things we think you might be interested in:
              </h2>
            </div>
            <div
              class="mx_SettingsSubsection_content"
            >
              <div
                class="mx_LabelledCheckbox"
              >
                <form
                  class="_root_19upo_16"
                >
                  <div
                    class="_inline-field_19upo_32"
                  >
                    <div
                      class="_inline-field-control_19upo_44"
                    >
                      <div
                        class="_container_153f2_10"
                      >
                        <input
                          checked=""
                          class="_input_153f2_18"
                          disabled=""
                          id="checkbox_e954DVIAu5"
                          type="checkbox"
                        />
                        <div
                          class="_ui_153f2_19"
                        >
                          <svg
                            aria-hidden="true"
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M9.55 17.575q-.2 0-.375-.062a.9.9 0 0 1-.325-.213L4.55 13q-.274-.274-.262-.713.012-.437.287-.712a.95.95 0 0 1 .7-.275q.425 0 .7.275L9.55 15.15l8.475-8.475q.274-.275.713-.275.437 0 .712.275.275.274.275.713 0 .437-.275.712l-9.2 9.2q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063"
                            />
                          </svg>
                        </div>
                      </div>
                    </div>
                    <div
                      class="_inline-field-body_19upo_38"
                    >
                      <label
                        class="_label_19upo_59"
                        for="checkbox_e954DVIAu5"
                      >
                        <span
                          class="mx_LabelledCheckbox_label"
                        >
                          Invited to a room
                        </span>
                      </label>
                    </div>
                  </div>
                </form>
              </div>
              <div
                class="mx_LabelledCheckbox"
              >
                <form
                  class="_root_19upo_16"
                >
                  <div
                    class="_inline-field_19upo_32"
                  >
                    <div
                      class="_inline-field-control_19upo_44"
                    >
                      <div
                        class="_container_153f2_10"
                      >
                        <input
                          class="_input_153f2_18"
                          disabled=""
                          id="checkbox_CsiHRD7nyr"
                          type="checkbox"
                        />
                        <div
                          class="_ui_153f2_19"
                        >
                          <svg
                            aria-hidden="true"
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M9.55 17.575q-.2 0-.375-.062a.9.9 0 0 1-.325-.213L4.55 13q-.274-.274-.262-.713.012-.437.287-.712a.95.95 0 0 1 .7-.275q.425 0 .7.275L9.55 15.15l8.475-8.475q.274-.275.713-.275.437 0 .712.275.275.274.275.713 0 .437-.275.712l-9.2 9.2q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063"
                            />
                          </svg>
                        </div>
                      </div>
                    </div>
                    <div
                      class="_inline-field-body_19upo_38"
                    >
                      <label
                        class="_label_19upo_59"
                        for="checkbox_CsiHRD7nyr"
                      >
                        <span
                          class="mx_LabelledCheckbox_label"
                        >
                          New room activity, upgrades and status messages occur
                        </span>
                      </label>
                    </div>
                  </div>
                </form>
              </div>
              <div
                class="mx_LabelledCheckbox"
              >
                <form
                  class="_root_19upo_16"
                >
                  <div
                    class="_inline-field_19upo_32"
                  >
                    <div
                      class="_inline-field-control_19upo_44"
                    >
                      <div
                        class="_container_153f2_10"
                      >
                        <input
                          checked=""
                          class="_input_153f2_18"
                          disabled=""
                          id="checkbox_A2ohjWVJIP"
                          type="checkbox"
                        />
                        <div
                          class="_ui_153f2_19"
                        >
                          <svg
                            aria-hidden="true"
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M9.55 17.575q-.2 0-.375-.062a.9.9 0 0 1-.325-.213L4.55 13q-.274-.274-.262-.713.012-.437.287-.712a.95.95 0 0 1 .7-.275q.425 0 .7.275L9.55 15.15l8.475-8.475q.274-.275.713-.275.437 0 .712.275.275.274.275.713 0 .437-.275.712l-9.2 9.2q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063"
                            />
                          </svg>
                        </div>
                      </div>
                    </div>
                    <div
                      class="_inline-field-body_19upo_38"
                    >
                      <label
                        class="_label_19upo_59"
                        for="checkbox_A2ohjWVJIP"
                      >
                        <span
                          class="mx_LabelledCheckbox_label"
                        >
                          Messages sent by bots
                        </span>
                      </label>
                    </div>
                  </div>
                </form>
              </div>
            </div>
          </div>
          <div
            class="mx_SettingsSubsection"
          >
            <div
              class="mx_SettingsSubsectionHeading"
            >
              <h2
                class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
              >
                Mentions and Keywords
              </h2>
            </div>
            <div
              class="mx_SettingsSubsection_description"
            >
              <div
                class="mx_SettingsSubsection_text"
              >
                <span>
                  Show a badge 
                  <div
                    class="mx_NotificationBadge mx_NotificationBadge_visible mx_NotificationBadge_level_notification mx_NotificationBadge_2char cpd-theme-light"
                  >
                    <span
                      class="mx_NotificationBadge_count"
                    >
                      1
                    </span>
                  </div>
                   when keywords are used in a room.
                </span>
              </div>
            </div>
            <div
              class="mx_SettingsSubsection_content"
            >
              <div
                class="mx_LabelledCheckbox"
              >
                <form
                  class="_root_19upo_16"
                >
                  <div
                    class="_inline-field_19upo_32"
                  >
                    <div
                      class="_inline-field-control_19upo_44"
                    >
                      <div
                        class="_container_153f2_10"
                      >
                        <input
                          checked=""
                          class="_input_153f2_18"
                          disabled=""
                          id="checkbox_auy1OmnTid"
                          type="checkbox"
                        />
                        <div
                          class="_ui_153f2_19"
                        >
                          <svg
                            aria-hidden="true"
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M9.55 17.575q-.2 0-.375-.062a.9.9 0 0 1-.325-.213L4.55 13q-.274-.274-.262-.713.012-.437.287-.712a.95.95 0 0 1 .7-.275q.425 0 .7.275L9.55 15.15l8.475-8.475q.274-.275.713-.275.437 0 .712.275.275.274.275.713 0 .437-.275.712l-9.2 9.2q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063"
                            />
                          </svg>
                        </div>
                      </div>
                    </div>
                    <div
                      class="_inline-field-body_19upo_38"
                    >
                      <label
                        class="_label_19upo_59"
                        for="checkbox_auy1OmnTid"
                      >
                        <span
                          class="mx_LabelledCheckbox_label"
                        >
                          Notify when someone mentions using @room
                        </span>
                      </label>
                    </div>
                  </div>
                </form>
              </div>
              <div
                class="mx_LabelledCheckbox"
                id="mx_NotificationSettings2_MentionCheckbox"
              >
                <form
                  class="_root_19upo_16"
                >
                  <div
                    class="_inline-field_19upo_32"
                  >
                    <div
                      class="_inline-field-control_19upo_44"
                    >
                      <div
                        class="_container_153f2_10"
                      >
                        <input
                          checked=""
                          class="_input_153f2_18"
                          disabled=""
                          id="checkbox_X4ePDS0OpW"
                          type="checkbox"
                        />
                        <div
                          class="_ui_153f2_19"
                        >
                          <svg
                            aria-hidden="true"
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M9.55 17.575q-.2 0-.375-.062a.9.9 0 0 1-.325-.213L4.55 13q-.274-.274-.262-.713.012-.437.287-.712a.95.95 0 0 1 .7-.275q.425 0 .7.275L9.55 15.15l8.475-8.475q.274-.275.713-.275.437 0 .712.275.275.274.275.713 0 .437-.275.712l-9.2 9.2q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063"
                            />
                          </svg>
                        </div>
                      </div>
                    </div>
                    <div
                      class="_inline-field-body_19upo_38"
                    >
                      <label
                        class="_label_19upo_59"
                        for="checkbox_X4ePDS0OpW"
                      >
                        <span
                          class="mx_LabelledCheckbox_label"
                        >
                          Notify when someone mentions using @displayname or @userId:matrix.org
                        </span>
                      </label>
                    </div>
                  </div>
                </form>
              </div>
              <div
                class="mx_LabelledCheckbox"
              >
                <form
                  class="_root_19upo_16"
                >
                  <div
                    class="_inline-field_19upo_32"
                  >
                    <div
                      class="_inline-field-control_19upo_44"
                    >
                      <div
                        class="_container_153f2_10"
                      >
                        <input
                          aria-describedby="_r_2g_"
                          checked=""
                          class="_input_153f2_18"
                          disabled=""
                          id="checkbox_wAHG75JNTN"
                          type="checkbox"
                        />
                        <div
                          class="_ui_153f2_19"
                        >
                          <svg
                            aria-hidden="true"
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M9.55 17.575q-.2 0-.375-.062a.9.9 0 0 1-.325-.213L4.55 13q-.274-.274-.262-.713.012-.437.287-.712a.95.95 0 0 1 .7-.275q.425 0 .7.275L9.55 15.15l8.475-8.475q.274-.275.713-.275.437 0 .712.275.275.274.275.713 0 .437-.275.712l-9.2 9.2q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063"
                            />
                          </svg>
                        </div>
                      </div>
                    </div>
                    <div
                      class="_inline-field-body_19upo_38"
                    >
                      <label
                        class="_label_19upo_59"
                        for="checkbox_wAHG75JNTN"
                      >
                        <span
                          class="mx_LabelledCheckbox_label"
                        >
                          Notify when someone uses a keyword
                        </span>
                      </label>
                      <span
                        class="_message_19upo_85 _help-message_19upo_91"
                        id="_r_2g_"
                      >
                        Enter keywords here, or use for spelling variations or nicknames
                      </span>
                    </div>
                  </div>
                </form>
              </div>
              <div
                class="mx_TagComposer mx_TagComposer_disabled"
              >
                <form
                  class="mx_TagComposer_input"
                >
                  <div
                    class="mx_Field mx_Field_input"
                  >
                    <input
                      autocomplete="off"
                      disabled=""
                      id="mx_NotificationSettings2_Keywords_field"
                      label="Keyword"
                      placeholder="New keyword"
                      type="text"
                      value=""
                    />
                    <label
                      for="mx_NotificationSettings2_Keywords_field"
                    >
                      Keyword
                    </label>
                  </div>
                  <div
                    aria-disabled="true"
                    class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary mx_AccessibleButton_disabled"
                    disabled=""
                    role="button"
                    tabindex="0"
                  >
                    Add
                  </div>
                </form>
                <div
                  class="mx_TagComposer_tags"
                  role="list"
                />
              </div>
              <div
                class="_inline-field_19upo_32"
              >
                <div
                  class="_inline-field-control_19upo_44"
                >
                  <div
                    class="_container_udcm8_10"
                  >
                    <input
                      checked=""
                      class="_input_udcm8_24"
                      id="mx_SettingsFlag_kNU64raTLcRs"
                      role="switch"
                      type="checkbox"
                    />
                    <div
                      class="_ui_udcm8_34"
                    />
                  </div>
                </div>
                <div
                  class="_inline-field-body_19upo_38"
                >
                  <label
                    class="_label_19upo_59"
                    for="mx_SettingsFlag_kNU64raTLcRs"
                  >
                    Show all activity in the room list (dots or number of unread messages)
                  </label>
                </div>
              </div>
              <div
                class="_inline-field_19upo_32"
              >
                <div
                  class="_inline-field-control_19upo_44"
                >
                  <div
                    class="_container_udcm8_10"
                  >
                    <input
                      checked=""
                      class="_input_udcm8_24"
                      id="mx_SettingsFlag_QRlYy75nfv5b"
                      role="switch"
                      type="checkbox"
                    />
                    <div
                      class="_ui_udcm8_34"
                    />
                  </div>
                </div>
                <div
                  class="_inline-field-body_19upo_38"
                >
                  <label
                    class="_label_19upo_59"
                    for="mx_SettingsFlag_QRlYy75nfv5b"
                  >
                    Only show notifications in the thread activity centre
                  </label>
                </div>
              </div>
            </div>
          </div>
          <div
            class="mx_SettingsSubsection mx_SettingsSubsection_newUi"
          >
            <div
              class="mx_SettingsSubsectionHeading"
            >
              <h3
                class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
              >
                Email summary
              </h3>
            </div>
            <div
              class="mx_SettingsSubsection_content mx_SettingsSubsection_content_newUi"
            >
              <div
                class="mx_SettingsSubsection_text"
              >
                Receive an email summary of missed notifications
              </div>
              <div
                class="mx_SettingsSubsection_description mx_NotificationPusherSettings_detail"
              >
                <div
                  class="mx_SettingsSubsection_text"
                >
                  <span>
                    Select which emails you want to send summaries to. Manage your emails in 
                    <div
                      class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link_inline"
                      role="button"
                      tabindex="0"
                    >
                      General
                    </div>
                    .
                  </span>
                </div>
              </div>
              <div
                class="mx_SettingsIndent"
              />
            </div>
            <div
              class="_separator_cqpyv_8"
              data-kind="primary"
              data-orientation="horizontal"
              role="separator"
            />
          </div>
          <div
            class="mx_SettingsSubsection"
          >
            <div
              class="mx_SettingsSubsectionHeading"
            >
              <h3
                class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
              >
                Quick Actions
              </h3>
            </div>
            <div
              class="mx_SettingsSubsection_content"
            >
              <div
                aria-disabled="true"
                class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_danger_outline mx_AccessibleButton_disabled"
                disabled=""
                role="button"
                tabindex="0"
              >
                Reset to default settings
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`<Notifications /> matches the snapshot 1`] = `
<div>
  <form
    class="_root_19upo_16"
  >
    <div
      class="mx_NotificationSettings2"
    >
      <div
        class="mx_SettingsSection"
      >
        <div
          class="mx_SettingsSection_subSections"
        >
          <div
            class="mx_SettingsSubsection_content mx_NotificationSettings2_flags"
          >
            <div
              class="_inline-field_19upo_32"
            >
              <div
                class="_inline-field-control_19upo_44"
              >
                <div
                  class="_container_udcm8_10"
                >
                  <input
                    checked=""
                    class="_input_udcm8_24"
                    id="_r_0_"
                    role="switch"
                    type="checkbox"
                  />
                  <div
                    class="_ui_udcm8_34"
                  />
                </div>
              </div>
              <div
                class="_inline-field-body_19upo_38"
              >
                <label
                  class="_label_19upo_59"
                  for="_r_0_"
                >
                  Enable notifications for this account
                </label>
              </div>
            </div>
            <div
              class="_inline-field_19upo_32"
            >
              <div
                class="_inline-field-control_19upo_44"
              >
                <div
                  class="_container_udcm8_10"
                >
                  <input
                    class="_input_udcm8_24"
                    id="mx_SettingsFlag_vY7Q4uEh9K38"
                    role="switch"
                    type="checkbox"
                  />
                  <div
                    class="_ui_udcm8_34"
                  />
                </div>
              </div>
              <div
                class="_inline-field-body_19upo_38"
              >
                <label
                  class="_label_19upo_59"
                  for="mx_SettingsFlag_vY7Q4uEh9K38"
                >
                  Enable desktop notifications for this session
                </label>
              </div>
            </div>
            <div
              class="_inline-field_19upo_32"
            >
              <div
                class="_inline-field-control_19upo_44"
              >
                <div
                  class="_container_udcm8_10"
                >
                  <input
                    class="_input_udcm8_24"
                    id="mx_SettingsFlag_QgU2PomxwKpa"
                    role="switch"
                    type="checkbox"
                  />
                  <div
                    class="_ui_udcm8_34"
                  />
                </div>
              </div>
              <div
                class="_inline-field-body_19upo_38"
              >
                <label
                  class="_label_19upo_59"
                  for="mx_SettingsFlag_QgU2PomxwKpa"
                >
                  Show message preview in desktop notification
                </label>
              </div>
            </div>
            <div
              class="_inline-field_19upo_32"
            >
              <div
                class="_inline-field-control_19upo_44"
              >
                <div
                  class="_container_udcm8_10"
                >
                  <input
                    checked=""
                    class="_input_udcm8_24"
                    id="mx_SettingsFlag_6hpi3YEetmBG"
                    role="switch"
                    type="checkbox"
                  />
                  <div
                    class="_ui_udcm8_34"
                  />
                </div>
              </div>
              <div
                class="_inline-field-body_19upo_38"
              >
                <label
                  class="_label_19upo_59"
                  for="mx_SettingsFlag_6hpi3YEetmBG"
                >
                  Enable audible notifications for this session
                </label>
              </div>
            </div>
          </div>
          <div
            class="mx_SettingsSubsection"
          >
            <div
              class="mx_SettingsSubsectionHeading"
            >
              <h2
                class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
              >
                I want to be notified for (Default Setting)
              </h2>
            </div>
            <div
              class="mx_SettingsSubsection_description"
            >
              <div
                class="mx_SettingsSubsection_text"
              >
                This setting will be applied by default to all your rooms.
              </div>
            </div>
            <div
              class="mx_SettingsSubsection_content"
            >
              <label
                class="mx_StyledRadioButton mx_StyledRadioButton_enabled"
              >
                <input
                  checked=""
                  id="defaultNotificationLevel-all_messages"
                  name="defaultNotificationLevel"
                  type="radio"
                  value="all_messages"
                />
                <div>
                  <div />
                </div>
                <div
                  class="mx_StyledRadioButton_content"
                >
                  All messages
                </div>
                <div
                  class="mx_StyledRadioButton_spacer"
                />
              </label>
              <label
                class="mx_StyledRadioButton mx_StyledRadioButton_enabled mx_StyledRadioButton_checked"
              >
                <input
                  id="defaultNotificationLevel-people_mentions_keywords"
                  name="defaultNotificationLevel"
                  type="radio"
                  value="people_mentions_keywords"
                />
                <div>
                  <div />
                </div>
                <div
                  class="mx_StyledRadioButton_content"
                >
                  People, Mentions and Keywords
                </div>
                <div
                  class="mx_StyledRadioButton_spacer"
                />
              </label>
              <label
                class="mx_StyledRadioButton mx_StyledRadioButton_enabled"
              >
                <input
                  id="defaultNotificationLevel-mentions_keywords"
                  name="defaultNotificationLevel"
                  type="radio"
                  value="mentions_keywords"
                />
                <div>
                  <div />
                </div>
                <div
                  class="mx_StyledRadioButton_content"
                >
                  Mentions and Keywords only
                </div>
                <div
                  class="mx_StyledRadioButton_spacer"
                />
              </label>
            </div>
          </div>
          <div
            class="mx_SettingsSubsection"
          >
            <div
              class="mx_SettingsSubsectionHeading"
            >
              <h2
                class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
              >
                Play a sound for
              </h2>
            </div>
            <div
              class="mx_SettingsSubsection_description"
            >
              <div
                class="mx_SettingsSubsection_text"
              >
                Applied by default to all rooms on all devices.
              </div>
            </div>
            <div
              class="mx_SettingsSubsection_content"
            >
              <div
                class="mx_LabelledCheckbox"
              >
                <form
                  class="_root_19upo_16"
                >
                  <div
                    class="_inline-field_19upo_32"
                  >
                    <div
                      class="_inline-field-control_19upo_44"
                    >
                      <div
                        class="_container_153f2_10"
                      >
                        <input
                          checked=""
                          class="_input_153f2_18"
                          id="checkbox_OEPN1su1JY"
                          type="checkbox"
                        />
                        <div
                          class="_ui_153f2_19"
                        >
                          <svg
                            aria-hidden="true"
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M9.55 17.575q-.2 0-.375-.062a.9.9 0 0 1-.325-.213L4.55 13q-.274-.274-.262-.713.012-.437.287-.712a.95.95 0 0 1 .7-.275q.425 0 .7.275L9.55 15.15l8.475-8.475q.274-.275.713-.275.437 0 .712.275.275.274.275.713 0 .437-.275.712l-9.2 9.2q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063"
                            />
                          </svg>
                        </div>
                      </div>
                    </div>
                    <div
                      class="_inline-field-body_19upo_38"
                    >
                      <label
                        class="_label_19upo_59"
                        for="checkbox_OEPN1su1JY"
                      >
                        <span
                          class="mx_LabelledCheckbox_label"
                        >
                          People
                        </span>
                      </label>
                    </div>
                  </div>
                </form>
              </div>
              <div
                class="mx_LabelledCheckbox"
              >
                <form
                  class="_root_19upo_16"
                >
                  <div
                    class="_inline-field_19upo_32"
                  >
                    <div
                      class="_inline-field-control_19upo_44"
                    >
                      <div
                        class="_container_153f2_10"
                      >
                        <input
                          checked=""
                          class="_input_153f2_18"
                          id="checkbox_VtOyR5kbu3"
                          type="checkbox"
                        />
                        <div
                          class="_ui_153f2_19"
                        >
                          <svg
                            aria-hidden="true"
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M9.55 17.575q-.2 0-.375-.062a.9.9 0 0 1-.325-.213L4.55 13q-.274-.274-.262-.713.012-.437.287-.712a.95.95 0 0 1 .7-.275q.425 0 .7.275L9.55 15.15l8.475-8.475q.274-.275.713-.275.437 0 .712.275.275.274.275.713 0 .437-.275.712l-9.2 9.2q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063"
                            />
                          </svg>
                        </div>
                      </div>
                    </div>
                    <div
                      class="_inline-field-body_19upo_38"
                    >
                      <label
                        class="_label_19upo_59"
                        for="checkbox_VtOyR5kbu3"
                      >
                        <span
                          class="mx_LabelledCheckbox_label"
                        >
                          Mentions and Keywords
                        </span>
                      </label>
                    </div>
                  </div>
                </form>
              </div>
              <div
                class="mx_LabelledCheckbox"
              >
                <form
                  class="_root_19upo_16"
                >
                  <div
                    class="_inline-field_19upo_32"
                  >
                    <div
                      class="_inline-field-control_19upo_44"
                    >
                      <div
                        class="_container_153f2_10"
                      >
                        <input
                          checked=""
                          class="_input_153f2_18"
                          id="checkbox_pEwuLn9Enn"
                          type="checkbox"
                        />
                        <div
                          class="_ui_153f2_19"
                        >
                          <svg
                            aria-hidden="true"
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M9.55 17.575q-.2 0-.375-.062a.9.9 0 0 1-.325-.213L4.55 13q-.274-.274-.262-.713.012-.437.287-.712a.95.95 0 0 1 .7-.275q.425 0 .7.275L9.55 15.15l8.475-8.475q.274-.275.713-.275.437 0 .712.275.275.274.275.713 0 .437-.275.712l-9.2 9.2q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063"
                            />
                          </svg>
                        </div>
                      </div>
                    </div>
                    <div
                      class="_inline-field-body_19upo_38"
                    >
                      <label
                        class="_label_19upo_59"
                        for="checkbox_pEwuLn9Enn"
                      >
                        <span
                          class="mx_LabelledCheckbox_label"
                        >
                          Audio and Video calls
                        </span>
                      </label>
                    </div>
                  </div>
                </form>
              </div>
            </div>
          </div>
          <div
            class="mx_SettingsSubsection"
          >
            <div
              class="mx_SettingsSubsectionHeading"
            >
              <h2
                class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
              >
                Other things we think you might be interested in:
              </h2>
            </div>
            <div
              class="mx_SettingsSubsection_content"
            >
              <div
                class="mx_LabelledCheckbox"
              >
                <form
                  class="_root_19upo_16"
                >
                  <div
                    class="_inline-field_19upo_32"
                  >
                    <div
                      class="_inline-field-control_19upo_44"
                    >
                      <div
                        class="_container_153f2_10"
                      >
                        <input
                          checked=""
                          class="_input_153f2_18"
                          id="checkbox_YuxfFEpOsz"
                          type="checkbox"
                        />
                        <div
                          class="_ui_153f2_19"
                        >
                          <svg
                            aria-hidden="true"
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M9.55 17.575q-.2 0-.375-.062a.9.9 0 0 1-.325-.213L4.55 13q-.274-.274-.262-.713.012-.437.287-.712a.95.95 0 0 1 .7-.275q.425 0 .7.275L9.55 15.15l8.475-8.475q.274-.275.713-.275.437 0 .712.275.275.274.275.713 0 .437-.275.712l-9.2 9.2q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063"
                            />
                          </svg>
                        </div>
                      </div>
                    </div>
                    <div
                      class="_inline-field-body_19upo_38"
                    >
                      <label
                        class="_label_19upo_59"
                        for="checkbox_YuxfFEpOsz"
                      >
                        <span
                          class="mx_LabelledCheckbox_label"
                        >
                          Invited to a room
                        </span>
                      </label>
                    </div>
                  </div>
                </form>
              </div>
              <div
                class="mx_LabelledCheckbox"
              >
                <form
                  class="_root_19upo_16"
                >
                  <div
                    class="_inline-field_19upo_32"
                  >
                    <div
                      class="_inline-field-control_19upo_44"
                    >
                      <div
                        class="_container_153f2_10"
                      >
                        <input
                          class="_input_153f2_18"
                          id="checkbox_tWhQkBerF1"
                          type="checkbox"
                        />
                        <div
                          class="_ui_153f2_19"
                        >
                          <svg
                            aria-hidden="true"
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M9.55 17.575q-.2 0-.375-.062a.9.9 0 0 1-.325-.213L4.55 13q-.274-.274-.262-.713.012-.437.287-.712a.95.95 0 0 1 .7-.275q.425 0 .7.275L9.55 15.15l8.475-8.475q.274-.275.713-.275.437 0 .712.275.275.274.275.713 0 .437-.275.712l-9.2 9.2q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063"
                            />
                          </svg>
                        </div>
                      </div>
                    </div>
                    <div
                      class="_inline-field-body_19upo_38"
                    >
                      <label
                        class="_label_19upo_59"
                        for="checkbox_tWhQkBerF1"
                      >
                        <span
                          class="mx_LabelledCheckbox_label"
                        >
                          New room activity, upgrades and status messages occur
                        </span>
                      </label>
                    </div>
                  </div>
                </form>
              </div>
              <div
                class="mx_LabelledCheckbox"
              >
                <form
                  class="_root_19upo_16"
                >
                  <div
                    class="_inline-field_19upo_32"
                  >
                    <div
                      class="_inline-field-control_19upo_44"
                    >
                      <div
                        class="_container_153f2_10"
                      >
                        <input
                          checked=""
                          class="_input_153f2_18"
                          id="checkbox_ejc4GFes1U"
                          type="checkbox"
                        />
                        <div
                          class="_ui_153f2_19"
                        >
                          <svg
                            aria-hidden="true"
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M9.55 17.575q-.2 0-.375-.062a.9.9 0 0 1-.325-.213L4.55 13q-.274-.274-.262-.713.012-.437.287-.712a.95.95 0 0 1 .7-.275q.425 0 .7.275L9.55 15.15l8.475-8.475q.274-.275.713-.275.437 0 .712.275.275.274.275.713 0 .437-.275.712l-9.2 9.2q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063"
                            />
                          </svg>
                        </div>
                      </div>
                    </div>
                    <div
                      class="_inline-field-body_19upo_38"
                    >
                      <label
                        class="_label_19upo_59"
                        for="checkbox_ejc4GFes1U"
                      >
                        <span
                          class="mx_LabelledCheckbox_label"
                        >
                          Messages sent by bots
                        </span>
                      </label>
                    </div>
                  </div>
                </form>
              </div>
            </div>
          </div>
          <div
            class="mx_SettingsSubsection"
          >
            <div
              class="mx_SettingsSubsectionHeading"
            >
              <h2
                class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
              >
                Mentions and Keywords
              </h2>
            </div>
            <div
              class="mx_SettingsSubsection_description"
            >
              <div
                class="mx_SettingsSubsection_text"
              >
                <span>
                  Show a badge 
                  <div
                    class="mx_NotificationBadge mx_NotificationBadge_visible mx_NotificationBadge_level_notification mx_NotificationBadge_2char cpd-theme-light"
                  >
                    <span
                      class="mx_NotificationBadge_count"
                    >
                      1
                    </span>
                  </div>
                   when keywords are used in a room.
                </span>
              </div>
            </div>
            <div
              class="mx_SettingsSubsection_content"
            >
              <div
                class="mx_LabelledCheckbox"
              >
                <form
                  class="_root_19upo_16"
                >
                  <div
                    class="_inline-field_19upo_32"
                  >
                    <div
                      class="_inline-field-control_19upo_44"
                    >
                      <div
                        class="_container_153f2_10"
                      >
                        <input
                          checked=""
                          class="_input_153f2_18"
                          id="checkbox_FzOK2nvfGF"
                          type="checkbox"
                        />
                        <div
                          class="_ui_153f2_19"
                        >
                          <svg
                            aria-hidden="true"
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M9.55 17.575q-.2 0-.375-.062a.9.9 0 0 1-.325-.213L4.55 13q-.274-.274-.262-.713.012-.437.287-.712a.95.95 0 0 1 .7-.275q.425 0 .7.275L9.55 15.15l8.475-8.475q.274-.275.713-.275.437 0 .712.275.275.274.275.713 0 .437-.275.712l-9.2 9.2q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063"
                            />
                          </svg>
                        </div>
                      </div>
                    </div>
                    <div
                      class="_inline-field-body_19upo_38"
                    >
                      <label
                        class="_label_19upo_59"
                        for="checkbox_FzOK2nvfGF"
                      >
                        <span
                          class="mx_LabelledCheckbox_label"
                        >
                          Notify when someone mentions using @room
                        </span>
                      </label>
                    </div>
                  </div>
                </form>
              </div>
              <div
                class="mx_LabelledCheckbox"
                id="mx_NotificationSettings2_MentionCheckbox"
              >
                <form
                  class="_root_19upo_16"
                >
                  <div
                    class="_inline-field_19upo_32"
                  >
                    <div
                      class="_inline-field-control_19upo_44"
                    >
                      <div
                        class="_container_153f2_10"
                      >
                        <input
                          checked=""
                          class="_input_153f2_18"
                          id="checkbox_MldL2r2vbs"
                          type="checkbox"
                        />
                        <div
                          class="_ui_153f2_19"
                        >
                          <svg
                            aria-hidden="true"
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M9.55 17.575q-.2 0-.375-.062a.9.9 0 0 1-.325-.213L4.55 13q-.274-.274-.262-.713.012-.437.287-.712a.95.95 0 0 1 .7-.275q.425 0 .7.275L9.55 15.15l8.475-8.475q.274-.275.713-.275.437 0 .712.275.275.274.275.713 0 .437-.275.712l-9.2 9.2q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063"
                            />
                          </svg>
                        </div>
                      </div>
                    </div>
                    <div
                      class="_inline-field-body_19upo_38"
                    >
                      <label
                        class="_label_19upo_59"
                        for="checkbox_MldL2r2vbs"
                      >
                        <span
                          class="mx_LabelledCheckbox_label"
                        >
                          Notify when someone mentions using @displayname or @userId:matrix.org
                        </span>
                      </label>
                    </div>
                  </div>
                </form>
              </div>
              <div
                class="mx_LabelledCheckbox"
              >
                <form
                  class="_root_19upo_16"
                >
                  <div
                    class="_inline-field_19upo_32"
                  >
                    <div
                      class="_inline-field-control_19upo_44"
                    >
                      <div
                        class="_container_153f2_10"
                      >
                        <input
                          aria-describedby="_r_11_"
                          checked=""
                          class="_input_153f2_18"
                          id="checkbox_SwicmKUiOB"
                          type="checkbox"
                        />
                        <div
                          class="_ui_153f2_19"
                        >
                          <svg
                            aria-hidden="true"
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M9.55 17.575q-.2 0-.375-.062a.9.9 0 0 1-.325-.213L4.55 13q-.274-.274-.262-.713.012-.437.287-.712a.95.95 0 0 1 .7-.275q.425 0 .7.275L9.55 15.15l8.475-8.475q.274-.275.713-.275.437 0 .712.275.275.274.275.713 0 .437-.275.712l-9.2 9.2q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063"
                            />
                          </svg>
                        </div>
                      </div>
                    </div>
                    <div
                      class="_inline-field-body_19upo_38"
                    >
                      <label
                        class="_label_19upo_59"
                        for="checkbox_SwicmKUiOB"
                      >
                        <span
                          class="mx_LabelledCheckbox_label"
                        >
                          Notify when someone uses a keyword
                        </span>
                      </label>
                      <span
                        class="_message_19upo_85 _help-message_19upo_91"
                        id="_r_11_"
                      >
                        Enter keywords here, or use for spelling variations or nicknames
                      </span>
                    </div>
                  </div>
                </form>
              </div>
              <div
                class="mx_TagComposer"
              >
                <form
                  class="mx_TagComposer_input"
                >
                  <div
                    class="mx_Field mx_Field_input"
                  >
                    <input
                      autocomplete="off"
                      id="mx_NotificationSettings2_Keywords_field"
                      label="Keyword"
                      placeholder="New keyword"
                      type="text"
                      value=""
                    />
                    <label
                      for="mx_NotificationSettings2_Keywords_field"
                    >
                      Keyword
                    </label>
                  </div>
                  <div
                    class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary"
                    role="button"
                    tabindex="0"
                  >
                    Add
                  </div>
                </form>
                <div
                  class="mx_TagComposer_tags"
                  role="list"
                >
                  <div
                    class="mx_Tag"
                    role="listitem"
                  >
                    justjann3
                    <div
                      aria-label="Remove"
                      class="mx_AccessibleButton mx_Tag_delete"
                      role="button"
                      tabindex="0"
                    >
                      <svg
                        fill="currentColor"
                        height="1em"
                        viewBox="0 0 24 24"
                        width="1em"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="M6.293 6.293a1 1 0 0 1 1.414 0L12 10.586l4.293-4.293a1 1 0 1 1 1.414 1.414L13.414 12l4.293 4.293a1 1 0 0 1-1.414 1.414L12 13.414l-4.293 4.293a1 1 0 0 1-1.414-1.414L10.586 12 6.293 7.707a1 1 0 0 1 0-1.414"
                        />
                      </svg>
                    </div>
                  </div>
                  <div
                    class="mx_Tag"
                    role="listitem"
                  >
                    justj4nn3
                    <div
                      aria-label="Remove"
                      class="mx_AccessibleButton mx_Tag_delete"
                      role="button"
                      tabindex="0"
                    >
                      <svg
                        fill="currentColor"
                        height="1em"
                        viewBox="0 0 24 24"
                        width="1em"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="M6.293 6.293a1 1 0 0 1 1.414 0L12 10.586l4.293-4.293a1 1 0 1 1 1.414 1.414L13.414 12l4.293 4.293a1 1 0 0 1-1.414 1.414L12 13.414l-4.293 4.293a1 1 0 0 1-1.414-1.414L10.586 12 6.293 7.707a1 1 0 0 1 0-1.414"
                        />
                      </svg>
                    </div>
                  </div>
                  <div
                    class="mx_Tag"
                    role="listitem"
                  >
                    justj4nne
                    <div
                      aria-label="Remove"
                      class="mx_AccessibleButton mx_Tag_delete"
                      role="button"
                      tabindex="0"
                    >
                      <svg
                        fill="currentColor"
                        height="1em"
                        viewBox="0 0 24 24"
                        width="1em"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="M6.293 6.293a1 1 0 0 1 1.414 0L12 10.586l4.293-4.293a1 1 0 1 1 1.414 1.414L13.414 12l4.293 4.293a1 1 0 0 1-1.414 1.414L12 13.414l-4.293 4.293a1 1 0 0 1-1.414-1.414L10.586 12 6.293 7.707a1 1 0 0 1 0-1.414"
                        />
                      </svg>
                    </div>
                  </div>
                  <div
                    class="mx_Tag"
                    role="listitem"
                  >
                    Janne
                    <div
                      aria-label="Remove"
                      class="mx_AccessibleButton mx_Tag_delete"
                      role="button"
                      tabindex="0"
                    >
                      <svg
                        fill="currentColor"
                        height="1em"
                        viewBox="0 0 24 24"
                        width="1em"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="M6.293 6.293a1 1 0 0 1 1.414 0L12 10.586l4.293-4.293a1 1 0 1 1 1.414 1.414L13.414 12l4.293 4.293a1 1 0 0 1-1.414 1.414L12 13.414l-4.293 4.293a1 1 0 0 1-1.414-1.414L10.586 12 6.293 7.707a1 1 0 0 1 0-1.414"
                        />
                      </svg>
                    </div>
                  </div>
                  <div
                    class="mx_Tag"
                    role="listitem"
                  >
                    J4nne
                    <div
                      aria-label="Remove"
                      class="mx_AccessibleButton mx_Tag_delete"
                      role="button"
                      tabindex="0"
                    >
                      <svg
                        fill="currentColor"
                        height="1em"
                        viewBox="0 0 24 24"
                        width="1em"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="M6.293 6.293a1 1 0 0 1 1.414 0L12 10.586l4.293-4.293a1 1 0 1 1 1.414 1.414L13.414 12l4.293 4.293a1 1 0 0 1-1.414 1.414L12 13.414l-4.293 4.293a1 1 0 0 1-1.414-1.414L10.586 12 6.293 7.707a1 1 0 0 1 0-1.414"
                        />
                      </svg>
                    </div>
                  </div>
                  <div
                    class="mx_Tag"
                    role="listitem"
                  >
                    Jann3
                    <div
                      aria-label="Remove"
                      class="mx_AccessibleButton mx_Tag_delete"
                      role="button"
                      tabindex="0"
                    >
                      <svg
                        fill="currentColor"
                        height="1em"
                        viewBox="0 0 24 24"
                        width="1em"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="M6.293 6.293a1 1 0 0 1 1.414 0L12 10.586l4.293-4.293a1 1 0 1 1 1.414 1.414L13.414 12l4.293 4.293a1 1 0 0 1-1.414 1.414L12 13.414l-4.293 4.293a1 1 0 0 1-1.414-1.414L10.586 12 6.293 7.707a1 1 0 0 1 0-1.414"
                        />
                      </svg>
                    </div>
                  </div>
                  <div
                    class="mx_Tag"
                    role="listitem"
                  >
                    jann3
                    <div
                      aria-label="Remove"
                      class="mx_AccessibleButton mx_Tag_delete"
                      role="button"
                      tabindex="0"
                    >
                      <svg
                        fill="currentColor"
                        height="1em"
                        viewBox="0 0 24 24"
                        width="1em"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="M6.293 6.293a1 1 0 0 1 1.414 0L12 10.586l4.293-4.293a1 1 0 1 1 1.414 1.414L13.414 12l4.293 4.293a1 1 0 0 1-1.414 1.414L12 13.414l-4.293 4.293a1 1 0 0 1-1.414-1.414L10.586 12 6.293 7.707a1 1 0 0 1 0-1.414"
                        />
                      </svg>
                    </div>
                  </div>
                  <div
                    class="mx_Tag"
                    role="listitem"
                  >
                    j4nne
                    <div
                      aria-label="Remove"
                      class="mx_AccessibleButton mx_Tag_delete"
                      role="button"
                      tabindex="0"
                    >
                      <svg
                        fill="currentColor"
                        height="1em"
                        viewBox="0 0 24 24"
                        width="1em"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="M6.293 6.293a1 1 0 0 1 1.414 0L12 10.586l4.293-4.293a1 1 0 1 1 1.414 1.414L13.414 12l4.293 4.293a1 1 0 0 1-1.414 1.414L12 13.414l-4.293 4.293a1 1 0 0 1-1.414-1.414L10.586 12 6.293 7.707a1 1 0 0 1 0-1.414"
                        />
                      </svg>
                    </div>
                  </div>
                  <div
                    class="mx_Tag"
                    role="listitem"
                  >
                    janne
                    <div
                      aria-label="Remove"
                      class="mx_AccessibleButton mx_Tag_delete"
                      role="button"
                      tabindex="0"
                    >
                      <svg
                        fill="currentColor"
                        height="1em"
                        viewBox="0 0 24 24"
                        width="1em"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="M6.293 6.293a1 1 0 0 1 1.414 0L12 10.586l4.293-4.293a1 1 0 1 1 1.414 1.414L13.414 12l4.293 4.293a1 1 0 0 1-1.414 1.414L12 13.414l-4.293 4.293a1 1 0 0 1-1.414-1.414L10.586 12 6.293 7.707a1 1 0 0 1 0-1.414"
                        />
                      </svg>
                    </div>
                  </div>
                </div>
              </div>
              <div
                class="_inline-field_19upo_32"
              >
                <div
                  class="_inline-field-control_19upo_44"
                >
                  <div
                    class="_container_udcm8_10"
                  >
                    <input
                      checked=""
                      class="_input_udcm8_24"
                      id="mx_SettingsFlag_kNU64raTLcRs"
                      role="switch"
                      type="checkbox"
                    />
                    <div
                      class="_ui_udcm8_34"
                    />
                  </div>
                </div>
                <div
                  class="_inline-field-body_19upo_38"
                >
                  <label
                    class="_label_19upo_59"
                    for="mx_SettingsFlag_kNU64raTLcRs"
                  >
                    Show all activity in the room list (dots or number of unread messages)
                  </label>
                </div>
              </div>
              <div
                class="_inline-field_19upo_32"
              >
                <div
                  class="_inline-field-control_19upo_44"
                >
                  <div
                    class="_container_udcm8_10"
                  >
                    <input
                      checked=""
                      class="_input_udcm8_24"
                      id="mx_SettingsFlag_QRlYy75nfv5b"
                      role="switch"
                      type="checkbox"
                    />
                    <div
                      class="_ui_udcm8_34"
                    />
                  </div>
                </div>
                <div
                  class="_inline-field-body_19upo_38"
                >
                  <label
                    class="_label_19upo_59"
                    for="mx_SettingsFlag_QRlYy75nfv5b"
                  >
                    Only show notifications in the thread activity centre
                  </label>
                </div>
              </div>
            </div>
          </div>
          <div
            class="mx_SettingsSubsection mx_SettingsSubsection_newUi"
          >
            <div
              class="mx_SettingsSubsectionHeading"
            >
              <h3
                class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
              >
                Email summary
              </h3>
            </div>
            <div
              class="mx_SettingsSubsection_content mx_SettingsSubsection_content_newUi"
            >
              <div
                class="mx_SettingsSubsection_text"
              >
                Receive an email summary of missed notifications
              </div>
              <div
                class="mx_SettingsSubsection_description mx_NotificationPusherSettings_detail"
              >
                <div
                  class="mx_SettingsSubsection_text"
                >
                  <span>
                    Select which emails you want to send summaries to. Manage your emails in 
                    <div
                      class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link_inline"
                      role="button"
                      tabindex="0"
                    >
                      General
                    </div>
                    .
                  </span>
                </div>
              </div>
              <div
                class="mx_SettingsIndent"
              >
                <div
                  class="mx_LabelledCheckbox"
                >
                  <form
                    class="_root_19upo_16"
                  >
                    <div
                      class="_inline-field_19upo_32"
                    >
                      <div
                        class="_inline-field-control_19upo_44"
                      >
                        <div
                          class="_container_153f2_10"
                        >
                          <input
                            class="_input_153f2_18"
                            id="checkbox_dvqsxEaZtl"
                            type="checkbox"
                          />
                          <div
                            class="_ui_153f2_19"
                          >
                            <svg
                              aria-hidden="true"
                              fill="currentColor"
                              height="1em"
                              viewBox="0 0 24 24"
                              width="1em"
                              xmlns="http://www.w3.org/2000/svg"
                            >
                              <path
                                d="M9.55 17.575q-.2 0-.375-.062a.9.9 0 0 1-.325-.213L4.55 13q-.274-.274-.262-.713.012-.437.287-.712a.95.95 0 0 1 .7-.275q.425 0 .7.275L9.55 15.15l8.475-8.475q.274-.275.713-.275.437 0 .712.275.275.274.275.713 0 .437-.275.712l-9.2 9.2q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063"
                              />
                            </svg>
                          </div>
                        </div>
                      </div>
                      <div
                        class="_inline-field-body_19upo_38"
                      >
                        <label
                          class="_label_19upo_59"
                          for="checkbox_dvqsxEaZtl"
                        >
                          <span
                            class="mx_LabelledCheckbox_label"
                          >
                            test@example.tld
                          </span>
                        </label>
                      </div>
                    </div>
                  </form>
                </div>
              </div>
            </div>
            <div
              class="_separator_cqpyv_8"
              data-kind="primary"
              data-orientation="horizontal"
              role="separator"
            />
          </div>
          <div
            class="mx_SettingsSubsection mx_SettingsSubsection_newUi"
          >
            <div
              class="mx_SettingsSubsectionHeading"
            >
              <h3
                class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
              >
                Notification targets
              </h3>
            </div>
            <div
              class="mx_SettingsSubsection_content mx_SettingsSubsection_content_newUi"
            >
              <ul>
                <li>
                  My EyeFon
                </li>
              </ul>
            </div>
            <div
              class="_separator_cqpyv_8"
              data-kind="primary"
              data-orientation="horizontal"
              role="separator"
            />
          </div>
          <div
            class="mx_SettingsSubsection"
          >
            <div
              class="mx_SettingsSubsectionHeading"
            >
              <h3
                class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
              >
                Quick Actions
              </h3>
            </div>
            <div
              class="mx_SettingsSubsection_content"
            >
              <div
                class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_danger_outline"
                role="button"
                tabindex="0"
              >
                Reset to default settings
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;
