//room screens
var splashScreen = `
<div style="display: flex;justify-content: center;align-items: center;height:100%;flex-direction: column;text-align: center;">
    <img src="favicon.svg" style="width: 6rem">
    <herotitle><blah>title.welcome.splash</blah></herotitle>
    <p><blah>desc.welcome.splash</blah>. <span class="aqua">v<span class="clientver aqua">1.0</span></span></p>
</div>
`;
var addDmScreen = `
<div style="display: flex;justify-content: center;align-items: center;height:100%;flex-direction: column;text-align: center;">
    ${ICONS.addChat({ width: "3rem" })}
    <herotitle><blah>title.add.chat</blah></herotitle>
    <p><blah>desc.add.chat</blah></p>
    <br>
    <div class="input-group">
        <label for="addchat-username"><blah>title.username</blah></label>
        <input type="text" id="addchat-username" placeholder="name:example.com" class="forminput">
    </div>
    <div class="input-group">
        <button class="submit-button blah" onclick="addDm()">title.add.chat</button>
    </div>
</div>
`

var createGroupScreen = `
<div style="display: flex;justify-content: center;align-items: center;height:100%;flex-direction: column;text-align: center;">
    ${ICONS.createGroup({ width: "3rem" })}
    <herotitle><blah>title.create.group</blah></herotitle>
    <p><blah>desc.create.group</blah></p>
    <br>
    <div class="input-group">
        <label for="creategroup-name"><blah>title.name</blah></label>
        <input type="text" id="creategroup-name" placeholder="{blah(placeholder.create.group.input)}" class="forminput">
        
        <div class="setting-row" style="text-align: left;">
            <div class="setting-info">
                <span class="setting-title"><blah>title.group.history.visible</blah></span>
                <span class="setting-desc"><blah>desc.group.history.visible</blah></span>
            </div>
            <label class="toggle-switch">
                <input type="checkbox" id="creategroup-history">
                <span class="toggle-slider"></span>
            </label>
        </div>

        <button class="submit-button blah" onclick="createGroup()">title.create.group</button>
    </div>
</div>
`;

var createSpaceScreen = `
<div style="display: flex;justify-content: center;align-items: center;height:100%;flex-direction: column;text-align: center;">
    ${ICONS.createSpace({ width: "3rem" })}
    <herotitle><blah>title.create.space</blah></herotitle>
    <p><blah>desc.create.space</blah></p>
    <br>
    <div class="input-group">
        <label for="createspace-name"><blah>title.name</blah></label>
        <input type="text" id="createspace-name" placeholder="{blah(placeholder.create.space.input)}" class="forminput">
    </div>
    <div class="input-group">
        <button class="submit-button blah" onclick="createGroup()">title.create.space</button>
    </div>
</div>
`;
var joinSpaceScreen = `
<div style="display: flex;justify-content: center;align-items: center;height:100%;flex-direction: column;text-align: center;">
    ${ICONS.joinSpace({ width: "3rem" })}
    <herotitle><blah>title.join.space</blah></herotitle>
    <p><blah>desc.join.space</blah></p>
    <br>
    <div class="input-group">
        <label for="joinspace-id"><blah>title.space.id</blah></label>
        <input type="text" id="joinspace-id" placeholder="id:example.com" class="forminput">
    </div>
    <div class="input-group">
        <label for="joinspace-code"><blah>title.invitation.code</blah></label>
        <input type="text" id="joinspace-code" placeholder="{blah(placeholder.invitation.code)}" class="forminput">
    </div>
    <div class="input-group">
        <button class="submit-button blah" onclick="createGroup()">title.join.space</button>
    </div>
</div>
`;

var invitesEmptyState = `
    ${ICONS.invites({ width: "4rem" })}
    <br>
    <p><blah>desc.no.invites</blah></p>
`;
var invitesLoadingState = `
    ${ICONS.invites({ width: "4rem" })}
    <br>
    <p><blah>desc.fetching.invites</blah></p>
`;

var invitesScreen = `
<div style="display: flex; flex-direction: column; height: 100%;">
    <div style="display: flex; gap: 0.5rem; padding: 0.5rem 1rem; border-bottom: var(--border-width) solid var(--light-border-color); flex-shrink: 0;">
        <button id="tab-invites-received" class="submit-button blah tab-inactive" onclick="switchInvitesTab('received')" style="margin:0; padding: 0 1.5rem;">title.received</button>
        <button id="tab-invites-sent" class="submit-button blah tab-inactive" onclick="switchInvitesTab('sent')" style="margin:0; padding: 0 1.5rem;">title.sent</button>
    </div>
    <div id="invites-container" class="list-container empty">
        ${invitesLoadingState}
    </div>
</div>
`;

