var errorTemplate=`
<p>
    <span class='connectionerror'>
        <span class='connectionerrortitle' data-vavilon="VV0169">Oops. This request failed.</span><br />
        <span data-vavilon="VV0170">There may be a problem with your internet connection, or the server may be
            having
            problems.</span><br />
        <span data-vavilon="VV0171">The error code is</span> <span>{status}</span><br />
        <span data-vavilon="VV0172">The resource was</span> <span>{url}</span><br />
    </span>
</p>
`;

var topicHeaderHTML=`
<div class='content'>
    <h1 class='topicheader'>#{topic}</h1>
    <table>
        <thead>
            <tr>
                <td data-vavilon="VV0003" class='tltopicname'>Topic</td>
                <td data-vavilon="VV0004" class='tlmessagescount'>Posts</td>
                <td data-vavilon="VV0005" class='tlsubscount'>Subs</td>
                <td data-vavilon="VV0006" class='tlaction'>Action</td>
            </tr>
        </thead>
        <tbody>
            {tablecontents}
        </tbody>
    </table>
</div>
`;

var ratingAndReasonHTML=`
<tr>
    <td data-vavilon_data_label="VV0007" data-label='Member'>{rater}</td>
    <td data-vavilon_data_label="VV0008" data-label='Rates As' align='center'>
        <div data-disabledtext="{disabletext}" data-ratingsize="24" data-ratingaddress="{rateraddress}"
            data-ratingraw="{rating}" id='{stem}{rateraddress}'></div>
    </td>
    <td data-vavilon_data_label="VV0007" data-label='Member'>{ratee}</td>
</tr>
<tr>
    <td data-vavilon_data_label="VV0009" data-label='Commenting...' colspan='3'>
        <a href='#thread?root={txid}'>{reason}</a>
    </td>
</tr>
`;

var trustRatingTableHTML=`
<span data-vavilon="VV0010" class="overallrating">Overall Rating:</span>
<span class="overallrating">{rating}</span>
<br />
<div id="overall"></div>
<br />
<div id="cy" style="width:100%;height:600px;"></div>
<div id="cynote" style="width:100%">&nbsp;</div>
<br />
<a href="https://member.cash/a/804fc6e860" data-vavilon="ratingnotes" id="trustgraphnotes">*Notes: A coin purchase is
    interpreted as a 4.5-star rating. Follow, 3.5-star. Mute, 2-star.</a>
<br />
<table>{tablecontents}</table>
`;

var indirectRatingHTML=`
<tr>
    <td data-vavilon_data_label="VV0011" data-label='You'>
        <span class='ratermember'>{member}</span>
    </td>
    <td data-vavilon_data_label="VV0012" data-label='Rate as'>
        <span class='trustratingintermediate'>
            <div id='trust{memberid}{interid}'></div>
        </span>
    </td>
    <td data-vavilon_data_label="VV0013" align='center' data-label='Member'>
        <span class='intermediatemember'>{inter}</span>
    </td>
    <td data-vavilon_data_label="VV0014" data-label='Who Rates as'>
        <span class='trustratingbyintermediate'>
            <div id='trust{interid}{targetid}'></div>
        </span>
    </td>
    <td data-vavilon_data_label="VV0007" data-label='Member'>
        <span class='ratedmember'>{target}</span>
    </td>
</tr>
`;

var directRatingHTML=`
<tr>
    <td data-vavilon_data_label="VV0007" data-label='Member'>{member}</td>
    <td></td>
    <td></td>
    <td data-vavilon_data_label="VV0015" data-label='Rates as' align='center'>
        <div id='trust{memberid}{targetid}'></div>
    </td>
    <td></td>
    <td></td>
    <td align='center'>
    <td data-vavilon_data_label="VV0007" data-label='Member'>{target}</td>
</tr>`;

var mainbodyHTML=`
<div class="newheader" id="header"></div>
<div class="mainbody mcapplicationpage">
    <div id="loading" class="loading" style="display: none;">
        <div class="loading"></div>
    </div>

    <!--<div id="lowfundswarning" class="alert" style="display: none;"></div>-->

    <div id="toolsanchor" class="tools" style="display: none;"></div>

    <div id="newpost" class="newpost" style="display: none;"></div>

    <div id="feed" class="feed" style="display: none;"></div>

    <div id="notifications" class="notifications" style="display: none;">
        <div id="notificationtabs" class="tabs">
            <nav id="notificationtypes" class="filters">

            </nav>

        </div>
        <div id="notificationsbody" class="pageundertabs"></div>
    </div>

    <div id="mcidmemberheader" class="mcmemberheader" style="display: none;">
        <div id="mcidmembertabs" class="filters" style="display:none;"></div>
        <div id="mcidmemberanchor" class="memberanchor"></div>
        <div id="trustgraph" class="trustgraph" style="display:none;"></div>
        <div id="besties" class="besties" style="display:none;"></div>
        <!--<div id="community" class="community" style="display: none;"></div>
        <div id="anchorratings" class="ratings" style="display: none;"></div>-->
    </div>

    <div id="settingsanchor" class="settings" style="display: none;"></div>

    <div id="followers" class="followers" style="display: none;"></div>

    <div id="following" class="following" style="display: none;"></div>

    <div id="blockers" class="blockers" style="display: none;"></div>

    <div id="blocking" class="blocking" style="display: none;"></div>

    <div id="messagesanchor" class="messages" style="display: none;"></div>

    <div id="topicmeta" class="topics" style="display: none;"></div>

    <div id="posts" class="posts" style="display: none;"></div>

    <div id="comments" class="comments" style="display: none;"></div>

    <div id="thread" class="thread" style="display: none;"></div>

    <div id="loginbox" class="loginbox" style="display: none;"></div>

    <div id="topiclistanchor" class="topics" style="display: none;"></div>
</div>`;

