<style>
    #onion-address-container {
        position: absolute;
        width: 240px;
        top: 10px;
        padding: 10px;
        margin: 10px;
        background: #7D4698;
        border-radius: 10px;
        z-index: 1;
        border: 1px solid #aaa;
    }

    #tor-btn {
        position: absolute;
        width: 24px;
        margin-right: 50px;
        z-index: 2;
        border-radius: 10px;
    }

    #tor-toggle-btn {
        cursor: pointer;
        border-radius: 0 0 0 15px;
        position: relative;
        padding: 10px 40px 10px 20px;
    }

    .onion-address {
        word-wrap: break-word;
        color: #fff;
        font-size: 0.8em;
        text-decoration: none;
    }

    .onion-address:hover {
        text-decoration: underline;
        cursor: pointer;
    }

    .dot {
        cursor: pointer;
        height: 8px;
        width: 8px;
        position: absolute;
        border-radius: 50%;
        display: inline-block;
        top: 9px;
        left: 36px;
        z-index: 3;
    }

    .dot-on {
        {% if tor_enabled %}
            background-color: #0f0;
        {% else %}
            background-color: #ccc;
        {% endif %}
    }

    .dot-off {
        {% if tor_enabled %}
            background-color: #f00;
        {% else %}
            background-color: #ccc;
        {% endif %}
    }

    .tor-btn {
        margin-top: 10px;
        width: 90px;
        border: none;
        font-size: 0.8em;
        color: #fff;
        padding: 5px;
        border-radius: 5px;
        border: 1px solid #59316B;
        background: #7D4698;
    }

    .tor-btn:hover {
        cursor: pointer;
        background: #59316B;
    }
</style>
<div id="onion-address-container" class="hidden optional">
    <div class="tool-tip" style="margin: 3px;">
        <i class="tool-tip__icon">i</i>
        <p class="tool-tip__info" style="margin-top: 22px;">
            <span class="info">
                <span class="info__title">Accessing Specter with a Tor hidden service<br></span><br>
                Running a Tor hidden service with Specter allows you to securly access Specter from any remote device and location.<br><br>
                <b>Please Note:</b><br>Connecting over Tor requires that you first configure Tor on your local machine.<br>
                You can checkout <a target="_blank" href="https://www.keepitsimplebitcoin.com/how-to-install-tor/" style="color: #fff;">this video tutorial</a>, or read the documentation for <a target="_blank" href="https://github.com/cryptoadvance/specter-desktop/blob/master/docs/tor.md" style="color: #fff;">Mac and Linux</a> or <a target="_blank" href="https://github.com/Fonta1n3/FullyNoded/blob/master/Docs/Tor/Tor.md#windows-10" style="color: #fff;">Window</a><br>
            </span>
        </p>
    </div>
    {% if tor_service_id %}
        <span style="font-size: 0.95em; color: #fff;">Specter Running on Tor</span><br>
        <div style="margin-top: 5px;"> <span style="font-size: 0.85em; color: #fff;">Running at:</span></div>
        <div class="center">
            <span title="Copy Tor address" class="onion-address centered" onclick="copyText('{{ tor_service_id }}.onion', 'Copied Tor hidden service address: {{ tor_service_id }}.onion')">
            {{ tor_service_id }}.onion
            </span>
        </div>
        {% if current_user.is_admin and (tor_service_id and tor_service_id + '.onion' not in request.url) %}
            <form action="?" class="center">
                <button class="tor-btn" type="submit" name="action" value="stoptor">Stop Tor</button>
            </form>
        {% endif %}
    {% else %}
        {% if debug %}
            <span style="font-size: 0.95em; color: #fff;">Tor is unavailable...</span><br>
            <div style="margin-top: 5px;">
                <span style="font-size: 0.85em; color: #fff;">You are running Specter in debug mode, but Tor hidden services are only available in production mode.</span>
            </div>
        {% else %}
            <span style="font-size: 0.95em; color: #fff;">Tor service is down...</span><br>
            {% if current_user.is_admin and ('.onion' not in request.url) %}
                <form action="?" class="center">
                    <button class="tor-btn" type="submit" name="action" value="starttor">Start Tor</button>
                </form>
            {% endif %}
        {% endif %}
    {% endif %}
</div>
<div class="settings-bar-btn" id='tor-toggle-btn'>
    <img id="tor-btn" src="{{ url_for('static', filename='img/tor.svg') }}"/>
    <span class="dot {% if tor_service_id %}dot-on{% else %}dot-off{% endif %}" id="tor-symbol-status-dot"></span>
</div>
<script>
    document.addEventListener("DOMContentLoaded", function() {
        let torToggleBtn = document.getElementById('tor-toggle-btn');
        let torDataContainer = document.getElementById('onion-address-container');

        function toggleTorPopup() {
            torDataContainer.style.display = torDataContainer.style.display == 'block' ? 'none' : 'block';
        }
        torToggleBtn.addEventListener("click", toggleTorPopup);
        let right = 0;
        for(let i in document.getElementById('status-bar').children) {
            if (i < document.getElementById('status-bar').children.length - 1) {
                right += document.getElementById('status-bar').children[i].offsetWidth;
            }
        }
        torDataContainer.style.right = (right + 22) + 'px';
        window.addEventListener('click', function(e){   
            if (!torDataContainer.contains(e.target) && !torToggleBtn.contains(e.target)){
                if (torDataContainer.style.display == 'block') {
                    toggleTorPopup();
                }
            }
        });
    });
</script>