{% extends "base.jinja" %}

{% block main %}
    <style>
        .service_container {
            border: 4px solid var(--cmap-border);
            border-radius: 0.5em;
            display: inline-block;
            vertical-align: middle;
            background-color: var(--cmap-bg-lighter);
            width: 16em;
            height: 13em;
            cursor: pointer;
            padding: 1em;
            margin: 0.75em;
        }
        .service_container:hover {
            background-color: var(--cmap-bg-lightest);
            border: 4px solid var(--main-color);
        }

        .service_name {
            font-size: 1.5em;
        }
        .service_desc {
            color: #ccc;
        }


        .endnote {
            margin-top: 4em;
        }

        .login_disabled {
            max-width: 35em;
            border: 4px solid yellow;
            border-radius: 0.5em;
            background-color: var(--cmap-bg-lighter);
            padding: 1em;
            text-align: center;
        }
        .login_disabled .btn {
            margin: auto;
            max-width: 20em;
        }
    </style>
    <h1 style="font-size: 2em;">{{ _("Services") }}</h1>
    
    {% if is_login_disabled %}
        <div class="login_disabled">
            <p>{{ _("Current Authentication method: \"None\"")}}</p>
            <p>{{ _("Service integrations require secure per-user storage. This is only possible with a user authentication method that is password protected (any method other than \"None\").") }}</p>
            <br/>
            <p>{{ _("Select a new method in:") }}<br/>
            <a class="btn" href="{{ url_for('settings_endpoint.auth', next=url_for('services_endpoint.choose')) }}">{{ _("Settings") }}</a></p>
        </div>
    {% endif %}

    <div class="card center" style="width: auto; min-width: 90%; margin: 40px;">
        <br>
        {% for service in services %}
            <div class="service_container" {% if not is_login_disabled %}onclick="location.href=`{{ url_for(service.id + '_endpoint' + '.index') }}`"{% endif %}>
                {% if service.icon %}
                    <img src="{{ url_for(service.id + '_endpoint' + '.static', filename=service.icon) }}" height="80px"><br/>
                {% endif %}
                <div class="service_name">{{ service.name }}</div>
                <div class="service_desc">{{ service.desc }}</div>
            </div>
        {% endfor %}
        <div class="service_container">
            <img src="{{ url_for('static', filename='img/ghost_3d.png') }}" height="80px"><br/>
            <div class="service_name">???</div>
            <div class="service_desc">More integrations coming soon!</div>
        </div>
        <div class="service_container">
            <img src="{{ url_for('static', filename='img/ghost.png') }}" height="80px"><br/>
            <div class="service_name">???</div>
            <div class="service_desc">More integrations coming soon!</div>
        </div>
        <div class="service_container">
            <img src="{{ url_for('static', filename='img/icon.png') }}" height="80px"><br/>
            <div class="service_name">???</div>
            <div class="service_desc">More integrations coming soon!</div>
        </div>


        <div class="note endnote">
            {{ _("Some services might not respect the Tor-only policy.") }}
        </div>
    </div>
{% endblock %}



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