var loginboxHTML=`
<div class="content">
    <br />
    <br />
    <br />
    <button data-vavilon="VV0016" class="loginbutton" type="button" href="#settings" onclick="createNewAccount();">Make
        New
        Phrase</button>
    <br />
    <div id="newseedphrasedescription" style="display: none;">
        <br /><span data-vavilon="VV0173">Here is your password. It is a phrase. Write it down.</span><br /><br /><label
            data-vavilon="VV0017">12 Word Seed
            Phrase</label>
        <div id="newseedphrase"></div>
    </div>
    <br />
    <hr />
    <br />
    <br />
    <br /><span data-vavilon="VV0018u">Phrase (12 words), Username, Public or Private Key</span>
    <br />
    <div class="formgroup">
        <input size="64" id="loginkey">
        <button data-vavilon="VV0174" class="loginbutton" type="button" href="#feed"
            onclick="trylogin(document.getElementById('loginkey').value);">login</button>
    </div>
    <br />
    <div id="loginerror">
    </div>
    <br />
    <br />
    <div class="loginnotes">
        <span data-vavilon="VV0019n2">*BitClout Users. </span><br /><a href="javascript:;"
            onclick='bitcloutlogin("https://identity.bitclout.com");'><span data-vavilon="loginwithidentity">Login with Identity</span></a> or
            <a href="javascript:;"
            onclick='bitcloutlogin("https://identity.love4src.com");'><span data-vavilon="love4src">love4src</span></a>
    </div>
    <div class="loginnotes">
        <span>*Memo Users. Your <a rel='noopener noreferrer' target="memo" href="https://memo.cash/key/export">private
                key</a> starts with 'L..' or 'K..'</span>
    </div>

    <br />
    <br />
</div>
`;

var lowfundswarningHTML=`
<div class="content">
    <span class="lowfundsaddressdiv" id="lowfundsaddressdiv"></span><br />
    <span data-vavilon="existen"></span> <span id="satoshiamount">0</span> <span data-vavilon="VV0021">satoshis
        exist in your member.cash account - each
        action (posting, liking, subscribing, following, messaging etc)
        requires a small amount of Bitcoin Cash. Add some funds, a few cents is enough.</span>
    <br />
    <br />
    <span data-vavilon="VV0022">Your address is</span> <span id="lowfundsaddress"></span>
    <br />
    <br />
    <span data-vavilon="VV0023">Send Nuggets your address for a few cents if you're
        finding it difficult to get some.</span>
    <br />
    BitClout <a rel='noopener noreferrer' href="https://bitclout.com/amazingnuggets">@amazingnuggets</a><br />
    Twitter <a rel='noopener noreferrer' href="https://twitter.com/chickenorgold">@chickenorgold</a><br />
    Reddit <a rel='noopener noreferrer'
        href="https://www.reddit.com/user/theamazingnuggets">/u/theamazingnuggets</a><br />
    <span data-vavilon="VV0024">Email</span> <a rel='noopener noreferrer'
        href="mailto:nuggetcoins@gmail.com">nuggetcoins@gmail.com</a><br />
    <br />
    <br />
    <a href="" onclick="refreshPool();return false;"><span data-vavilon="VV0025">Refresh
            your balance</span></a> or
    <a href="" onclick="document.getElementById('lowfundswarning').style.display = 'none';return false;"><span
            data-vavilon="VV0026">Dismiss
            this message</span></a>
</div>
`;

var walletanchorHTML=`
<div class="content">

    <div id="walletbalance">
        <label data-vavilon="VVbalance" data-vavilon="address">Balance</label>
        <span class="balancebch" id="balancebch">0</span>
        <span class="satoshis">(BCH)</span>
        <span class="balancesatoshis" id="balancesatoshis">0</span>
        <span class="satoshis">(satoshis)</span>
        <span class="approximatelyequal">≈</span>
        <span class="balanceusd" id="balanceusd">0</span>
        <span class="usd">(USD)</span>
        <span data-vavilon_title="refreshbalance" onclick="refreshPool();return false;" title="Refresh Balance"
            class="balancedetails">
            <img src="img/icons/reload.png" alt="">
        </span>
    </div>


    <div id="walletaddress" onclick="copyToClipboard('{cashaddress}')">
        <label data-vavilon="VV0065" data-vavilon="address">Address</label>
        <span class="copytoclipboard"><img src="img/icons/copy.png" width="20" height="20" alt="copy"></span>
        <span id="cashaddrformat">{cashaddress}</span>
        <div id="cashaddrformatdiv">
            <span class="qrcodeclick" onclick="showQRCode('cashaddrformat',200);">
                <img width="24" height="24" src='img/qrcodeicon.svg'><span data-vavilon="VV0066">Click to enlarge QR
                    code</span>
            </span>
        </div>
    </div>
    <div id="walletlegacyaddress" onclick="copyToClipboard('{address}')">
        <label data-vavilon="VV0068">Legacy Address</label>
        <span class="copytoclipboard"><img src="img/icons/copy.png" width="20" height="20" alt="copy"></span>
        <span id="legacyformat">{address}</span>
        <div id="legacyformatdiv">
            <span class="qrcodeclick" onclick="showQRCode('legacyformat',200);">
                <img width="24" height="24" src='img/qrcodeicon.svg'><span data-vavilon="VV0066">Click to enlarge QR
                    code</span>
            </span>
        </div>
    </div>

    <div id="walletsendfunds">
        <label data-vavilon="VV0028" for="sendfundsname">Send Funds To Another Address</label>
        <p data-vavilon="VV0029">You can send funds to another Bitcoin Cash address.</p>

        <label data-vavilon="VV0031" for="fundsamount">Bitcoin Cash Address (Any format)</label>
        <input class="sendfundsaddress" id="sendfundsaddress" maxlength="200" size="60">

        <label data-vavilon="VV0030" for="fundsamount">Amount (In Satoshi)</label>
        <input id="fundsamount" size="12" type="number" maxlength="12" onchange="sendFundsAmountChanged();"
            onkeypress="this.onchange();" onpaste="this.onchange();" oninput="this.onchange();">

        <span class="sendusd" id="sendusd">($0.00 USD)</span>

        <button data-vavilon="VV0032" class="memberstandardbutton" id="sendfundsbutton" type="button"
            onclick="sendfunds();">Send
            Funds</button>
        <br />
    </div>
    <div id="walletprivatekey">
        <label data-vavilon="VV0176">Seed Phrase / Private Key / WIF</label>
        <span id="privatekeydisplay" style="display: none;">{seedphrase}</span>
        <span id="privatekey"><a data-vavilon="showpriv" id="privatekeyclicktoshow"
                onclick="document.getElementById('privatekeydisplay').style.display='block';document.getElementById('privatekeyclicktoshow').style.display='none';">text</a></span>
        <div id="privatekeydisplaydiv"></div>
        <span id="privatekeyformat" style="display: none;">{privatekey}</span>
        <div id="privatekeyformatdiv">
            <span class="qrcodeclick" onclick="showQRCode('privatekeyformat',200);">
                <img width="24" height="24" src='img/qrcodeicon.svg'><span data-vavilon="VV0066">Click to enlarge QR
                    code</span>
            </span>
        </div>
    </div>
    <div id="walletblockexplorer">
        <label data-vavilon="VV0067" for="settingsblockexplorer">Block Explorers</label>
        <a class="blockexplorerlink" rel="noopener noreferrer" target="bitcoincom" id="settingsbitcoincom"
            href="https://explorer.bitcoin.com/bch/address/{address}">bitcoin.com</a>
        <a class="blockexplorerlink" rel="noopener noreferrer" target="blockchair" id="settingsblockchair"
            href="https://blockchair.com/bitcoin-cash/address/{address}">blockchair</a>
        <a class="blockexplorerlink" rel="noopener noreferrer" target="btccom" id="settingsbtccom"
            href="https://bch.btc.com/{address}">btc.com</a>
        <a class="blockexplorerlink" rel="noopener noreferrer" target="bitcoinunlimited" id="settingsbitcoinunlimited"
            href="https://explorer.bitcoinunlimited.info/address/{address}">bitcoin
            unlimited</a>
    </div>
</div>
`;

