{% 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> {{ config.WEBSOCKET_PORT or 'N/A' }}</p>
                <p class="mb-1"><strong>Domain:</strong> {{ config.DOMAIN or 'N/A' }}</p>
                <p class="mb-0"><strong>Connected Clients:</strong> {{ clients|length }}</p>
            </div>
        </div>
    </div>
</div>
{% endblock %}