//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;">
    <svg xmlns="http://www.w3.org/2000/svg" width="3rem" viewBox="0 -960 960 960" fill="var(--text-color)"><path d="M120-160v-600q0-33 23.5-56.5T200-840h480q33 0 56.5 23.5T760-760v203q-10-2-20-2.5t-20-.5q-10 0-20 .5t-20 2.5v-203H200v400h283q-2 10-2.5 20t-.5 20q0 10 .5 20t2.5 20H240L120-160Zm160-440h320v-80H280v80Zm0 160h200v-80H280v80Zm400 280v-120H560v-80h120v-120h80v120h120v80H760v120h-80ZM200-360v-400 400Z"/></svg>
    <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;">
    <svg xmlns="http://www.w3.org/2000/svg" width="3rem" viewBox="0 -960 960 960" fill="var(--text-color)"><path d="M500-482q29-32 44.5-73t15.5-85q0-44-15.5-85T500-798q60 8 100 53t40 105q0 60-40 105t-100 53Zm220 322v-120q0-36-16-68.5T662-406q51 18 94.5 46.5T800-280v120h-80Zm80-280v-80h-80v-80h80v-80h80v80h80v80h-80v80h-80Zm-593-87q-47-47-47-113t47-113q47-47 113-47t113 47q47 47 47 113t-47 113q-47 47-113 47t-113-47ZM0-160v-112q0-34 17.5-62.5T64-378q62-31 126-46.5T320-440q66 0 130 15.5T576-378q29 15 46.5 43.5T640-272v112H0Zm320-400q33 0 56.5-23.5T400-640q0-33-23.5-56.5T320-720q-33 0-56.5 23.5T240-640q0 33 23.5 56.5T320-560ZM80-240h480v-32q0-11-5.5-20T540-306q-54-27-109-40.5T320-360q-56 0-111 13.5T100-306q-9 5-14.5 14T80-272v32Zm240-400Zm0 400Z"/></svg>
    <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>
    <div class="input-group">
        <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;">
    <svg xmlns="http://www.w3.org/2000/svg" width="3rem" viewBox="0 -960 960 960" fill="var(--text-color)"><path d="M80-120v-720h400v160h400v320h-80v-240H480v80h80v80h-80v80h80v80h-80v80h160v80H80Zm80-80h80v-80h-80v80Zm0-160h80v-80h-80v80Zm0-160h80v-80h-80v80Zm0-160h80v-80h-80v80Zm160 480h80v-80h-80v80Zm0-160h80v-80h-80v80Zm0-160h80v-80h-80v80Zm0-160h80v-80h-80v80ZM800-40v-80h-80v-80h80v-80h80v80h80v80h-80v80h-80ZM640-440v-80h80v80h-80Zm0 160v-80h80v80h-80Z"/></svg>
    <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;">
    <svg xmlns="http://www.w3.org/2000/svg" width="3rem" viewBox="0 -960 960 960" fill="var(--text-color)"><path d="M440-280H280q-83 0-141.5-58.5T80-480q0-83 58.5-141.5T280-680h160v80H280q-50 0-85 35t-35 85q0 50 35 85t85 35h160v80ZM320-440v-80h320v80H320Zm200 160v-80h160q50 0 85-35t35-85q0-50-35-85t-85-35H520v-80h160q83 0 141.5 58.5T880-480q0 83-58.5 141.5T680-280H520Z"/></svg>
    <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 = `
    <svg xmlns="http://www.w3.org/2000/svg" width="4rem" viewBox="0 -960 960 960" fill="var(--text-color)"><path d="M160-160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h640q33 0 56.5 23.5T880-720v480q0 33-23.5 56.5T800-160H160Zm320-280L160-640v400h640v-400L480-440Zm0-80 320-200H160l320 200ZM160-640v-80 480-400Z"/></svg>
    <br>
    <p><blah>desc.no.invites</blah></p>
`;
var invitesLoadingState = `
    <svg xmlns="http://www.w3.org/2000/svg" width="4rem" viewBox="0 -960 960 960" fill="var(--text-color)"><path d="M160-160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h640q33 0 56.5 23.5T880-720v480q0 33-23.5 56.5T800-160H160Zm320-280L160-640v400h640v-400L480-440Zm0-80 320-200H160l320 200ZM160-640v-80 480-400Z"/></svg>
    <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 = `
    <svg xmlns="http://www.w3.org/2000/svg" width="4rem" viewBox="0 -960 960 960" fill="var(--text-color)"><path d="M160-200v-80h80v-280q0-83 50-147.5T420-792v-28q0-25 17.5-42.5T480-880q25 0 42.5 17.5T540-820v28q80 20 130 84.5T720-560v280h80v80H160Zm320-300Zm0 420q-33 0-56.5-23.5T400-160h160q0 33-23.5 56.5T480-80ZM320-280h320v-280q0-66-47-113t-113-47q-66 0-113 47t-47 113v280Z"/></svg>
    <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">
        <div class="invite-details">
            <span class="invite-name">{username}</span>
            <span class="invite-desc"><blah>{desc}</blah></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 style="padding: 1rem; border-top: var(--border-width) solid var(--light-border-color); display: flex; gap: 0.5rem;">
        <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(event)" oninput="handleChatInputResize(this)"></textarea>
        <button class="submit-button" onclick="sendMessage()" style="margin: 0; padding: 0; aspect-ratio: 1;">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="-0.9 -0.5 15.6 16" fill="none" width="1.5rem">
                    <path stroke="var(--main-bg-color)" stroke-linecap="round" stroke-linejoin="round" d="m3.75 7.5 -1.875 5.625 11.25 -5.625L1.875 1.875l1.875 5.625zm0 0h3.75" stroke-width="1.1"></path>
                </svg>
        </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>
        <svg class="chevron" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"
             stroke="var(--text-color)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <polyline points="6 9 12 15 18 9"></polyline>
        </svg>
    </button>
    <button class="add-action-button" id="add-dm-btn" onclick="clickAddDm()">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="var(--text-color)"
             stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <line x1="12" y1="5" x2="12" y2="19"></line>
            <line x1="5" y1="12" x2="19" y2="12"></line>
        </svg>
    </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>
        <svg class="chevron" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"
             stroke="var(--text-color)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <polyline points="6 9 12 15 18 9"></polyline>
        </svg>
    </button>
    <button class="add-action-button" id="add-group-btn" onclick="clickAddGroup()">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="var(--text-color)"
             stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <line x1="12" y1="5" x2="12" y2="19"></line>
            <line x1="5" y1="12" x2="19" y2="12"></line>
        </svg>
    </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()">
        <svg xmlns="http://www.w3.org/2000/svg" class="chevron" viewBox="0 -960 960 960" fill="var(--text-color)"><path d="M160-160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h640q33 0 56.5 23.5T880-720v480q0 33-23.5 56.5T800-160H160Zm320-280L160-640v400h640v-400L480-440Zm0-80 320-200H160l320 200ZM160-640v-80 480-400Z"/></svg>
        <span><blah>title.invites</blah></span>
    </button>