var newpostHTML=`
<br />
<div id="newpostprofilepic" class="newpostprofilepic">
</div>
<div id="memorandumarea">
    <input type="hidden" name="quotetxid" value="" id="quotetxid">
    <input type="hidden" name="quotetxidnetwork" value="" id="quotetxidnetwork">
    
    <!-- //Remove topic - use tags to introduce a topic
    <div id="memorandumtopicbutton">
        <a data-vavilon="VV0037" href=""
            onclick="document.getElementById('memorandumtopicarea').style.display = 'block';document.getElementById('memorandumtopicbutton').style.display = 'none'; return false;">+add
            topic</a>
    </div>
    <div id="memorandumtopicarea" style="display: none;">
        <label data-vavilon="VV0038" for="memorandumtopic">topic (optional)</label><label for="memorandumtopic"><span
                id="memorandumtopiclengthadvice">(0/214)</span></label>
        <input class="memorandumtopic" id="memorandumtopic" maxlength="217" onchange="topictitleChanged('memorandum');"
            onkeypress="this.onchange();" onpaste="this.onchange();" oninput="this.onchange();">
    </div>
    -->
    <div>
        <textarea class="memorandumtitle" id="memorandumtitle" rows="4" cols="60" maxlength="5000"
            onchange="memorandumPreview();" onkeypress="this.onchange();" onpaste="this.onchange();"
            oninput="this.onchange();"></textarea>
        <!--<label for="memorandumtitle"><span id="memorandumtitlelengthadvice">(0/217)</span></label>-->
    </div>
    <div id="memorandumtextbutton">
        <br />
        <a data-vavilon="VV0039" href=""
            onclick="document.getElementById('memorandumtextarea').style.display = 'block';document.getElementById('memorandumtextbutton').style.display = 'none'; return false;">+add
            article</a>
    </div>
    <div id="memorandumtextarea" style="display: none;">
        <label data-vavilon="VV0040" for="newposttamemorandum">article (optional)</label>
        <textarea id="newposttamemorandum" name="text" rows="20" cols="80" onchange="memorandumPreview();"
            onkeypress="this.onchange();" onpaste="this.onchange();" oninput="this.onchange();"></textarea>
    </div>
    <br />
    <div id="quotepost" class="quotepost"></div>
    <div>
        <input data-vavilon_value="VV0041" id="newpostmemorandumbutton" value="Post" type="submit"
            onclick="postmemorandum();">
        <input data-vavilon_value="VV0042" id="newpostmemorandumstatus" style="display: none;" value="Sending . . ."
            type="submit" disabled>
        <div id="newpostmemorandumcompleted"></div>
    </div>
    <br />
    <div id="memorandumpreviewareabutton">
        <br />
        <a data-vavilon="VV0043" href="javascript:;"
            onclick="document.getElementById('memorandumpreviewarea').style.display = 'block';document.getElementById('memorandumpreviewareabutton').style.display = 'none'; memorandumPreview(); return false;">+see
            preview</a>
    </div>
    <div id="memorandumpreviewarea" style="display: none;">
        <label data-vavilon="VV0044" for="memorandumpreview">Preview</label>
        <label for="memorandumpreview">
            <div id="switchToArticleMode" class="switchToArticleMode"><a data-vavilon="VV0045" href='javascript:;'
                    onclick="switchToArticleMode();">(Switch to Article Mode)</a></div>
            <div id="switchToRegularMode" class="switchToRegularMode"><a data-vavilon="VV0046" href='javascript:;'
                    onclick="switchToRegularMode();">(Switch to Regular Mode)</a></div>
        </label>
        <div id="memorandumpreview" class="fatitem">
        </div>
    </div>
</div>
`;