var notifisEmptyState = `
    ${ICONS.notifications({ width: "4rem" })}
    <br>
    <p><blah>desc.no.notifications</blah></p>
`;

var notifisScreen = `
<div style="display: flex; flex-direction: column; height: 100%;">
    <div style="display: flex; gap: 0.5rem; padding: 0.5rem 1rem; border-bottom: var(--border-width) solid var(--light-border-color); flex-shrink: 0;">
        <button id="tab-notifis-all" class="submit-button blah tab-inactive" onclick="switchNotifisTab('all')" style="margin:0; padding: 0 1.5rem;">title.all</button>
        <button id="tab-notifis-unread" class="submit-button blah tab-inactive" onclick="switchNotifisTab('unread')" style="margin:0; padding: 0 1.5rem;">title.unread</button>
    </div>
    <div id="notifis-container" class="list-container empty">
        ${notifisEmptyState}
    </div>
</div>
`;

var invitesEntry = `
<div class="invite-entry">
    <div class="invite-info">
        <img src="{pfp}" class="invite-pfp" {onclick_attr}>
        <div class="invite-details">
            <span class="invite-name" {onclick_attr}>{username}</span>
            <span class="invite-desc">{desc}</span>
        </div>
    </div>
    <div class="invite-actions">
        {actions}
    </div>
</div>
`;

var chatScreen = `
<div style="display: flex; flex-direction: column; height: 100%; width: 100%;">
    <div id="chat-messages" style="flex-grow: 1; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: 0.5rem;">
    </div>
    <div id="replying-bar" style="display: none; padding: 0 1rem; border-top: var(--border-width) solid var(--light-border-color); font-size: 0.85rem; justify-content: space-between; align-items: center; background: var(--main-bg-color);">
        <div style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex-grow: 1;">
            <span style="opacity: 0.7;"><blah>title.replying.to</blah> </span><strong id="replying-to-name"></strong>: <span id="replying-to-text" style="opacity: 0.7;"></span>
        </div>
        <button onclick="cancelReply()" style="background: none; border: none; color: var(--text-color); cursor: pointer; padding: 0.2rem; margin-left: 0.5rem;">
            ${ICONS.close({ width: "1.2rem", fill: "currentColor" })}
        </button>
    </div>
    <div id="attachments-preview" style="display: none; padding: 0.5rem 1rem; gap: 0.8rem; overflow-x: auto; border-top: var(--border-width) solid var(--light-border-color); background: var(--main-bg-color); align-items: center; flex-shrink: 0;"></div>
    <div style="padding: 1rem; border-top: var(--border-width) solid var(--light-border-color); display: flex; gap: 0.5rem; align-items: flex-end; flex-shrink: 0;">
        <button id="chat-add-attachment" class="submit-button" onclick="clickAddAttachment(this, arguments[0])" style="margin: 0; padding: 0; width: 2.5rem; flex-shrink: 0; min-height: 2.5rem; max-height: 8rem;">
            ${ICONS.plus({ width: "1.5rem", height: "1.5rem", stroke: "var(--main-bg-color)" })}
        </button>
        <textarea id="chat-input" class="forminput" style="flex-grow: 1; margin: 0; resize: none; min-height: 2.5rem; max-height: 8rem; padding: 0.5rem;" placeholder="{blah(placeholder.message.input)}" onkeydown="handleChatInputKey(arguments[0])" oninput="handleChatInputResize(this)"></textarea>
        <button id="chat-sendmessage" class="submit-button" onclick="sendMessage(this)" style="margin: 0; padding: 0; width: 2.5rem; flex-shrink: 0; min-height: 2.5rem; max-height: 8rem;">
                ${ICONS.send()}
        </button>
    </div>
</div>
`;

