{% extends "ruderboot/components/ruderboot_tab.jinja" %}
{% block title %}Settings{% endblock %}
{% set tab = 'settings_get' %}
{% block content %}
    <br/>
    <style>
        .big_option {
            display: inline-block;
            width: 14em;
            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: End Remove #}

        .css-1rbd7t8 {
            box-sizing: border-box;
            margin: 60px 0px 24px;
            min-width: 0px;
        }
        .css-yn7azs {
            box-sizing: border-box;
            margin: 0px;
            min-width: 0px;
            -moz-box-pack: justify;
            justify-content: space-between;
            position: relative;
            font-family: "Source Serif Pro", serif;
            font-weight: 600;
            line-height: 1.5;
            letter-spacing: -0.02em;
            font-variant: common-ligatures;
            text-rendering: optimizelegibility;
            font-size: 16px;
            display: flex;
        }
    </style>

    <div class="card">
        <h1>{{ _("Configure your extension") }}</h1>
        <br>

        <div class="note">
            {{ _("- Maybe you want to put some notes for the user") }}<br/>
            {{ _("- One important setting is whether your extension gets a menu-point on the left") }}<br/>
            {{ _("- Let us assume you want the user to use a specific wallet. That should go here. ") }}<br/>
        </div>
        <br/>

        <form action="{{ url_for(service.get_blueprint_name() + '.settings_post') }}" method="POST" role="form">
            <input type="hidden" class="csrf-token" name="csrf_token" value="{{ csrf_token() }}"/>
            
            <div>Show Menu Item:</div>
            <select name="show_menu">
                <option value="yes"   {% if show_menu == 'yes' %}selected{% endif %}>Yes</option>
                <option value="no"    {% if show_menu == 'no'  %}selected{% endif %}>No</option>
            </select>
            <br/>
            <br/>
            <br/>

            {{ _("Choose which wallet should be used:") }}:<br>
            <select name="used_wallet">
                {% for wallet in wallets %}
                    <option value="{{ wallet.alias }}" {% if associated_wallet == wallet %}selected{% endif %}>{{ wallet.name }}</option>
                {% endfor %}
            </select>
            <br/>
            <br/>
            <br/>
            
            <div class="row">
                <button type="submit" class="btn">{{ _("Save") }}</button>
            </div>

        </form>
    </div>
    <br/>
    <br/>
    <br/>


{% endblock %}