var messagesanchorHTML=`
<div class="content">
    <div id="sendmessagecontainer">
        <span id="messagerecipient" class="messagerecipient"></span>
        <span id="messageaddress" class="messageaddress"></span>
        <span id="messagepublickey" class="messagepublickey"></span>
        <div id="sendmessagebox" style="display: none;">
            <p data-vavilon="VV0048">Warning: The metadata of your private messages will be public on the blockchain
                (that's the
                sender, recipient, size and time of your message).
                Additionally, if the recipient's private key is made public in the future, the recipient's
                messages will become public. Using the blockchain for
                messaging is generally not advised. Nevertheless, you're a big boy and this facility is made
                available to you if you wish to use it.
            </p>

            <label data-vavilon="VV0053" for="stampamount">Stamp Amount (in sats, minimum 547)</label>
            <input id="stampamount" size="8" type="number" value="547">
            <div>
                <label data-vavilon="VV0054" for="newposttamessage">Message</label>
                <textarea id="newposttamessage" name="text" rows="20" cols="80"></textarea>
            </div>
            <div>
                <input data-vavilon_value="VV0055" id="newpostmessagebutton" value="Send Message" type="submit"
                    onclick="postprivatemessage();">
                <input data-vavilon_value="VV0175" id="newpostmessagestatus" style="display: none;"
                    value="Sending . . ." type="submit" disabled>
                <div id="newpostmessagecompleted"></div>
            </div>
        </div>
        <br />
    </div>
    <div id="messageschoice" class="filters">
        <a data-vavilon_title="allmessages" class="filteroff" href="#messages?messagetype=all" onclick="nlc();">All</a>
        <a data-vavilon_title="sentmessages" class="filteroff" href="#messages?messagetype=sent"
            onclick="nlc();">Sent</a>
        <a data-vavilon_title="receivedmessages" class="filteroff" href="#messages?messagetype=received"
            onclick="nlc();">Received</a>
    </div>
    <br />
    <div id="messageslist" class="messageslist"></div>
</div>
`;

var fbHTML={};
fbHTML.followers=`
<div class="content">
    <h2>Followers</h2>
    <br />
    <table class="table">
        <thead>
            <tr>
                <th data-vavilon="VV0007">Member</th>
                <th></th>
                <th data-vavilon="VV0007">Member</th>
            </tr>
        </thead>
        <tbody id="followerstable">
        </tbody>
    </table>
</div>
`;

fbHTML.following=`
<div class="content">
    <h2>Following</h2>
    <br />
    <table class="table">
        <thead>
            <tr>
                <th data-vavilon="VV0007">Member</th>
                <th></th>
                <th data-vavilon="VV0007">Member</th>
            </tr>
        </thead>
        <tbody id="followingtable">
        </tbody>
    </table>
</div>
`;

fbHTML.blockers=`
<div class="content">
    <h2>Muters</h2>
    <br />
    <table class="table">
        <thead>
            <tr>
                <th data-vavilon="VV0007">Member</th>
                <th></th>
                <th data-vavilon="VV0007">Member</th>
            </tr>
        </thead>
        <tbody id="blockerstable">
        </tbody>
    </table>
</div>
`;

fbHTML.blocking=`
<div class="content">
    <h2>Muting</h2>
    <br />
    <table class="table">
        <thead>
            <tr>
                <th data-vavilon="VV0007">Member</th>
                <th></th>
                <th data-vavilon="VV0007">Member</th>
            </tr>
        </thead>
        <tbody id="blockingtable">
        </tbody>
    </table>
</div>
`;

var communityHTML=`
<div class="content">
    <h2>Ratings Of This Member</h2>
    <br />
    <table class="table">
        <thead>
            <tr>
                <th data-vavilon="VV0007">Member</th>
                <th data-vavilon="VV0056">Rates</th>
                <th data-vavilon="VV0007">Member</th>
            </tr>
        </thead>
        <tbody id="communityratingtable">
        </tbody>
    </table>
    <br /><br />
</div>
`;

var anchorratingsHTML=`
<div class="content">
    <h2>Ratings By This Member</h2>
    <br />
    <table class="table">
        <thead>
            <tr>
                <th data-vavilon="VV0007">Member</th>
                <th data-vavilon="VV0056">Rates</th>
                <th data-vavilon="VV0007">Member</th>
            </tr>
        </thead>
        <tbody id="memberratingtable">
        </tbody>
    </table>
</div>
`;

var trustgraphHTML=`
<div class="content">
    <h2 data-vavilon="VV0057">Trust Graph</h2>
    <div id="trustgraphdetails"></div>
    <br />
</div>
`;

var bestiesHTML=`
<div class="content">
    <div id="bestiesdetails">
        <div id="bestiescy" style="width:100%;height:600px;"></div>
        <div id="cynote" style="width:100%">&nbsp;</div>
    </div>
    <br />
</div>
`;

var membertabsHTML=`
<div class="filterssecondset">
    <a data-vavilon="VV0063" data-vavilon_title="VV0063" title="Profile" class="{profileclass}"
        href="#member?qaddress={address}">Profile</a>
    <span class="separator"></span>
    <a data-vavilon="VVreputation" data-vavilon_title="VVreputation" title="Reputation" class="{reputationclass}"
        href="#rep?qaddress={address}">Reputation</a>
    <span class="separator"></span>
    <!--<a data-vavilon="VVsupport" data-vavilon_title="VVsupport" title="Support" class="{bestiesclass}"
        href="#support?qaddress={address}">Top 5</a>-->
    <span class="separator"></span>
    <a data-vavilon="VVlist" data-vavilon_title="VVlist" title="List" class="filteroff"
        href="#list?qaddress={address}">List</a>
    <span class="separator"></span>
    <a data-vavilon="VV0004" data-vavilon_title="VV0004" title="Posts" class="{postsclass}"
        href="#show?start=0&limit=25&order=new&content=posts&filter=everyone&qaddress={address}&topicname=">Posts</a>
</div>
`;

