{% 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>Access Token</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>
                    <div style="display: flex; align-items: center; max-width: 300px;">
                        <input
                            type="text"
                            value="{{ connection.access_token }}"
                            readonly
                            style="flex: 1; margin-right: 8px; font-family: monospace; font-size: 12px; padding: 4px;"
                            id="token-{{ connection.id }}"
                        >
                        <button
                            onclick="copyToken('token-{{ connection.id }}')"
                            style="background: none; border: 1px solid #ccc; padding: 4px 8px; cursor: pointer;"
                            title="Copy token to clipboard"
                        >
                            📋
                        </button>
                    </div>
                </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="6">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>
        <li><a href="{% url 'oauth2_capture:initiate_oauth2' provider='youtube' %}" onclick="openPopup(this.href); return false;">YouTube</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}`);
    }

    function copyToken(inputId) {
        const input = document.getElementById(inputId);
        const token = input.value;

        navigator.clipboard.writeText(token).then(function() {
            // Show success feedback
            const button = input.nextElementSibling;
            const originalText = button.innerHTML;
            button.innerHTML = '✓';
            button.style.color = 'green';

            setTimeout(function() {
                button.innerHTML = originalText;
                button.style.color = '';
            }, 2000);
        }).catch(function(err) {
            // Fallback for older browsers
            input.select();
            input.setSelectionRange(0, 99999);
            document.execCommand('copy');

            const button = input.nextElementSibling;
            const originalText = button.innerHTML;
            button.innerHTML = '✓';
            button.style.color = 'green';

            setTimeout(function() {
                button.innerHTML = originalText;
                button.style.color = '';
            }, 2000);
        });
    }
    </script>

{% endblock %}
