{% extends "base.html" %}

{% block title %}Dashboard - WebSocket SSH Daemon{% endblock %}

{% block content %}
<div class="row">
    <div class="col-md-8">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title mb-0">
                    <i class="fas fa-server"></i> Connected Clients
                </h3>
            </div>
            <div class="card-body">
                {% if clients %}
                    <div class="row">
                        {% for client in clients %}
                            <div class="col-md-4 mb-3">
                                <div class="card client-card h-100">
                                    <div class="card-body text-center">
                                        <i class="fas fa-desktop fa-3x text-success mb-3"></i>
                                        <h5 class="card-title">{{ client }}</h5>
                                        <p class="card-text text-muted">Connected</p>
                                        <a href="{{ url_for('terminal', client_id=client) }}" class="btn btn-primary">
                                            <i class="fas fa-terminal"></i> Connect
                                        </a>
                                    </div>
                                </div>
                            </div>
                        {% endfor %}
                    </div>
                {% else %}
                    <div class="text-center py-5">
                        <i class="fas fa-server fa-4x text-muted mb-3"></i>
                        <h4 class="text-muted">No clients connected</h4>
                        <p class="text-muted">Clients will appear here when they connect to the daemon.</p>
                    </div>
                {% endif %}
            </div>
        </div>
    </div>

    <div class="col-md-4">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title mb-0">
                    <i class="fas fa-cogs"></i> Quick Actions
                </h3>
            </div>
            <div class="card-body">
                {% if current_user.is_admin %}
                    <a href="{{ url_for('users') }}" class="btn btn-outline-primary btn-sm mb-2 w-100">
                        <i class="fas fa-users"></i> Manage Users
                    </a>
                {% endif %}
                <button class="btn btn-outline-secondary btn-sm w-100" onclick="location.reload()">
                    <i class="fas fa-sync"></i> Refresh Status
                </button>
            </div>
        </div>

        <div class="card mt-3">
            <div class="card-header">
                <h3 class="card-title mb-0">
                    <i class="fas fa-info-circle"></i> System Info
                </h3>
            </div>
            <div class="card-body">
                <p class="mb-1"><strong>WebSocket Port:</strong> <span id="websocket-port">{{ websocket_port or 'N/A' }}</span></p>
                <p class="mb-1"><strong>Domain:</strong> <span id="domain">{{ domain or 'N/A' }}</span></p>
                <p class="mb-0"><strong>Connected Clients:</strong> <span id="client-count">{{ clients|length }}</span></p>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
let currentClients = {{ clients|tojson }};

function updateClients() {
    fetch('/api/clients')
        .then(response => response.json())
        .then(data => {
            // Update client count
            document.getElementById('client-count').textContent = data.count;

            // Check if client list changed
            if (JSON.stringify(data.clients.sort()) !== JSON.stringify(currentClients.sort())) {
                // Reload the page to show updated client list
                location.reload();
            }
        })
        .catch(error => {
            console.log('Error fetching client data:', error);
        });
}

// Update every 5 seconds
setInterval(updateClients, 5000);

// Initial update after 1 second
setTimeout(updateClients, 1000);
</script>
{% endblock %}