var pages = {};
pages.member = `
<div class="content">
    <div class="memberpiccontainer">
        <label data-vavilon="VV0059" id="memberpiclargelabel" for="memberpic" style="display:inline;">Profile
            Picture</label>
        <span class="memberpiclarge" style="display:inline;">
            {profilepiclargehtml}
        </span>
    </div>
    <!--<label for="memberidenticon">Identicon</label>
    <div id="memberidenticon"><svg width="20" height="20" class="jdenticonlarge" data-jdenticon-value="{address}"></svg>
    </div>
    <label data-vavilon="VV0065">Address</label>-->

    <div class="profileactions" id="memberprofileactions">
        {followbuttonhtml}
        <span class="dropdown">
            <button onclick="dropDownMenuAction(this);" class="dropbtn">☰</button>
            <div class="dropdown-content mainhamburger" id="dropdown-content">
                <a data-vavilon="VV0061" class="populate-send-message"
                    onclick="populateSendMessage('{address}','{handlefunction}','{publickey}');"
                    href="javascript:;">Send Message</a>
                {mutebuttonhtml}
                <a href="https://member.cash/#member?qaddress={address}" id="memberprofilelink">member.cash</a><span
                    class="separatorwide"></span><a rel="noopener noreferrer" target="memo"
                    href="https://memo.cash/profile/{address}" id="membermemoprofilelink">Memo</a><span
                    class="separatorwide"></span><a rel="noopener noreferrer" target="bitclout"
                    href="https://bitclout.com/u/{pagingid}" id="bitcloutprofilelink">BitClout</a><span
                    class="separatorwide"></span><a rel="noopener noreferrer" target="bitcloutsignal"
                    href="https://bitcloutsignal.com/history/{pagingid}" id="bitcloutsignalprofilelink">signal</a><span
                    class="separatorwide"></span><a rel="noopener noreferrer" target="prosperclout"
                    href="https://www.prosperclout.com/pk/{bcaddress}?tab=overview"
                    id="prospercloutprofilelink">ProsperClout</a>
            </div>
        </span>
    </div>



    <!-- *** -->
    <div class="memberdetails">
        <span class="profile-handle">{handle}</span>
        <br />
        <span class="profile-pagingid" id="memberpagingid">@{pagingid}</span>
    </div>

    <div id="memberprofiletext">{profile}</div>

    <div class="memberstats">
        <div class="membrain">
            <a href="https://member.cash/a/804fc6e860"></a><label data-vavilon="membrain">MemBrain</label></a>
            <a id="membrainnumber" href="https://member.cash/a/804fc6e860">{membrain}</a>
        </div>
        <div class="followers">
            <label data-vavilon="VV0071">Followers</label>
            <a id="memberfollowersnumber" href="#followers?qaddress={address}">{followers}</a>
        </div>
        <div class="following">
            <label data-vavilon="VV0072">Following</label>
            <a id="memberfollowingnumber" href="#following?qaddress={address}">{following}</a>
        </div>
        <div class="muters">
            <label data-vavilon="VV0073">Muters</label>
            <a id="memberblockersnumber" href="#blockers?qaddress={address}">{muters}</a>
        </div>
        <div class="muting">
            <label data-vavilon="VV0074">Muting</label>
            <a id="memberblockingnumber" href="#blocking?qaddress={address}">{muting}</a>
        </div>
    </div>
    <div id="memberratinggroup" style="display: none;">
        <label data-vavilon="VV0075" for="memberratingcomment">You Rate</label>
        <div class="memberratinggroup">
            <div class="memberratingcomment" id="memberratingcomment"></div>
            <div class="memberrating" id="memberrating"></div>
        </div>
    </div>
    {pinnedpostHTML}
    <div id="walletaddress" onclick="copyToClipboard('{cashaddress}')">
        <span class="copytoclipboard"><img src="img/icons/copy.png" width="20" height="20" alt="copy"></span>
        <span id="membercashaddrformat">{cashaddress}</span>
        <div id="membercashaddrformatdiv">
            <span class="qrcodeclick" onclick="showQRCode('membercashaddrformat',200);">
                <img width="24" height="24" src='img/qrcodeicon.svg'><span data-vavilon="VV0066">Click to enlarge QR
                    code</span>
            </span>
        </div>
    </div>
    <div id="walletbcaddress" onclick="copyToClipboard('{bcaddress}')">
        <span class="copytoclipboard"><img src="img/icons/copy.png" width="20" height="20" alt="copy"></span>
        <span id="memberbcformat">{bcaddress}</span>
        <div id="memberbcformatdiv">
            <span class="qrcodeclick" onclick="showQRCode('memberbcformat',200);">
                <img width="24" height="24" src='img/qrcodeicon.svg'><span data-vavilon="VV0066">Click to enlarge QR
                    code</span>
            </span>
        </div>
    </div>


</div>`;

