{% extends "layout.twig" %}

{% block title %}{{ t('dashboard.title') }} - {{ app_name }}{% endblock %}

{% block content %}
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="mb-8">
        <h1 class="text-3xl font-bold text-gray-900">
            <i class="fas fa-tachometer-alt text-purple-600"></i>
            {{ t('dashboard.title') }}
        </h1>
        <p class="mt-2 text-gray-600">{{ t('dashboard.welcome') }}</p>
    </div>

    <!-- Stats -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
        <div class="bg-white rounded-lg shadow p-6">
            <div class="flex items-center">
                <div class="p-3 rounded-full bg-blue-100 text-blue-600">
                    <i class="fas fa-server text-2xl"></i>
                </div>
                <div class="ml-4">
                    <p class="text-sm font-medium text-gray-600">{{ t('dashboard.total_servers') }}</p>
                    <p class="text-2xl font-bold text-gray-900">{{ servers|length }}</p>
                </div>
            </div>
        </div>

        <div class="bg-white rounded-lg shadow p-6">
            <div class="flex items-center">
                <div class="p-3 rounded-full bg-green-100 text-green-600">
                    <i class="fas fa-users text-2xl"></i>
                </div>
                <div class="ml-4">
                    <p class="text-sm font-medium text-gray-600">{{ t('dashboard.total_clients') }}</p>
                    <p class="text-2xl font-bold text-gray-900">{{ clients|length }}</p>
                </div>
            </div>
        </div>

        <div class="bg-white rounded-lg shadow p-6">
            <div class="flex items-center">
                <div class="p-3 rounded-full bg-green-100 text-green-600">
                    <i class="fas fa-wifi text-2xl"></i>
                </div>
                <div class="ml-4">
                    <p class="text-sm font-medium text-gray-600">{{ t('dashboard.online_now') }}</p>
                    <p class="text-2xl font-bold text-gray-900">
                        {{ online_count|default(0) }}
                    </p>
                </div>
            </div>
        </div>
    </div>

    <!-- Quick Actions -->
    <div class="bg-white rounded-lg shadow p-6 mb-8">
        <h2 class="text-xl font-bold text-gray-900 mb-4">
            <i class="fas fa-bolt text-yellow-500"></i>
            {{ t('dashboard.quick_actions') }}
        </h2>
        <div class="flex space-x-4">
            <a href="/servers/create" class="gradient-bg text-white px-6 py-3 rounded-md hover:opacity-90 inline-flex items-center">
                <i class="fas fa-plus mr-2"></i>
                {{ t('servers.add') }}
            </a>
        </div>
    </div>

    <!-- Recent Servers -->
    {% if servers|length > 0 %}
    <div class="bg-white rounded-lg shadow overflow-hidden">
        <div class="px-6 py-4 border-b border-gray-200">
            <h2 class="text-xl font-bold text-gray-900">
                <i class="fas fa-server text-blue-600"></i>
                {{ t('dashboard.recent_servers') }}
            </h2>
        </div>
        <table class="min-w-full divide-y divide-gray-200">
            <thead class="bg-gray-50">
                <tr>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">{{ t('servers.name') }}</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">{{ t('servers.host') }}</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">{{ t('servers.status') }}</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">{{ t('servers.actions') }}</th>
                </tr>
            </thead>
            <tbody class="bg-white divide-y divide-gray-200">
                {% for server in servers|slice(0, 5) %}
                <tr>
                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                        {{ server.name }}
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                        {{ server.host }}
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                        {% if server.status == 'active' %}
                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
                            {{ t('status.active') }}
                        </span>
                        {% elseif server.status == 'deploying' %}
                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">
                            {{ t('status.deploying') }}
                        </span>
                        {% else %}
                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">
                            {{ server.status|capitalize }}
                        </span>
                        {% endif %}
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm">
                        <a href="/servers/{{ server.id }}" class="text-purple-600 hover:text-purple-900">
                            <i class="fas fa-eye"></i> {{ t('servers.view') }}
                        </a>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    {% else %}
    <div class="bg-white rounded-lg shadow p-12 text-center">
        <i class="fas fa-server text-gray-300 text-6xl mb-4"></i>
        <h3 class="text-xl font-medium text-gray-900 mb-2">{{ t('dashboard.no_servers') }}</h3>
        <p class="text-gray-500 mb-6">{{ t('dashboard.get_started') }}</p>
        <a href="/servers/create" class="gradient-bg text-white px-6 py-3 rounded-md hover:opacity-90 inline-block">
            <i class="fas fa-plus mr-2"></i>
            {{ t('dashboard.add_first_server') }}
        </a>
    </div>
    {% endif %}
</div>
{% endblock %}