{% extends "spectrum/components/spectrum_tab.jinja" %}

{% block main %}
    <h1>{{ _("Connect with Electrum") }}</h1>
    <p>
        {{ _("Choose from a list of Electrum servers or connect to your own server. ") }}
        {{ _("Connecting to a third-party server without Tor leaks private information. ") }}
    </p>
    <div class="flex p-4 mt-3 mb-4 bg-dark-600 rounded-lg" role="alert">
        <svg class="flex-shrink-0 inline w-6 h-6 mr-3" version="1.1" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><!--Generated by IJSVG (https://github.com/iconjar/IJSVG)--><path d="M32.0022,55.9844l-1.04907e-06,-2.84217e-14c-13.2548,-5.79387e-07 -24,-10.7452 -24,-24c5.79387e-07,-13.2548 10.7452,-24 24,-24c13.2548,5.79387e-07 24,10.7452 24,24l2.13163e-14,-1.04907e-06c0,13.2548 -10.7452,24 -24,24Zm1.5,-32l3.82016e-08,-2.71086e-09c-1.79133,0.127116 -3.35165,-1.21031 -3.5,-3l6.50646e-08,-7.8524e-07c0.148296,-1.78972 1.70866,-3.12717 3.5,-3l-5.85322e-09,4.15529e-10c1.79134,-0.127171 3.3517,1.21028 3.5,3l-5.57104e-08,6.72365e-07c-0.148295,1.78976 -1.70872,3.12723 -3.5001,3Zm1.4206,6.7635l-2.7853,10.5093l-8.37179e-08,3.15667e-07c-0.270677,1.02062 0.262417,2.08281 1.2425,2.4757l-5.91015e-08,-2.36708e-08c0.379505,0.151996 0.628277,0.519688 0.6282,0.9285v0.323l8.52651e-14,4.05e-07c0,0.551933 -0.447167,0.999503 -0.9991,1h-2.9891l-4.04477e-08,1.96948e-10c-1.65938,0.00807986 -3.01111,-1.33056 -3.01919,-2.98993c-0.00127082,-0.260991 0.0314695,-0.521035 0.0973943,-0.773566l2.7852,-10.5094l2.79671e-08,-1.05468e-07c0.270652,-1.02067 -0.262537,-2.08289 -1.2427,-2.4757l-2.20542e-08,-8.83296e-09c-0.379505,-0.151996 -0.628276,-0.519688 -0.6282,-0.9285v-0.3229l-1.77636e-14,-9.40042e-08c-8.33514e-08,-0.552011 0.447289,-0.999614 0.9993,-1h2.9887l1.06497e-07,-5.28143e-10c1.65943,-0.00822943 3.01133,1.33033 3.01956,2.98976c0.00129458,0.261047 -0.0314356,0.52115 -0.0973639,0.773738Z" fill="currentColor" fill-rule="evenodd"></path></svg>
        <span class="sr-only">Info</span>
        <div>
            {{ _("Switching between Electrum and Bitcoin Core connections will require wallet reconfiguration.") }}
        </div>
    </div>
    <form action="{{ url_for(service.get_blueprint_name() + '.index_post') }}" method="POST" role="form" class="space-y-3">
        <input type="hidden" class="csrf-token" name="csrf_token" value="{{ csrf_token() }}"/> 
        <div class="grid grid-cols-2 gap-3">
            <label class="checkbox-wrapper">
                <input type="radio" class="peer checkbox-input" id="elec_option_list" name="option_mode" value="list" >
                <span class="checkbox-label">{{ _("Pick a public server") }}</span>
            </label>
            <label class="checkbox-wrapper">
                <input type="radio" class="peer checkbox-input" id="elec_option_manual" name="option_mode" value="manual" >
                <span class="checkbox-label">{{ _("Enter my own") }}</span>
            </label>
        </div>
        <div id="elec_manual_container" class="hidden grid grid-cols-2 gap-3">
            <div class="floating-wrapper">
                <input class="floating-input peer" id="host-input" type="text" name="host" type="text" value="{{ host }}" placeholder=" ">
                <label class="floating-label">Host (127.0.0.1)</label>
            </div>
            <div class="floating-wrapper">
                <input class="floating-input peer" id="port-input" type="text"  name="port" type="text" value="{{ port }}" placeholder=" ">
                <label class="floating-label">Port (50000)</label>
            </div>
            <div class="flex items-center">
                <label class="switch">
                    <input id="ssl-input" type="checkbox" name="ssl" style="margin: auto;" value="on" {% if ssl %} checked {% endif %}>
                    <span id="ssl-slider" class="slider"></span>
                </label>
                <label for="ssl-input" class="ml-2">{{ _("Use SSL") }}&nbsp;</label>
            </div>
        </div>
        <div id ="elec_list_container" class="floating-wrapper">
            <select id="server-list" name="elec_option" class="floating-input peer">
                {% for electrum_option in elec_options %}
                    <option value="{{ electrum_option }}" {% if elec_chosen_option == electrum_option %}selected{% endif %}>{{ electrum_option }}</option>
                {% endfor %}
            </select>
            <label for="server-list" class="floating-label">Public Server</label>
        </div>
        <select name="show_menu" hidden>
            <option value="yes">Yes</option>
            <option value="no" selected>No</option>
        </select>
        <div class="lg:flex gap-2 mt-10 justify-end pt-8">
            {% if node_is_available %}
                <button type="submit" class="button" name="action" value="delete">{{ _("Delete") }}</button>
            {% endif %}
            <button id="connect-btn" type="submit" class="button bg-accent text-white" name="action" value="connect">
                <span id="connect-text">{{ _("Connect") }}</span>
                <img class="hidden rounded-full w-4 h-4 animate-spin" id="connecting-indicator" src="{{ url_for('static', filename='img/refresh.svg') }}"/>
            </button>
        </div>
    </form>
{% endblock %}

{% block scripts %}
  <script>
    this.elecOptionList = document.getElementById("elec_option_list")
    this.elecOptionManual = document.getElementById("elec_option_manual")

    this.elecManualContainer = document.getElementById("elec_manual_container")
    this.elecListContainer = document.getElementById("elec_list_container")

    let hostInput = document.getElementById('host-input')
    let portInput = document.getElementById('port-input')
    let sslInput = document.getElementById('ssl-input')

    function showElecOption(option) {
        if (option == 'list') {
            this.elecOptionList.checked = true
            this.elecManualContainer.style.display ='none'
            this.elecListContainer.style.display = 'block'
        } else {
            this.elecOptionManual.checked = true
            this.elecManualContainer.style.display ='grid'
            this.elecListContainer.style.display = 'none'
        }
    }
    {% if elec_chosen_option == "manual" %}
        showElecOption("manual")
    {% else %}
        showElecOption("list")
    {% endif %}

    // Click event handler for manual configuration
    elec_option_manual =  document.getElementById("elec_option_manual")
    elec_option_manual.addEventListener('click', (event) => {
        this.showElecOption("manual")
        // Clear out the input fields, otherwise it is using the values from the server from the list
        hostInput.value = ""
        portInput.value = ""
        sslInput.checked = false
    });
    
    // Click event handler for configuration from list
    this.elec_option_list =  document.getElementById("elec_option_list")
    this.elec_option_list.addEventListener('click', (event) => {
        this.showElecOption("list")
    });

    const connectBtn = document.getElementById('connect-btn')
    const connectText = document.getElementById('connect-text');
    const connectingIndicator = document.getElementById('connecting-indicator')
    connectBtn.addEventListener('click', () => {
        connectText.classList.add('hidden')
        connectingIndicator.classList.remove('hidden')
    })

  </script>
{% endblock %}
