2022-08-04 08:19:52 +02:00
// Jest Snapshot v1, https://goo.gl/fbAQLP
2022-12-08 22:37:25 +01:00
exports[`RoomView for a local room in state CREATING should match the snapshot 1`] = `
<div>
<div
class="mx_RoomView mx_RoomView--local"
>
<header
2023-08-01 09:32:53 +02:00
class="mx_LegacyRoomHeader light-panel"
2022-12-08 22:37:25 +01:00
>
<div
2023-08-01 09:32:53 +02:00
class="mx_LegacyRoomHeader_wrapper"
2022-12-08 22:37:25 +01:00
>
<div
2023-08-01 09:32:53 +02:00
class="mx_LegacyRoomHeader_avatar"
2022-12-08 22:37:25 +01:00
>
<div
class="mx_DecoratedRoomAvatar"
>
<span
2024-03-07 15:40:03 +01:00
class="_avatar_mcap2_17 mx_BaseAvatar _avatar-imageless_mcap2_61"
2023-08-24 05:48:35 +02:00
data-color="3"
data-testid="avatar-img"
data-type="round"
2022-12-08 22:37:25 +01:00
role="presentation"
2023-08-24 05:48:35 +02:00
style="--cpd-avatar-size: 24px;"
2022-12-08 22:37:25 +01:00
>
2023-08-24 05:48:35 +02:00
u
2022-12-08 22:37:25 +01:00
</span>
</div>
</div>
<div
2023-08-01 09:32:53 +02:00
class="mx_LegacyRoomHeader_name mx_LegacyRoomHeader_name--textonly"
2022-12-08 22:37:25 +01:00
>
<div
aria-level="1"
2023-08-01 09:32:53 +02:00
class="mx_LegacyRoomHeader_nametext"
2022-12-08 22:37:25 +01:00
dir="auto"
role="heading"
title="@user:example.com"
>
@user:example.com
</div>
</div>
<div
2023-08-09 10:39:48 +02:00
aria-describedby="mx_TooltipTarget_vY7Q4uEh"
2023-08-01 09:32:53 +02:00
class="mx_LegacyRoomHeader_topic mx_RoomTopic"
2022-12-08 22:37:25 +01:00
dir="auto"
2023-04-20 10:25:53 +02:00
tabindex="0"
2022-12-08 22:37:25 +01:00
>
2023-04-20 10:25:53 +02:00
<span
dir="auto"
/>
2022-12-08 22:37:25 +01:00
</div>
</div>
</header>
<div
class="mx_RoomView_body"
>
<div
class="mx_LargeLoader"
>
<div
class="mx_Spinner"
>
<div
2023-02-14 10:05:01 +01:00
aria-label="Loading…"
2022-12-08 22:37:25 +01:00
class="mx_Spinner_icon"
data-testid="spinner"
role="progressbar"
style="width: 45px; height: 45px;"
/>
</div>
<div
class="mx_LargeLoader_text"
>
We're creating a room with @user:example.com
</div>
</div>
</div>
</div>
</div>
`;
2022-08-04 08:19:52 +02:00
2022-12-08 22:37:25 +01:00
exports[`RoomView for a local room in state ERROR should match the snapshot 1`] = `
<div>
<div
class="mx_RoomView mx_RoomView--local"
>
<header
2023-08-01 09:32:53 +02:00
class="mx_LegacyRoomHeader light-panel"
2022-12-08 22:37:25 +01:00
>
<div
2023-08-01 09:32:53 +02:00
class="mx_LegacyRoomHeader_wrapper"
2022-12-08 22:37:25 +01:00
>
<div
2023-08-01 09:32:53 +02:00
class="mx_LegacyRoomHeader_avatar"
2022-12-08 22:37:25 +01:00
>
<div
class="mx_DecoratedRoomAvatar"
>
<span
2024-03-07 15:40:03 +01:00
class="_avatar_mcap2_17 mx_BaseAvatar _avatar-imageless_mcap2_61"
2023-08-24 05:48:35 +02:00
data-color="3"
data-testid="avatar-img"
data-type="round"
2022-12-08 22:37:25 +01:00
role="presentation"
2023-08-24 05:48:35 +02:00
style="--cpd-avatar-size: 24px;"
2022-12-08 22:37:25 +01:00
>
2023-08-24 05:48:35 +02:00
u
2022-12-08 22:37:25 +01:00
</span>
</div>
</div>
<div
2023-08-01 09:32:53 +02:00
class="mx_LegacyRoomHeader_name mx_LegacyRoomHeader_name--textonly"
2022-12-08 22:37:25 +01:00
>
<div
aria-level="1"
2023-08-01 09:32:53 +02:00
class="mx_LegacyRoomHeader_nametext"
2022-12-08 22:37:25 +01:00
dir="auto"
role="heading"
title="@user:example.com"
>
@user:example.com
</div>
</div>
<div
2023-08-09 10:39:48 +02:00
aria-describedby="mx_TooltipTarget_vY7Q4uEh"
2023-08-01 09:32:53 +02:00
class="mx_LegacyRoomHeader_topic mx_RoomTopic"
2022-12-08 22:37:25 +01:00
dir="auto"
2023-04-20 10:25:53 +02:00
tabindex="0"
2022-12-08 22:37:25 +01:00
>
2023-04-20 10:25:53 +02:00
<span
dir="auto"
/>
2022-12-08 22:37:25 +01:00
</div>
</div>
</header>
<main
class="mx_RoomView_body"
>
<div
class="mx_RoomView_timeline"
>
<div
class="mx_AutoHideScrollbar mx_ScrollPanel mx_RoomView_messagePanel"
tabindex="-1"
>
<div
class="mx_RoomView_messageListWrapper"
>
<ol
aria-live="polite"
class="mx_RoomView_MessageList"
style="height: 400px;"
>
<li
class="mx_NewRoomIntro"
>
<div
class="mx_EventTileBubble mx_cryptoEvent mx_cryptoEvent_icon_warning"
>
<div
class="mx_EventTileBubble_title"
>
End-to-end encryption isn't enabled
</div>
<div
class="mx_EventTileBubble_subtitle"
>
<span>
Your private messages are normally encrypted, but this room isn't. Usually this is due to an unsupported device or method being used, like email invites.
</span>
</div>
</div>
2023-08-24 05:48:35 +02:00
<button
2022-12-08 22:37:25 +01:00
aria-label="Avatar"
aria-live="off"
2024-03-07 15:40:03 +01:00
class="_avatar_mcap2_17 mx_BaseAvatar _avatar-imageless_mcap2_61"
2023-08-24 05:48:35 +02:00
data-color="3"
data-testid="avatar-img"
data-type="round"
2022-12-08 22:37:25 +01:00
role="button"
2023-08-24 05:48:35 +02:00
style="--cpd-avatar-size: 52px;"
2022-12-08 22:37:25 +01:00
>
2023-08-24 05:48:35 +02:00
u
</button>
2022-12-08 22:37:25 +01:00
<h2>
@user:example.com
</h2>
<p>
<span>
Send your first message to invite
<b>
@user:example.com
</b>
to chat
</span>
</p>
</li>
</ol>
</div>
</div>
</div>
<div
class="mx_RoomStatusBar mx_RoomStatusBar_unsentMessages"
>
<div
role="alert"
>
<div
class="mx_RoomStatusBar_unsentBadge"
>
<div
2024-03-22 01:27:13 +01:00
class="mx_NotificationBadge mx_NotificationBadge_visible mx_NotificationBadge_level_highlight mx_NotificationBadge_2char cpd-theme-light"
2022-12-08 22:37:25 +01:00
>
<span
class="mx_NotificationBadge_count"
>
!
</span>
</div>
</div>
<div>
<div
class="mx_RoomStatusBar_unsentTitle"
>
Some of your messages have not been sent
</div>
</div>
<div
class="mx_RoomStatusBar_unsentButtonBar"
>
<div
class="mx_AccessibleButton mx_RoomStatusBar_unsentRetry"
role="button"
tabindex="0"
>
Retry
</div>
</div>
</div>
</div>
</main>
</div>
</div>
`;
2022-08-04 08:19:52 +02:00
2022-12-08 22:37:25 +01:00
exports[`RoomView for a local room in state NEW should match the snapshot 1`] = `
<div>
<div
class="mx_RoomView mx_RoomView--local"
>
<header
2023-08-01 09:32:53 +02:00
class="mx_LegacyRoomHeader light-panel"
2022-12-08 22:37:25 +01:00
>
<div
2023-08-01 09:32:53 +02:00
class="mx_LegacyRoomHeader_wrapper"
2022-12-08 22:37:25 +01:00
>
<div
2023-08-01 09:32:53 +02:00
class="mx_LegacyRoomHeader_avatar"
2022-12-08 22:37:25 +01:00
>
<div
class="mx_DecoratedRoomAvatar"
>
<span
2024-03-07 15:40:03 +01:00
class="_avatar_mcap2_17 mx_BaseAvatar _avatar-imageless_mcap2_61"
2023-08-24 05:48:35 +02:00
data-color="3"
data-testid="avatar-img"
data-type="round"
2022-12-08 22:37:25 +01:00
role="presentation"
2023-08-24 05:48:35 +02:00
style="--cpd-avatar-size: 24px;"
2022-12-08 22:37:25 +01:00
>
2023-08-24 05:48:35 +02:00
u
2022-12-08 22:37:25 +01:00
</span>
</div>
</div>
<div
2023-08-01 09:32:53 +02:00
class="mx_LegacyRoomHeader_name mx_LegacyRoomHeader_name--textonly"
2022-12-08 22:37:25 +01:00
>
<div
aria-level="1"
2023-08-01 09:32:53 +02:00
class="mx_LegacyRoomHeader_nametext"
2022-12-08 22:37:25 +01:00
dir="auto"
role="heading"
title="@user:example.com"
>
@user:example.com
</div>
</div>
<div
2023-08-09 10:39:48 +02:00
aria-describedby="mx_TooltipTarget_vY7Q4uEh"
2023-08-01 09:32:53 +02:00
class="mx_LegacyRoomHeader_topic mx_RoomTopic"
2022-12-08 22:37:25 +01:00
dir="auto"
2023-04-20 10:25:53 +02:00
tabindex="0"
2022-12-08 22:37:25 +01:00
>
2023-04-20 10:25:53 +02:00
<span
dir="auto"
/>
2022-12-08 22:37:25 +01:00
</div>
</div>
</header>
<main
class="mx_RoomView_body"
>
<div
class="mx_RoomView_timeline"
>
<div
class="mx_AutoHideScrollbar mx_ScrollPanel mx_RoomView_messagePanel"
tabindex="-1"
>
<div
class="mx_RoomView_messageListWrapper"
>
<ol
aria-live="polite"
class="mx_RoomView_MessageList"
style="height: 400px;"
>
<li
class="mx_NewRoomIntro"
>
<div
class="mx_EventTileBubble mx_cryptoEvent mx_cryptoEvent_icon_warning"
>
<div
class="mx_EventTileBubble_title"
>
End-to-end encryption isn't enabled
</div>
<div
class="mx_EventTileBubble_subtitle"
>
<span>
Your private messages are normally encrypted, but this room isn't. Usually this is due to an unsupported device or method being used, like email invites.
</span>
</div>
</div>
2023-08-24 05:48:35 +02:00
<button
2022-12-08 22:37:25 +01:00
aria-label="Avatar"
aria-live="off"
2024-03-07 15:40:03 +01:00
class="_avatar_mcap2_17 mx_BaseAvatar _avatar-imageless_mcap2_61"
2023-08-24 05:48:35 +02:00
data-color="3"
data-testid="avatar-img"
data-type="round"
2022-12-08 22:37:25 +01:00
role="button"
2023-08-24 05:48:35 +02:00
style="--cpd-avatar-size: 52px;"
2022-12-08 22:37:25 +01:00
>
2023-08-24 05:48:35 +02:00
u
</button>
2022-12-08 22:37:25 +01:00
<h2>
@user:example.com
</h2>
<p>
<span>
Send your first message to invite
<b>
@user:example.com
</b>
to chat
</span>
</p>
</li>
</ol>
</div>
</div>
</div>
<div
2023-12-20 16:32:24 +01:00
aria-label="Message composer"
2022-12-08 22:37:25 +01:00
class="mx_MessageComposer"
2023-12-20 16:32:24 +01:00
role="region"
2022-12-08 22:37:25 +01:00
>
<div
class="mx_MessageComposer_wrapper"
>
<div
class="mx_MessageComposer_row"
>
<div
class="mx_SendMessageComposer"
>
<div
class="mx_BasicMessageComposer"
>
<div
2023-04-12 15:58:38 +02:00
aria-label="Formatting"
2022-12-08 22:37:25 +01:00
class="mx_MessageComposerFormatBar"
2023-04-12 15:58:38 +02:00
role="toolbar"
2022-12-08 22:37:25 +01:00
>
<button
aria-label="Bold"
class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconBold"
role="button"
tabindex="0"
type="button"
/>
<button
aria-label="Italics"
class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconItalic"
role="button"
2023-04-12 15:58:38 +02:00
tabindex="-1"
2022-12-08 22:37:25 +01:00
type="button"
/>
<button
aria-label="Strikethrough"
class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconStrikethrough"
role="button"
2023-04-12 15:58:38 +02:00
tabindex="-1"
2022-12-08 22:37:25 +01:00
type="button"
/>
<button
aria-label="Code block"
class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconCode"
role="button"
2023-04-12 15:58:38 +02:00
tabindex="-1"
2022-12-08 22:37:25 +01:00
type="button"
/>
<button
aria-label="Quote"
class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconQuote"
role="button"
2023-04-12 15:58:38 +02:00
tabindex="-1"
2022-12-08 22:37:25 +01:00
type="button"
/>
<button
aria-label="Insert link"
class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconInsertLink"
role="button"
2023-04-12 15:58:38 +02:00
tabindex="-1"
2022-12-08 22:37:25 +01:00
type="button"
/>
</div>
<div
aria-autocomplete="list"
aria-disabled="false"
aria-haspopup="listbox"
aria-label="Send a message…"
aria-multiline="true"
class="mx_BasicMessageComposer_input mx_BasicMessageComposer_input_shouldShowPillAvatar mx_BasicMessageComposer_inputEmpty"
contenteditable="true"
data-testid="basicmessagecomposer"
dir="auto"
role="textbox"
2023-09-19 07:58:53 +02:00
style="--placeholder: 'Send\\ a\\ message…';"
2022-12-08 22:37:25 +01:00
tabindex="0"
2023-06-27 10:48:32 +02:00
translate="no"
2022-12-08 22:37:25 +01:00
>
<div>
<br />
</div>
</div>
</div>
</div>
<div
class="mx_MessageComposer_actions"
>
<div
aria-label="Emoji"
class="mx_AccessibleButton mx_EmojiButton mx_MessageComposer_button mx_EmojiButton_icon"
role="button"
tabindex="0"
/>
<div
aria-label="Attachment"
class="mx_AccessibleButton mx_MessageComposer_button mx_MessageComposer_upload"
role="button"
tabindex="0"
/>
<div
aria-label="More options"
class="mx_AccessibleButton mx_MessageComposer_button mx_MessageComposer_buttonMenu"
role="button"
tabindex="0"
/>
<input
multiple=""
style="display: none;"
type="file"
/>
</div>
</div>
</div>
</div>
</main>
</div>
</div>
`;
2022-08-04 08:19:52 +02:00
2022-12-08 22:37:25 +01:00
exports[`RoomView for a local room in state NEW that is encrypted should match the snapshot 1`] = `
<div>
<div
class="mx_RoomView mx_RoomView--local"
>
<header
2023-08-01 09:32:53 +02:00
class="mx_LegacyRoomHeader light-panel"
2022-12-08 22:37:25 +01:00
>
<div
2023-08-01 09:32:53 +02:00
class="mx_LegacyRoomHeader_wrapper"
2022-12-08 22:37:25 +01:00
>
<div
2023-08-01 09:32:53 +02:00
class="mx_LegacyRoomHeader_avatar"
2022-12-08 22:37:25 +01:00
>
<div
class="mx_DecoratedRoomAvatar"
>
<span
2024-03-07 15:40:03 +01:00
class="_avatar_mcap2_17 mx_BaseAvatar _avatar-imageless_mcap2_61"
2023-08-24 05:48:35 +02:00
data-color="3"
data-testid="avatar-img"
data-type="round"
2022-12-08 22:37:25 +01:00
role="presentation"
2023-08-24 05:48:35 +02:00
style="--cpd-avatar-size: 24px;"
2022-12-08 22:37:25 +01:00
>
2023-08-24 05:48:35 +02:00
u
2022-12-08 22:37:25 +01:00
</span>
</div>
</div>
2023-12-21 16:21:41 +01:00
<span
data-state="closed"
tabindex="0"
>
<div
class="mx_E2EIcon mx_E2EIcon_normal mx_LegacyRoomHeader_icon"
/>
</span>
2022-12-08 22:37:25 +01:00
<div
2023-08-01 09:32:53 +02:00
class="mx_LegacyRoomHeader_name mx_LegacyRoomHeader_name--textonly"
2022-12-08 22:37:25 +01:00
>
<div
aria-level="1"
2023-08-01 09:32:53 +02:00
class="mx_LegacyRoomHeader_nametext"
2022-12-08 22:37:25 +01:00
dir="auto"
role="heading"
title="@user:example.com"
>
@user:example.com
</div>
</div>
<div
2023-08-09 10:39:48 +02:00
aria-describedby="mx_TooltipTarget_vY7Q4uEh"
2023-08-01 09:32:53 +02:00
class="mx_LegacyRoomHeader_topic mx_RoomTopic"
2022-12-08 22:37:25 +01:00
dir="auto"
2023-04-20 10:25:53 +02:00
tabindex="0"
2022-12-08 22:37:25 +01:00
>
2023-04-20 10:25:53 +02:00
<span
dir="auto"
/>
2022-12-08 22:37:25 +01:00
</div>
</div>
</header>
<main
class="mx_RoomView_body"
>
<div
class="mx_RoomView_timeline"
>
<div
class="mx_AutoHideScrollbar mx_ScrollPanel mx_RoomView_messagePanel"
tabindex="-1"
>
<div
class="mx_RoomView_messageListWrapper"
>
<ol
aria-live="polite"
class="mx_RoomView_MessageList"
style="height: 400px;"
>
<div
class="mx_EventTileBubble mx_cryptoEvent mx_cryptoEvent_icon"
>
<div
class="mx_EventTileBubble_title"
>
Encryption enabled
</div>
<div
class="mx_EventTileBubble_subtitle"
>
Messages in this chat will be end-to-end encrypted.
</div>
</div>
<li
class="mx_NewRoomIntro"
>
2023-08-24 05:48:35 +02:00
<button
2022-12-08 22:37:25 +01:00
aria-label="Avatar"
aria-live="off"
2024-03-07 15:40:03 +01:00
class="_avatar_mcap2_17 mx_BaseAvatar _avatar-imageless_mcap2_61"
2023-08-24 05:48:35 +02:00
data-color="3"
data-testid="avatar-img"
data-type="round"
2022-12-08 22:37:25 +01:00
role="button"
2023-08-24 05:48:35 +02:00
style="--cpd-avatar-size: 52px;"
2022-12-08 22:37:25 +01:00
>
2023-08-24 05:48:35 +02:00
u
</button>
2022-12-08 22:37:25 +01:00
<h2>
@user:example.com
</h2>
<p>
<span>
Send your first message to invite
<b>
@user:example.com
</b>
to chat
</span>
</p>
</li>
</ol>
</div>
</div>
</div>
<div
2023-12-20 16:32:24 +01:00
aria-label="Message composer"
2022-12-08 22:37:25 +01:00
class="mx_MessageComposer"
2023-12-20 16:32:24 +01:00
role="region"
2022-12-08 22:37:25 +01:00
>
<div
class="mx_MessageComposer_wrapper"
>
<div
class="mx_MessageComposer_row"
>
<div
class="mx_SendMessageComposer"
>
<div
class="mx_BasicMessageComposer"
>
<div
2023-04-12 15:58:38 +02:00
aria-label="Formatting"
2022-12-08 22:37:25 +01:00
class="mx_MessageComposerFormatBar"
2023-04-12 15:58:38 +02:00
role="toolbar"
2022-12-08 22:37:25 +01:00
>
<button
aria-label="Bold"
class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconBold"
role="button"
tabindex="0"
type="button"
/>
<button
aria-label="Italics"
class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconItalic"
role="button"
2023-04-12 15:58:38 +02:00
tabindex="-1"
2022-12-08 22:37:25 +01:00
type="button"
/>
<button
aria-label="Strikethrough"
class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconStrikethrough"
role="button"
2023-04-12 15:58:38 +02:00
tabindex="-1"
2022-12-08 22:37:25 +01:00
type="button"
/>
<button
aria-label="Code block"
class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconCode"
role="button"
2023-04-12 15:58:38 +02:00
tabindex="-1"
2022-12-08 22:37:25 +01:00
type="button"
/>
<button
aria-label="Quote"
class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconQuote"
role="button"
2023-04-12 15:58:38 +02:00
tabindex="-1"
2022-12-08 22:37:25 +01:00
type="button"
/>
<button
aria-label="Insert link"
class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconInsertLink"
role="button"
2023-04-12 15:58:38 +02:00
tabindex="-1"
2022-12-08 22:37:25 +01:00
type="button"
/>
</div>
<div
aria-autocomplete="list"
aria-disabled="false"
aria-haspopup="listbox"
aria-label="Send a message…"
aria-multiline="true"
class="mx_BasicMessageComposer_input mx_BasicMessageComposer_input_shouldShowPillAvatar mx_BasicMessageComposer_inputEmpty"
contenteditable="true"
data-testid="basicmessagecomposer"
dir="auto"
role="textbox"
2023-09-19 07:58:53 +02:00
style="--placeholder: 'Send\\ a\\ message…';"
2022-12-08 22:37:25 +01:00
tabindex="0"
2023-06-27 10:48:32 +02:00
translate="no"
2022-12-08 22:37:25 +01:00
>
<div>
<br />
</div>
</div>
</div>
</div>
<div
class="mx_MessageComposer_actions"
>
<div
aria-label="Emoji"
class="mx_AccessibleButton mx_EmojiButton mx_MessageComposer_button mx_EmojiButton_icon"
role="button"
tabindex="0"
/>
<div
aria-label="Attachment"
class="mx_AccessibleButton mx_MessageComposer_button mx_MessageComposer_upload"
role="button"
tabindex="0"
/>
<div
aria-label="More options"
class="mx_AccessibleButton mx_MessageComposer_button mx_MessageComposer_buttonMenu"
role="button"
tabindex="0"
/>
<input
multiple=""
style="display: none;"
type="file"
/>
</div>
</div>
</div>
</div>
</main>
</div>
</div>
`;
2023-06-19 18:08:16 +02:00
exports[`RoomView should show error view if failed to look up room alias 1`] = `
<DocumentFragment>
<div
class="mx_RoomView"
2023-10-12 15:17:51 +02:00
data-room-header="legacy"
2023-06-19 18:08:16 +02:00
>
<div
2023-10-20 15:30:37 +02:00
class="mx_RoomPreviewBar mx_RoomPreviewBar_RoomNotFound mx_RoomPreviewBar_dialog"
2023-12-20 16:32:24 +01:00
role="complementary"
2023-06-19 18:08:16 +02:00
>
<div
class="mx_RoomPreviewBar_message"
>
<h3>
#addy:server does not exist.
</h3>
<p>
Are you sure you're at the right place?
</p>
</div>
<div
class="mx_RoomPreviewBar_actions"
/>
<div
class="mx_RoomPreviewBar_footer"
/>
</div>
</div>
</DocumentFragment>
`;