//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>
`;

//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 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>
`;




//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>`;