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="addgroup-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>
`;