{% extends "base.jinja" %}
{% block main %}
    {% include "includes/text-explainer.html" %}

    <style>
    .small-card:hover {
         background-color: var(--cmap-bg);
    }
    h2 {
         margin:  0 0 25px 0;
         min-width: 410px;
    }
    </style>

    <h1>{{ _("Setting up Electrum as a new device") }}</h1>
        <form id="form" action="{{ url_for('devices_endpoint.new_device_keys' , device_type='electrum')}}" method="POST">
        <div class="small-card center" style="cursor: auto;">
            <input type="hidden" class="csrf-token" name="csrf_token" value="{{ csrf_token() }}"/>
            <input type="hidden" id="device_type" name="device_type" value="electrum">
            <input type='hidden' id="xpub" name="xpub">   
            <h2>{{ _("Name your device: ") }}
                <input type="text" name="device_name" pattern="^[^']+" title="Do not use single quotes" placeholder="My Electrum device" id="device_name" value="{{ device_name }}" required/>
            </h2>
            <h2>{{ _("Master public key:") }}
                <input type="text" id="master_pub_key" name="master_pub_key" value="{{ master_pub_key }}" placeholder="Your master public key" required>
            </h2>
            <text-explainer style="align-self: start;">
                <span slot="title" style="font-size: 1.2em;">{{ _("How to get this info from Electrum?") }}</span>
                <div slot="content">
                    <p style="max-width: 300px; font-size: 1.1em;">
                        {{ _('You can find the master public key under "Wallet" and "Information":') }}
                    </p>
                    <img src="{{ url_for('electrum_endpoint.static', filename='electrum/img/electrum_manual/1.png')}}" alt=_("Select Wallet  -  Information") style="width: 250px; height: 300px">
                    <img src="{{ url_for('electrum_endpoint.static', filename='electrum/img/electrum_manual/2.png')}}" alt=_("Copy the master public key and derivation path") style="width: 385px; height: 300px"> 
                </div>
            </text-explainer>
            <button type="submit" class="btn centered" style="font-size: 14px; margin-top: 25px" name="action" onsubmit="showPacman()">{{ _("Continue") }}</button>   
            </div>     
        </form>
    
{% endblock %}