{% extends 'base.html' %}

{% block content %}
    <h1>OAuth2 Capture Management</h1>
    <p>Logged in as {{ request.user }}</p>
    <p><a href="/admin">Goto to admin</a></p>

    <h4>Connections</h4>
    <ul>
        {% for connection in connections %}
            <li>{{ connection.provider }} ({{ connection.username }})
            <a href="{% url 'oauth2_capture:revoke' slug=connection.slug %}" title="Revoke {{ connection.provider }} ({{ connection.name }})">X</a>
            </li>
        {% empty %}
            <li>No connections</li>
        {% endfor %}
    </ul>


    <h4>Add new connections</h4>
    <ul>
        <li><a href="{% url 'oauth2_capture:initiate_oauth2' provider='linkedin' %}" onclick="openPopup(this.href); return false;">LinkedIn</a></li>
        <li><a href="{% url 'oauth2_capture:initiate_oauth2' provider='twitter' %}" onclick="openPopup(this.href); return false;">X (Twitter)</a></li>
        <li><a href="{% url 'oauth2_capture:initiate_oauth2' provider='github' %}" onclick="openPopup(this.href); return false;">Github</a></li>
        <li><a href="{% url 'oauth2_capture:initiate_oauth2' provider='reddit' %}" onclick="openPopup(this.href); return false;">Reddit</a></li>
    </ul>
    <hr/>
    <ul>

    </ul>
    <script>
    function openPopup(url) {
        const width = 600;
        const height = 600;
        const left = (screen.width / 2) - (width / 2);
        const top = (screen.height / 2) - (height / 2);
        window.open(url, 'oauthPopup', `width=${width},height=${height},scrollbars=yes,top=${top},left=${left}`);
    }
    </script>

{% endblock %}