//roombars
var homeRoomBar = `
<div class="sidebar-section-header">
    <button class="collapse-text-button" id="collapse-dms" onclick="clickCollapseDms()">
        <span><blah>title.dms</blah></span>
        ${ICONS.chevronDown({ className: "chevron" })}
    </button>
    <button class="add-action-button" id="add-dm-btn" onclick="clickAddDm()">
        ${ICONS.plus()}
    </button>
</div>
<div id="dms-wrapper" class="collapsible-wrapper">
    <div class="collapsible-inner">
        <div id="dms-list" class="list-container no-flex-grow empty" style="padding: 0 0.5rem;"></div>
    </div>
</div>

<div class="sidebar-section-header">
    <button class="collapse-text-button" id="collapse-groups" onclick="clickCollapseGroups()">
        <span><blah>title.groups</blah></span>
        ${ICONS.chevronDown({ className: "chevron" })}
    </button>
    <button class="add-action-button" id="add-group-btn" onclick="clickAddGroup()">
        ${ICONS.plus()}
    </button>
</div>
<div id="groups-wrapper" class="collapsible-wrapper">
    <div class="collapsible-inner">
        <div id="groups-list" class="list-container no-flex-grow empty" style="padding: 0 0.5rem;"></div>
    </div>
</div>
`;

var inboxRoomBar = `
<div class="sidebar-section-header">
    <button class="collapse-text-button" id="collapse-invites" onclick="gotoInvites()">
        ${ICONS.invites({ className: "chevron", width: "1.5rem" })}
        <span><blah>title.invites</blah></span>
    </button>
</div>

<div class="sidebar-section-header">
    <button class="collapse-text-button" id="collapse-notifis" onclick="gotoNotifis()">
        ${ICONS.notifications({ className: "chevron", width: "1.5rem" })}
        <span><blah>title.notifications</blah></span>
    </button>
</div>
`;


//context menus
var profileContextMenu = `
<button onclick="openProfile(window.id)">
    ${ICONS.profile()}
    <span class="blah">title.profile</span>
</button>
<button onclick="gotoSettings()">
    ${ICONS.settings()}
    <span class="blah">title.settings</span>
</button>
<button onclick="logout()">
    ${ICONS.delete({ fill: "var(--big-red)" })}
    <span class="blah" style="color: var(--big-red)">title.logout</span>
</button>
`;
var attachmentMenu = `
<button onclick="document.getElementById('attach-take-photo').click(); fixedContextMenu.classList.remove('show');">
    ${ICONS.camera()}
    <span class="blah">action.attachment.take.photo</span>
</button>
<button onclick="document.getElementById('attach-media').click(); fixedContextMenu.classList.remove('show');">
    ${ICONS.image()}
    <span class="blah">action.attachment.media</span>
</button>
<button onclick="document.getElementById('attach-file').click(); fixedContextMenu.classList.remove('show');">
    ${ICONS.fileText()}
    <span class="blah">action.attachment.file</span>
</button>
<button onclick="console.log('poll'); fixedContextMenu.classList.remove('show');">
    ${ICONS.poll()}
    <span class="blah">action.attachment.poll</span>
</button>
<input type="file" id="attach-take-photo" accept="image/*" capture="environment" style="display: none;" onchange="handleAttachmentSelection(arguments[0])" multiple>
<input type="file" id="attach-media" accept="image/*,video/*" style="display: none;" onchange="handleAttachmentSelection(arguments[0])" multiple>
<input type="file" id="attach-file" style="display: none;" onchange="handleAttachmentSelection(arguments[0])" multiple>
`;

var addSpaceMenu = `
<button onclick="gotoJoinSpace()">
    ${ICONS.joinSpace()}
    <span class="blah">title.join.space</span>
</button>
<button onclick="gotoCreateSpace()">
    ${ICONS.createSpace()}
    <span class="blah">title.create.space</span>
</button>`
var groupContextMenu = `
<button onclick="gotoGroupSettings(currentContextMenuGroupId)">
    ${ICONS.settings()}
    <span class="blah">title.group.settings</span>
</button>
<button onclick="leaveGroupPrompt(currentContextMenuGroupId)">
    ${ICONS.delete({ fill: "var(--big-red)" })}
    <span class="blah" style="color: var(--big-red)">title.leave.group</span>
</button>
`;
var messageContextMenu = `
<button onclick="replyMessage(currentContextMenuMsgId)">
    ${ICONS.replyAction()}
    <span class="blah">title.reply.message</span>
</button>
<button id="context-react-btn" onclick="openReactionPicker(arguments[0])">
    ${ICONS.react()}
    <span class="blah">title.react.message</span>
</button>
<button id="context-delete-btn" onclick="deleteMessage(currentContextMenuMsgId)">
    ${ICONS.delete({ fill: "var(--big-red)" })}
    <span class="blah" style="color: var(--big-red)">title.delete.message</span>
</button>
<div id="context-pin-container"></div>
`;