pages.settings = `
<div class="content">
    <input id="settingspagingid" value="{pagingid}" style="display:none;">
    <input id="settingspublickey" value="{publickey}" style="display:none;">
    <input id="settingspicurl" value="{picurl}" style="display:none;">
    <input id="settingstokens" value="{tokens}" style="display:none;">
    <input id="settingsnametime" value="{nametime}" style="display:none;">
    <input id="settingsrating" value="{rating}" style="display:none;">

    <h2 data-vavilon="VV0166">Settings</h2>
    <div id="settingsloggedin">
        <div class="settingspiccontainer">
            <label data-vavilon="VV0059" id="settingspiclargelabel" for="settingspic" style="display:inline;">Profile
                Picture</label>
            <label id="settingspiclargelabel" for="settingspic" style="display:inline;">
                <span data-vavilon="VV0076" class="profilepicdirections">(Must be imgur link in this format or .png
                    format)</span></label>
            <div class="formgroup">
                <input maxlength="217" size="30" id="settingspic" value="https://i.imgur.com/XXXXXXXX.jpg"
                    onchange="document.getElementById('settingspicbutton').disabled=false;"
                    onkeypress="this.onchange();" onpaste="this.onchange();" oninput="this.onchange();">
                <button data-vavilon="VV0077" id="settingspicbutton" type="button" onclick="setPic();"
                    disabled="">update</button>
            </div>
            <span class="settingspiclarge" style="display:inline;">
                {profilepiclargehtml}
            </span>

        </div>
        <div>
            <label data-vavilon="VV0060" for="settingsnametext">Handle</label>
            <div class="formgroup">
                <input maxlength="217" size="30" id="settingsnametext" value="{handle}"
                    onchange="document.getElementById('settingsnametextbutton').disabled=false;"
                    onkeypress="this.onchange();" onpaste="this.onchange();" oninput="this.onchange();">
                <button data-vavilon="VV0077" id="settingsnametextbutton" type="button"
                    onclick="setName();">update</button>
            </div>
        </div>
        <label data-vavilon="VV0062" for="settingspagingid">Paging ID</label>
        <div id="settingspagingid">@{pagingid}</div>
        <div>
            <label data-vavilon="VV0063" for="settingsprofiletext">Profile</label>
            <div class="formgroup">
                <input maxlength="217" size="30" id="settingsprofiletext" value="{profile}"
                    onchange="document.getElementById('settingsprofiletextbutton').disabled=false;"
                    onkeypress="this.onchange();" onpaste="this.onchange();" oninput="this.onchange();">
                <button data-vavilon="VV0077" id="settingsprofiletextbutton" type="button" onclick="setProfile();"
                    data-vavilon="update" disabled="">update</button>
            </div>
        </div>
        <div>
            <label data-vavilon="VV0079" for="notificationbutton">Notifications</label>
            <span class="allownotifications"><a data-vavilon="VV0080" class="memberlinkbutton" href="javascript:;"
                    onclick="requestNotificationPermission(); this.style.display='none';">Allow
                    Notifications</a></span>
        </div>
        <div>
            <label data-vavilon="VV0082" for="oneclicktip">One-Click Tip Amount</label>
            <input id="oneclicktip" size="8" type="number" onchange="updateSettingsNumber('oneclicktip');"
                onkeypress="this.onchange();" onpaste="this.onchange();" oninput="this.onchange();">
            <p data-vavilon="VV0177">(Amount to tip when clicking up arrow. Minimum 547)</p>
        </div>
        <div>
            <label data-vavilon="maxfee" for="maxfee">Max Fee</label>
            <input id="maxfee" size="3" type="number" step="1" onchange="updateSettingsNumber('maxfee');"
                onkeypress="this.onchange();" onpaste="this.onchange();" oninput="this.onchange();">
            <p data-vavilon="VV0083">(Max satoshis per byte to pay during network congestion. Minimum 2)</p>
        </div>
    </div>
    <div>
        <label for="languageselector">Language / 语言 / Idioma / Lengguwahe</label>
        <select id="languageselector" onchange="updateSettingsDropdown('languageselector');">
            <option value="en">English</option>
            <option value="zh">中文</option>
            <option value="es">Español</option>
            <option value="fil">Filipino</option>
        </select>
    </div>
    <div>
        <label data-vavilon="VV0081" for="cssselector">Theme</label>
        <select id="cssselector" onchange="changeStyle(document.getElementById('cssselector').value, true);">
            <option data-vavilon="VV0167" value="feels compact">Choose Theme</option>
            <option value="feels compact">Feels Compact</option>
            <option value="feels-night compact compactnight">Feels Compact Night Mode</option>
            <option data-vavilon="VV0168" value="none">None</option>
        </select>
    </div>
    <div>
        <label data-vavilon="resultsnumber" for="results">Number Of Results To Show</label>
        <input id="results" size="3" type="number" step="1" onchange="updateSettingsNumber('results');"
            onkeypress="this.onchange();" onpaste="this.onchange();" oninput="this.onchange();">
        <p data-vavilon="VV0084">(Max results to show per page. Maximum 100)</p>
    </div>
    <div>
        <label data-vavilon="VV0085" for="currencydisplay">Currency Display</label>
        <select id="currencydisplay" onchange="updateSettingsDropdown('currencydisplay');">
            <option value="USD">USD</option>
            <option value="BCH">BCH</option>
        </select>
    </div>
    <div>
        <label data-vavilon="VV0086" for="mutedwords">Muted Words (Comma Separate)</label>
        <textarea id="mutedwords" name="text" rows="4" cols="60" onchange="updatemutedwords();"
            onkeypress="this.onchange();" onpaste="this.onchange();" oninput="this.onchange();"></textarea>
    </div>
    <div>
        <label data-vavilon="VV0087" for="mediasettings" class="labelheader">Media Settings</label>
    </div>
    <div class="customcheckbox">
        <input type="checkbox" id="showyoutube" onchange="updateSettingsCheckbox('showyoutube');">
        <label data-vavilon="VV0088" for="showyoutube" class="checkboxlabel">Show YouTube Preview Images</label>
    </div>
    <div class="customcheckbox">
        <input type="checkbox" id="showimgur" onchange="updateSettingsCheckbox('showimgur');">
        <label data-vavilon="VV0089" for="showimgur" class="checkboxlabel">Show Imgur Images</label>
    </div>
    <div class="customcheckbox">
        <input type="checkbox" id="showtwitter" onchange="updateSettingsCheckbox('showtwitter');">
        <label data-vavilon="VV0090" for="showtwitter" class="checkboxlabel">Show Tweets</label>
    </div>
    <div class="customcheckbox">
        <input type="checkbox" id="showlbry" onchange="updateSettingsCheckbox('showlbry');">
        <label data-vavilon="showlbry" for="showlbry" class="checkboxlabel">Show lbry.tv</label>
    </div>
    <div class="customcheckbox">
        <input type="checkbox" id="showbitclout" onchange="updateSettingsCheckbox('showbitclout');">
        <label data-vavilon="showbitclout" for="showbitclout" class="checkboxlabel">Show BitClout Images</label>
    </div>


    <!-- Too slow on server side-->

    <div>
        <label data-vavilon="VV0181" for="filtersettings" class="labelheader">Filter Settings</label>
    </div>
    <div class="customcheckbox">
        <input type="checkbox" id="shownonameposts" onchange="updateSettingsCheckbox('shownonameposts');">
        <label data-vavilon="VV0182" for="shownonameposts" class="checkboxlabel">Show Posts From Members With No
            Handle</label>
    </div>
    <div class="customcheckbox">
        <input type="checkbox" id="shownopicposts" onchange="updateSettingsCheckbox('shownopicposts');">
        <label data-vavilon="VV0183" for="shownopicposts" class="checkboxlabel">Show Posts From Members With No
            Picture</label>
    </div>
    <div class="customcheckbox">
        <input type="checkbox" id="showonlybchnetwork" onchange="updateSettingsCheckbox('showonlybchnetwork');">
        <label data-vavilon="VVbchonly" for="showonlybchnetwork" class="checkboxlabel">Show Only BCH Network
            Content</label>
    </div>
    <div>
        <label data-vavilon="VV0091" for="contentserver">Content Server</label>
        <select id="contentserver" onchange="updateSettingsDropdown('contentserver');">
            <option value="https://member.cash/v2/member.js">member.cash</option>
            <option value="https://memberjs.bchd.cash/v2/member.js">memberjs.bchd.cash</option>
            <option value="http://127.0.0.1:3123/v2/member.js">Localhost</option>
        </select>
    </div>
    <div>
        <label data-vavilon="VV0092" for="txbroadcastserver">TX Broadcast Server</label>
        <select id="txbroadcastserver" onchange="updateSettingsDropdown('txbroadcastserver');">
            <option value="https://member.cash/v2/">member.cash</option>
            <option value="https://memberjs.bchd.cash/v2/">memberjs.bchd.cash</option>
            <option value="http://127.0.0.1:3123/v2/">Localhost</option>
            <option value="https://rest.bitcoin.com/v2/">Bitcoin.com</option>
        </select>
    </div>

    <div>
        <label data-vavilon="VV0093" for="utxoserver">UTXO Server</label>
        <select id="utxoserver" onchange="updateSettingsDropdown('utxoserver');">
            <option value="https://member.cash/v2/">member.cash</option>
            <option value="https://rest.bitcoin.com/v2/">Bitcoin.com</option>
            <option value="https://memberjs.bchd.cash/v2/">memberjs.bchd.cash</option>
            <option value="http://127.0.0.1:3123/v2/">Localhost</option>
        </select>
    </div>
    <div>
        <label data-vavilon="debuginfo" for="debuginfo">Debug Info</label>
        <textarea id="debuginfo" name="text" rows="2" cols="60" readonly></textarea>
        <br/>
        <a href="javascript:;" onclick="getJSON(dropdowns.contentserver + '/invalidatecache/')" ;
            class="memberlinkbutton">Invalidate cache (will force reload of client)</a>
    </div>


</div>`;

