{% extends "base.jinja" %}

{% block main %}
    <style>
        .tagline {
            font-style: italic;
            font-size: 1.1em;
            text-align: center;
            color: #aaa;
            padding-left: 4em;
            padding-right: 4em;
        }

        .button_wide {
            text-decoration: none;
            color: white;
        }
        .button_wide:hover {
            color: white;
        }
        .big_option {
            display: inline-block;
            width: 12em;
            padding: 1em;
            vertical-align: middle;
            height: 3.5em;
            border: 4px solid var(--cmap-border);
            border-radius: 0.5em;
            background-color: var(--cmap-bg-lighter);
            font-size: 1.5em;
            margin: 1em;
            position: relative;
        }
        .big_option:hover {
            background-color: var(--cmap-bg-lightest);
            border: 4px solid var(--main-color);
            cursor: pointer;
        }

        .big_option_text {
            margin: 0;
            position: absolute;
            top: 50%;
            left: 50%;
            -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
        }

        .bonus {
            color: #999;
            font-size: 0.7em;
            font-style: italic;
        }

        .highlights {
            margin-top: 2em;
            margin-bottom: 1.5em;
        }

        .show_list_bullet {
            margin-top: 0.5em;
            display: inline-block;
            width: auto;
        }
        .show_list_bullet li {
            text-align: left;
            list-style-type: disc;
            line-height: 1.7em;
        }

        .plus_sign {
            font-size: 3em;
            color: #ccc;
            vertical-align: text-bottom;
        }
    </style>
    <img src="{{ url_for(service.id +'_endpoint' + '.static', filename=service.logo) }}" width="300"/>
    <div class="tagline">&ldquo;Swan is a great way to accumulate Bitcoin with automatic recurring buys and instant buys.&rdquo;</div>
    <div class="card center" style="width: auto; min-width: 90%; margin: 40px;">
        <a class="button_wide" href="{{ swan_frontend_url }}" target="_swan">
            <span class="big_option">
                <div class="big_option_text">
                    Join Swan!
                    <br/>
                    <div class="bonus">$10&nbsp;free&nbsp;Bitcoin&nbsp;bonus</div>
                </div>
            </span>
        </a>
        <span class="big_option" onclick="location.href='{{ url_for(service.id +'_endpoint.oauth2_start') }}';">
            <div class="big_option_text">
                Existing&nbsp;Swan&nbsp;users
            </div>
        </span>

        <div class="highlights">
            <img src="{{ url_for(service.id +'_endpoint' + '.static', filename=service.icon) }}" width="50"/>
            <span class="plus_sign">+</span>
            <img src="{{ url_for('static', filename='img/ghost_3d.png') }}" width="50"/><br/>
            <div class="show_list_bullet">
                <li>Auto-withdraw from Swan straight into your Specter wallet
                <li>Swan UTXOs marked in your Specter History
            </div>
        </div>
    </div>
{% endblock %}



{% block scripts %}
    <script>
    </script>
{% endblock %}