//elements
var backBtnHtml = `<button class="mobile-nav-btn" onclick="mobileNavBack()">${ICONS.arrowBack({ width: "1.5rem", height: "1.5rem" })}</button>`;
var pinBtnHtml = `<button class="topbar-action-btn room-action-pin right" onclick="showPinnedMessages()">${ICONS.pin({ width: "1.5rem", height: "1.5rem" })}</button>`;
var callBtnHtml = `<button class="topbar-action-btn room-action-call right">${ICONS.call({ width: "1.5rem", height: "1.5rem" })}</button>`;
var groupMenuBtnHtml = `<button class="topbar-action-btn right" onclick="handleGroupContextMenu(arguments[0], currentDmId)">${ICONS.menu({ width: "1.5rem", height: "1.5rem" })}</button>`;

var settingsBar = `
<div class="sidebar-section-header">
    <button class="collapse-text-button" id="tab-settings-account" onclick="switchSettingsTab('account')">
        ${ICONS.account({ className: "chevron", width: "1.5rem" })}
        <span><blah>title.account</blah></span>
    </button>
</div>
<div class="sidebar-section-header">
    <button class="collapse-text-button" id="tab-settings-profile" onclick="switchSettingsTab('profile')">
        ${ICONS.account({ className: "chevron", width: "1.5rem" })}
        <span><blah>title.profile</blah></span>
    </button>
</div>
<div class="sidebar-section-header">
    <button class="collapse-text-button" id="tab-settings-appearance" onclick="switchSettingsTab('appearance')">
        ${ICONS.settings({ className: "chevron", width: "1.5rem" })}
        <span><blah>title.appearance</blah></span>
    </button>
</div>
`;

var accountSettings = `
<div style="display: flex;justify-content: center;align-items: center;height:100%;flex-direction: column;text-align: center;">
    ${ICONS.profile({ width: "3rem" })}
    <herotitle><blah>title.account</blah></herotitle>
    <br>
    <div class="input-group">
        <label for="settings-username"><blah>title.username</blah></label>
        <input type="text" id="settings-username" class="forminput">
    </div>
    <div class="input-group">
        <button class="submit-button blah" onclick="changeUsername()">action.save</button>
    </div>

    <div class="input-group">
        <label for="settings-password"><blah>title.password</blah></label>
        <input type="password" id="settings-password" class="forminput">
    </div>
    <div class="input-group">
        <button class="submit-button blah" onclick="changePassword()">action.save</button>
    </div>
    <br>
    <div class="input-group">
        <label style="color: var(--big-red);"><blah>title.delete.account</blah></label>
        <p style="font-size: 0.85rem; opacity: 0.7; margin-bottom: 0.5rem; margin-left: 0.6rem;"><blah>desc.delete.account</blah></p>
        <button class="submit-button popup-btn-danger blah" onclick="deleteAccount()">action.delete.account</button>
    </div>
</div>
`;