var hamburgerMenuHTML=`
<span class="dropdown">
    <button onclick="dropDownMenuAction(this);" class="dropbtn">☰</button>
    <div class="dropdown-content mainhamburger" id="dropdown-content">
        <a data-vavilon_title="VV0063" id="profilebutton" title="Profile" class="hamburgerbutton" href="#profile"
            onclick="nlc();" style="display:none;">
            <img src="img/icons/user.png" alt="profile">
            <span data-vavilon="VV0063">Profile</span></a>
        <a data-vavilon_title="VVwallet" id="walletbutton" title="Wallet" class="hamburgerbutton" href="#wallet"
            onclick="nlc();" style="display:none;">
            <img src="img/icons/wallet.png" alt="wallet">
            <span data-vavilon="VVwallet">Wallet</span></a>
        <a data-vavilon_title="VV0100" id="topiclistbutton" title="Tag List" class="hamburgerbutton" href="#topiclist"
            onclick="nlc();">
            <img src="img/icons/hashtag.png" alt="MyFeed">
            <span data-vavilon="VV0100">Tag List</span></a>
        <a data-vavilon_title="VV0101" id="mapbutton" title="Map" class="hamburgerbutton" href="#map" onclick="nlc();">
            <img src="img/icons/map.png" alt="map">
            <span data-vavilon="VV0101">Map</span></a>
        <a data-vavilon_title="VV0098" id="settingsbutton" title="Settings" class="hamburgerbutton" href="#settings"
            onclick="nlc();">
            <img src="img//Icons/settings.png" alt="settings">
            <span data-vavilon="VV0098">Settings</span></a>
        <a data-vavilon_title="VV0078" id="logoutbutton" title="Logout" class="hamburgerbutton" href="#logout"
            onclick="logout();" style="display:none;">
            <img src="img/icons/exit.png" alt="logout">
            <span data-vavilon="VV0078">Logout</span></a>
    </div>
</span>
`;

var pageTitleHTML = `
<div class="pageTitlediv" id="pagetitledivid">Topic</div>
`

