{% extends 'oauth2_capture/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>Active Connections</h4>

    <table>
        <thead>
            <tr>
                <th>Provider</th>
                <th>Username</th>
                <th>Token Expired</th>
                <th>Expired At</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>
        {% for connection in connections %}
            <tr>
                <td>{{ connection.provider }}</td>
                <td>{{ connection.username }}</td>
                <td style="text-align: center">{{ connection.is_expired }}</td>
                <td>{{ connection.expires_in_humanized }}</td>
                <td>
                    <a href="{% url 'oauth2_capture:revoke' slug=connection.slug %}" title="Revoke {{ connection.provider }} ({{ connection.name }})">Revoke</a>
                </td>
            </tr>
        {% empty %}
            <tr><td colspan="2">No connections</td></tr>
        {% endfor %}
        </tbody>
    </table>


    <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>
        <li><a href="{% url 'oauth2_capture:initiate_oauth2' provider='pinterest' %}" onclick="openPopup(this.href); return false;">Pinterest</a></li>
        <li><a href="{% url 'oauth2_capture:initiate_oauth2' provider='facebook' %}" onclick="openPopup(this.href); return false;">Facebook</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 %}