{% extends "base.html" %}

{% block title %}Clients - Fixture Manager{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-2">
    <h1>Connected Clients</h1>
    <div class="d-flex gap-1">
        <span class="badge badge-success" style="background-color: #28a745; color: white;">Online</span>
        <span class="badge badge-secondary" style="background-color: #6c757d; color: white;">Offline</span>
    </div>
</div>

<div class="alert alert-info">
    <strong>Client Status:</strong> Clients are considered online if they've sent a request to the API in the last 30 minutes.
    The list shows all clients first (online), followed by offline clients.
</div>

<div class="table-responsive">
    <table class="table table-striped">
        <thead>
            <tr>
                <th>Client Name</th>
                <th>RustDesk ID</th>
                <th>Status</th>
                <th>Last Seen</th>
                <th>Remote Link</th>
                <th>IP Address</th>
                <th>User Agent</th>
            </tr>
        </thead>
        <tbody>
            {% if clients %}
                {% for client in clients %}
                    <tr class="{% if client.is_online %}table-success{% else %}table-secondary{% endif %}">
                        <td>
                            <strong>{{ client.token_name }}</strong>
                            <br><small class="text-muted">{{ client.username }}</small>
                        </td>
                        <td>
                            <code>{{ client.rustdesk_id }}</code>
                        </td>
                        <td>
                            {% if client.is_online %}
                                <span class="badge badge-success" style="background-color: #28a745; color: white;">Online</span>
                            {% else %}
                                <span class="badge badge-secondary" style="background-color: #6c757d; color: white;">Offline</span>
                            {% endif %}
                        </td>
                        <td>
                            {{ client.last_seen_formatted }}
                            <br><small class="text-muted">{{ client.last_seen_ago }}</small>
                        </td>
                        <td>
                            {% if client.is_online %}
                                <a href="https://{{ client.rustdesk_id }}.remote.{{ client.remote_domain }}" 
                                   target="_blank" 
                                   class="btn btn-sm btn-primary">
                                    Connect
                                </a>
                            {% else %}
                                <span class="text-muted">Not available</span>
                            {% endif %}
                        </td>
                        <td>
                            {% if client.ip_address %}
                                <code>{{ client.ip_address }}</code>
                            {% else %}
                                <span class="text-muted">Unknown</span>
                            {% endif %}
                        </td>
                        <td>
                            {% if client.user_agent %}
                                <small class="text-muted">{{ client.user_agent[:50] }}{% if client.user_agent|length > 50 %}...{% endif %}</small>
                            {% else %}
                                <span class="text-muted">Unknown</span>
                            {% endif %}
                        </td>
                    </tr>
                {% endfor %}
            {% else %}
                <tr>
                    <td colspan="7" class="text-center text-muted">
                        No clients found. Clients will appear here when they connect to the API.
                    </td>
                </tr>
            {% endif %}
        </tbody>
    </table>
</div>

<div class="mt-2 text-muted">
    <small>
        <strong>Note:</strong> The remote link format is: https://{rustdesk_id}.remote.{remote_domain}
        <br>Default remote domain: townshipscombatleague.com (configurable in admin settings)
    </small>
</div>
{% endblock %}

{% block extra_css %}
<style>
    .badge {
        padding: 4px 8px;
        border-radius: 4px;
        font-size: 0.8rem;
        font-weight: bold;
    }
    
    .table-success {
        background-color: rgba(40, 167, 69, 0.1) !important;
    }
    
    .table-secondary {
        background-color: rgba(108, 117, 125, 0.1) !important;
    }
    
    code {
        background-color: #f8f9fa;
        padding: 2px 4px;
        border-radius: 3px;
        font-size: 0.9em;
    }
</style>
{% endblock %}