</div>

<div class="sidebar-section-header">
    <button class="collapse-text-button" id="collapse-notifis" onclick="gotoNotifis()">
        <svg xmlns="http://www.w3.org/2000/svg" class="chevron" viewBox="0 -960 960 960" fill="var(--text-color)"><path d="M160-200v-80h80v-280q0-83 50-147.5T420-792v-28q0-25 17.5-42.5T480-880q25 0 42.5 17.5T540-820v28q80 20 130 84.5T720-560v280h80v80H160Zm320-300Zm0 420q-33 0-56.5-23.5T400-160h160q0 33-23.5 56.5T480-80ZM320-280h320v-280q0-66-47-113t-113-47q-66 0-113 47t-47 113v280Z"/></svg>
        <span><blah>title.notifications</blah></span>
    </button>
</div>
`;


//context menus
var addSpaceMenu = `
<button onclick="gotoJoinSpace()">
    <svg xmlns="http://www.w3.org/2000/svg" width="1.4rem" viewBox="0 -960 960 960" fill="var(--text-color)"><path d="M440-280H280q-83 0-141.5-58.5T80-480q0-83 58.5-141.5T280-680h160v80H280q-50 0-85 35t-35 85q0 50 35 85t85 35h160v80ZM320-440v-80h320v80H320Zm200 160v-80h160q50 0 85-35t35-85q0-50-35-85t-85-35H520v-80h160q83 0 141.5 58.5T880-480q0 83-58.5 141.5T680-280H520Z"/></svg>
    <span class="blah">title.join.space</span>
</button>
<button onclick="gotoCreateSpace()">
    <svg xmlns="http://www.w3.org/2000/svg" width="1.4rem" viewBox="0 -960 960 960" fill="var(--text-color)"><path d="M80-120v-720h400v160h400v320h-80v-240H480v80h80v80h-80v80h80v80h-80v80h160v80H80Zm80-80h80v-80h-80v80Zm0-160h80v-80h-80v80Zm0-160h80v-80h-80v80Zm0-160h80v-80h-80v80Zm160 480h80v-80h-80v80Zm0-160h80v-80h-80v80Zm0-160h80v-80h-80v80Zm0-160h80v-80h-80v80ZM800-40v-80h-80v-80h80v-80h80v80h80v80h-80v80h-80ZM640-440v-80h80v80h-80Zm0 160v-80h80v80h-80Z"/></svg>
    <span class="blah">title.create.space</span>
</button>
`;


//elements
var detailsBtn = `<button class="mobile-nav-btn right" onclick="mobileNavDetails()"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="var(--text-color)"><path d="M120-240v-80h720v80H120Zm0-200v-80h720v80H120Zm0-200v-80h720v80H120Z"/></svg></button>`;
var backBtnHtml = `<button class="mobile-nav-btn" onclick="mobileNavBack()"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="var(--text-color)"><path d="m313-440 224 224-57 56-320-320 320-320 57 56-224 224h487v80H313Z"/></svg></button>`;