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

exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
<div>
  <div
    class="mx_NotificationSettings2"
  >
    <div
      class="mx_SettingsSection"
    >
      <div
        class="mx_SettingsSection_subSections"
      >
        <form
          class="_root_19upo_16 mx_SettingsSubsection_content"
        >
          <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>
        </form>
        <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>
            <form
              class="_root_19upo_16"
            >
              <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>
            </form>
          </div>
        </div>
        <div
          class="mx_SettingsSubsection mx_SettingsSubsection_newUi"
        >
          <div
            class="mx_SettingsSubsectionHeading"
          >
            <h2
              class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
            >
              Email summary
            </h2>
          </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_13qwf_8"
            data-kind="primary"
            data-orientation="horizontal"
            role="separator"
          />
        </div>
        <div
          class="mx_SettingsSubsection"
        >
          <div
            class="mx_SettingsSubsectionHeading"
          >
            <h2
              class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
            >
              Quick Actions
            </h2>
          </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>
</div>
`;

exports[`<Notifications /> matches the snapshot 1`] = `
<div>
  <div
    class="mx_NotificationSettings2"
  >
    <div
      class="mx_SettingsSection"
    >
      <div
        class="mx_SettingsSection_subSections"
      >
        <form
          class="_root_19upo_16 mx_SettingsSubsection_content"
        >
          <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>
        </form>
        <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>
            <form
              class="_root_19upo_16"
            >
              <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>
            </form>
          </div>
        </div>
        <div
          class="mx_SettingsSubsection mx_SettingsSubsection_newUi"
        >
          <div
            class="mx_SettingsSubsectionHeading"
          >
            <h2
              class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
            >
              Email summary
            </h2>
          </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_13qwf_8"
            data-kind="primary"
            data-orientation="horizontal"
            role="separator"
          />
        </div>
        <div
          class="mx_SettingsSubsection mx_SettingsSubsection_newUi"
        >
          <div
            class="mx_SettingsSubsectionHeading"
          >
            <h2
              class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
            >
              Notification targets
            </h2>
          </div>
          <div
            class="mx_SettingsSubsection_content mx_SettingsSubsection_content_newUi"
          >
            <ul>
              <li>
                My EyeFon
              </li>
            </ul>
          </div>
          <div
            class="_separator_13qwf_8"
            data-kind="primary"
            data-orientation="horizontal"
            role="separator"
          />
        </div>
        <div
          class="mx_SettingsSubsection"
        >
          <div
            class="mx_SettingsSubsectionHeading"
          >
            <h2
              class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
            >
              Quick Actions
            </h2>
          </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>
</div>
`;