var profileSettings = `
<div style="display: flex;justify-content: center;align-items: center;height:100%;flex-direction: column;text-align: center;">
    ${ICONS.account({ width: "3rem" })}
    <herotitle><blah>title.profile</blah></herotitle>
    <br>
    
    <div class="input-group" style="display: flex; flex-direction: row; align-items: stretch; justify-content: space-between; border: var(--border-width) solid var(--light-border-color); border-radius: 0.8rem; padding: 1rem; width: 100%; max-width: 30rem;">
        <img id="settings-avatar-preview" src="" style="width: 4.5rem; height: 4.5rem; border-radius: 0.8rem; border: var(--border-width) solid rgba(255, 255, 255, 0.2); object-fit: cover; background: var(--main-bg-color); aspect-ratio: 1 / 1; flex-shrink: 0;">
        <div style="display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; padding: 0.1rem 0;">
            <div style="font-weight: bold;"><blah>title.avatar</blah></div>
            <button class="submit-button blah" style="margin: 0; padding: 0.5rem 1rem; width: auto;" onclick="document.getElementById('settings-avatar-input').click()">action.change.avatar</button>
            <input type="file" id="settings-avatar-input" style="display: none;" accept="image/*" onchange="openCropper(this, 'avatar')">
        </div>
    </div>
    <br>
    <div class="input-group" style="display: flex; flex-direction: row; align-items: stretch; justify-content: space-between; border: var(--border-width) solid var(--light-border-color); border-radius: 0.8rem; padding: 1rem; width: 100%; max-width: 30rem;">
        <div style="width: 12.4rem; aspect-ratio: 494 / 200; background: var(--main-bg-color); border-radius: 0.4rem; overflow: hidden; display: flex; align-items: center; justify-content: center; border: var(--border-width) solid rgba(255, 255, 255, 0.2);">
            <img id="settings-banner-preview" src="" style="width: 100%; height: 100%; object-fit: cover;" onerror="this.style.display='none'" onload="this.style.display='block'">
        </div>
        <div style="display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; padding: 0.1rem 0;">
            <div style="font-weight: bold;"><blah>title.banner</blah></div>
            <button class="submit-button blah" style="margin: 0; padding: 0.5rem 1rem; width: auto;" onclick="document.getElementById('settings-banner-input').click()">action.change.banner</button>
            <input type="file" id="settings-banner-input" style="display: none;" accept="image/*" onchange="openCropper(this, 'banner')">
        </div>
    </div>
    <br>
   
    <div class="input-group">
        <label for="settings-bio"><blah>title.bio</blah></label>
        <textarea id="settings-bio" class="forminput" style="min-height: 8rem; padding-top: 0.8rem;"></textarea>
    </div>
    <div class="input-group">
        <button class="submit-button blah" onclick="saveProfile()">action.save.bio</button>
    </div>
</div>
`;
var groupSettingsScreen = `
<div class="auth-box popup-auto-height" style="margin-top:2rem">
    <div class="input-group" style="display: flex; flex-direction: row; align-items: stretch; justify-content: space-between; border: var(--border-width) solid var(--light-border-color); border-radius: 0.8rem; padding: 1rem; width: 100%; max-width: 30rem;">
        <img id="group-settings-avatar-preview" src="" style="width: 4.5rem; height: 4.5rem; border-radius: 0.8rem; border: var(--border-width) solid rgba(255, 255, 255, 0.2); object-fit: cover; background: var(--main-bg-color); aspect-ratio: 1 / 1; flex-shrink: 0;">
        <div style="display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; padding: 0.1rem 0;">
            <div style="font-weight: bold;"><blah>title.avatar</blah></div>
            <button class="submit-button blah" style="margin: 0; padding: 0.5rem 1rem; width: auto;" onclick="document.getElementById('group-settings-avatar-input').click()">action.change.avatar</button>
            <input type="file" id="group-settings-avatar-input" style="display: none;" accept="image/*" onchange="openCropper(this, 'group-avatar')">
        </div>
    </div>
    <br>
    <div class="input-group">
        <label for="group-settings-name"><blah>title.group.name</blah></label>
        <input type="text" id="group-settings-name" class="forminput">
        
        <div class="setting-row">
            <div class="setting-info">
                <span class="setting-title"><blah>title.group.history.visible</blah></span>
                <span class="setting-desc"><blah>desc.group.history.visible</blah></span>
            </div>
            <label class="toggle-switch">
                <input type="checkbox" id="group-settings-history">
                <span class="toggle-slider"></span>
            </label>
        </div>

        <button class="submit-button blah" onclick="saveGroupSettings()">action.save</button>
    </div>
</div>
`;

var appearanceSettings = `
<div style="display: flex;justify-content: center;align-items: center;height:100%;flex-direction: column;text-align: center;">
    ${ICONS.settings({ width: "3rem" })}
    <herotitle><blah>title.appearance</blah></herotitle>
    <br>
    <div class="input-group">
        <label><blah>title.language</blah></label>
        <div class="custom-select" id="settings-language">
            <div class="custom-select-value" onclick="this.parentElement.classList.toggle('open')">
                <span id="settings-language-display" class="blah">title.loading</span>
                ${ICONS.chevronDown({ className: "chevron", style: "width: 1.2rem; height: 1.2rem; opacity: 0.7;" })}
            </div>
            <div class="custom-select-options" id="settings-language-options">
            </div>
        </div>
    </div>
</div>
`;