{% extends "base.jinja" %}
{% block main %}
    <style>
        .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%);
        }

        .instructions {
            color: #999;
            font-style: italic;
        }
        /* ToDo: Refactor to style.css */
        a {
            /* Copied from .note */
            font-size: 0.9em;
            text-decoration: underline;
            color: inherit;
        }
        a:hover {
            color: #fff ; 
        }
    </style>

    <img src="{{ url_for(service.id +'_endpoint' + '.static', filename=service.logo) }}" width="300"/>
    <div class="card center" style="width: auto; min-width: 90%; margin: 40px;">
        <h1>{{ _("Enable Swan Integration") }}</h1>
        <br/>

        <div class="big_option" onclick="window.open('{{ flow_url }}', '_blank');">
                <div class="big_option_text"> 
                    {{ _("Link your account") }}
                    
                </div>
                
        </div>
        
        <div class="instructions">
            
            <br>
            {{ _("Click to sign into your Swan account and authorize Specter integration.") }}
            {{ _("(will open in a new browser tab)") }} <br>
            <!-- Empty href will result in keeping on that page if the auth flow didn't succeeded yet -->
            <!-- If suceeded, the controller will automaticall redirect to settings-page -->
            After you've succeeded, you can click <a href="">here</a> to configure swan.<br>
        </div>
        <br/>
    </div>
{% endblock %}



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