var majorNavButtonsHTML=`
<div id="majornavbuttonsdivid" class="majornavbuttonsdiv">
    <span id="loggedin" class="loggedin" style="display:none;">
        <a data-vavilon_title="VV0095"  onclick="nlc();" id="notificationsbutton" title="Notifications" href="#notifications">
            <img src="img/icons/notification.png" alt="notificatons">
            <span class="alertcount noselect" id="alertcount"></span></a>
        <a data-vavilon_title="VVfirehose"  onclick="nlc();" id="firehosebutton" title="Firehose (Everything)" href="#firehose">
            <img src="img/icons/fire-hose.png" alt="FireHose">
        </a>
        <a data-vavilon_title="VV0094a" onclick="nlc();" id="myfeedbutton" title="My People (Latest posts from your follows)" href="#mypeople">
            <img src="img/icons/group.png" alt="MyFeed">
        </a>
        <a data-vavilon_title="VV0100a" onclick="nlc();" id="topiclistbutton" title="My Tags  (Latest posts from your tags)" href="#mytags">
            <img src="img/icons/hashtaglarge.png" alt="MyFeed">
        </a>
        <a data-vavilon_title="VV0097" onclick="nlc();" id="privatemessagesbutton" title="Messages" href="#messages">
            <img src="img/icons/messages.png" alt="message">
            <span class="alertcount noselect" id="alertcountpm"></span></a>
        <a data-vavilon_title="VV0096" onclick="nlc();" id="newbutton" title="New Post" href="#new">
            <img src="img/icons/plus.png" alt="newpost">
        </a>
    </span>
    <span id="loggedout" class="loggedout">
        <a data-vavilon_title="VVfirehose" class="largenavbtn" onclick="nlc();" id="firehosebuttonloggedout"
            title="Firehose (Everything)"
            href="#show?order=hot&content=posts&topicname=&filter=everyone&start=0&limit=25">
            <!-- 📰 -->
            <img src="img/icons/fire-hose.png" alt="firehose">
        </a>
        <a data-vavilon="VV0102a" id="loginbutton" class="btn vavilon" href="#login" onclick="nlc();">Login</a>
        <span class="separatorwide"></span>
        <a data-vavilon="VV0103a" id="loginbutton" class="btn vavilon" href="#login" onclick="nlc();">Start</a>
    </span>

</div>
`;

var userSearchHTML=`
<div id="usersearchnav" class="usersearchnavclass">
    <input class="usersearchnav" id="usersearchnavid" maxlength="40"
        onchange="userSearchChanged('usersearchnavid','usersearchnavresults');" onkeypress="this.onchange();"
        onfocus="this.onchange();" onpaste="this.onchange();" oninput="this.onchange();"
        data-vavilon_data_placeholder="VVsearchplaceholder" placeholder="Search..." />
    <div id="usersearchnavresults"></div>
</div>
`;



var headerHTML = `
<div id="ddcover" class="ddcover"></div>
<div class="headerleftgroup">
    <span class="memberlogo">
        <a href="./index.html">
            <img class="memberlogoimagefull" src="img/logos/logowide.svg" width="130" height="26"
                alt="Site Logo Full" />
            <img class="memberlogoimage" src="img/logos/membericon.svg" width="26" height="26" alt="Site Logo Icon" />
        </a>
    </span>
    <a class="profilepicwrapper" href="#profile" onclick="nlc();"><span id="profilepicheader"
            class="profilepicheader"></a>
    </span>
    </a>
    <div id="pagetitle" class="pagetitleclass"></div>
</div>
<div class="headercentergroup">
    <nav id="majornavbuttons" class="majornavbuttonsclass"></nav>
</div>
<div class="headerrightgroup">
    <div class="searchwrapper">
        <nav id="usersearch" class="usersearchclass"></nav>
        <nav id="hamburgermenu" class="hamburgermenuclass"></nav>
    </div>
</div>
`;

var footerHTML = `
<div class="content">
    <hr />
    <span id="developmentversion" style="display: none;"><span data-vavilon="VV0137">You're viewing the development
            preview version
            of Member You may need to SHIFT + Reload to get the very latest changes. Generally, It's recommended
            to</span>
        <a data-vavilon="VV0138" rel='noopener noreferrer' target="member" href="https://member.cash">use the stable
            version at https://member.cash</a><br /><br />
        <hr />
    </span>
    <span class="footerlinks">
        <span data-vavilon="VV0139">Supporters</span>&nbsp;∙&nbsp;
        <a rel='noopener noreferrer' target="memo"
            href="https://memo.cash/token/766f9f56ac0a3f0e4c64cb3453d0c45336a20685827801b2188d237c2a6ffc43?balances">BCH</a>&nbsp;∙&nbsp;
        <a rel='noopener noreferrer' target="bitclout"
            href="https://bitclout.com/u/membercash?tab=creator-coin">BCLT</a>
        <span class="separatorwide"></span>
        <a data-vavilon="VV0140" rel='noopener noreferrer' target="member"
            href="https://member.cash/#member?qaddress=16gs2oeLVJJT3YTL8uHLoRyLQtaWfEDxh1">Donate</a>
        <span class="separatorwide"></span>
        <a rel='noopener noreferrer' target="github" href="https://github.com/memberapp/memberapp.github.io">Github</a>
        <span class="separatorwide"></span>
        <a rel='noopener noreferrer' target="bitcoin" href="https://www.bitcoin.com">Bitcoin</a>
        <span class="separatorwide"></span>
        <a data-vavilon="VV0141" rel='noopener noreferrer' target="github"
            href="https://github.com/memberapp/protocol">Protocol</a>
        <span class="separatorwide"></span>
        <a data-vavilon="VV0142" href="mailto:freetrade.mc@gmail.com">Contact</a>
        <span class="separatorwide"></span>
        <span data-vavilon="VV0143">version</span> <span id="version" title="version">loading</span>.<u>9</u>
    </span>
    <br />
    <br />
</div>
`;