{% extends "base.html" %}

{% block title %}Codesphere Dashboard - Home{% endblock %}

{% block content %}
<div class="space-y-8">
    <!-- Header -->
    <div class="flex items-center justify-between">
        <div>
            <h1 class="text-3xl font-bold text-gray-900">Dashboard</h1>
            <p class="text-gray-600 mt-1">Manage your Codesphere teams and workspaces</p>
        </div>
        <button 
            hx-get="/" 
            hx-target="body" 
            hx-swap="outerHTML"
            class="bg-cs-primary hover:bg-cs-secondary text-white px-4 py-2 rounded-md text-sm font-medium transition flex items-center space-x-2"
        >
            <span>↻</span>
            <span>Refresh</span>
        </button>
    </div>

    <!-- Teams Section -->
    <section>
        <h2 class="text-xl font-semibold text-gray-800 mb-4 flex items-center space-x-2">
            <span>📁</span>
            <span>Teams</span>
            <span class="bg-gray-200 text-gray-700 text-sm px-2 py-0.5 rounded-full">{{ teams|length }}</span>
        </h2>
        
        {% if teams %}
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
            {% for team in teams %}
            <a href="/teams/{{ team.id }}" 
               class="bg-white rounded-lg shadow-md hover:shadow-lg transition p-6 border border-gray-200 hover:border-cs-primary group">
                <div class="flex items-start justify-between">
                    <div class="flex items-center space-x-3">
                        {% if team.avatar_url %}
                        <img src="{{ team.avatar_url }}" alt="{{ team.name }}" class="w-12 h-12 rounded-full">
                        {% else %}
                        <div class="w-12 h-12 rounded-full bg-cs-primary flex items-center justify-center text-white font-bold text-lg">
                            {{ team.name[0]|upper }}
                        </div>
                        {% endif %}
                        <div>
                            <h3 class="font-semibold text-gray-900 group-hover:text-cs-primary transition">{{ team.name }}</h3>
                            <p class="text-sm text-gray-500">ID: {{ team.id }}</p>
                        </div>
                    </div>
                    <span class="text-gray-400 group-hover:text-cs-primary transition">→</span>
                </div>
                {% if team.description %}
                <p class="mt-3 text-sm text-gray-600">{{ team.description }}</p>
                {% endif %}
                <div class="mt-4 flex items-center text-xs text-gray-500 space-x-4">
                    <span>📍 DC: {{ team.default_data_center_id }}</span>
                    {% if team.is_first %}
                    <span class="bg-yellow-100 text-yellow-800 px-2 py-0.5 rounded">Primary</span>
                    {% endif %}
                </div>
            </a>
            {% endfor %}
        </div>
        {% else %}
        <div class="bg-white rounded-lg shadow p-8 text-center">
            <p class="text-gray-500">No teams found. Create a team in Codesphere to get started.</p>
        </div>
        {% endif %}
    </section>

    <!-- Infrastructure Overview -->
    <section>
        <h2 class="text-xl font-semibold text-gray-800 mb-4 flex items-center space-x-2">
            <span>🏗️</span>
            <span>Infrastructure</span>
        </h2>
        
        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
            <!-- Datacenters -->
            <div class="bg-white rounded-lg shadow p-6 border border-gray-200">
                <div class="flex items-center justify-between mb-4">
                    <h3 class="font-semibold text-gray-700">Datacenters</h3>
                    <span class="bg-blue-100 text-blue-800 text-sm px-2 py-0.5 rounded-full">{{ datacenters|length }}</span>
                </div>
                <ul class="space-y-2">
                    {% for dc in datacenters %}
                    <li class="flex items-center justify-between text-sm">
                        <span class="text-gray-600">{{ dc.city }}, {{ dc.country_code }}</span>
                        <span class="text-gray-400">{{ dc.name }}</span>
                    </li>
                    {% endfor %}
                </ul>
            </div>

            <!-- Plans -->
            <div class="bg-white rounded-lg shadow p-6 border border-gray-200">
                <div class="flex items-center justify-between mb-4">
                    <h3 class="font-semibold text-gray-700">Available Plans</h3>
                    <span class="bg-green-100 text-green-800 text-sm px-2 py-0.5 rounded-full">{{ plans|length }}</span>
                </div>
                <ul class="space-y-2">
                    {% for plan in plans[:6] %}
                    <li class="flex items-center justify-between text-sm">
                        <span class="text-gray-600">{{ plan.title }}</span>
                        <span class="text-gray-400">
                            {{ plan.characteristics.cpu }} CPU · {{ plan.characteristics.ram }}MB
                        </span>
                    </li>
                    {% endfor %}
                    {% if plans|length > 6 %}
                    <li class="text-sm text-gray-400">... and {{ plans|length - 6 }} more</li>
                    {% endif %}
                </ul>
            </div>

            <!-- Base Images -->
            <div class="bg-white rounded-lg shadow p-6 border border-gray-200">
                <div class="flex items-center justify-between mb-4">
                    <h3 class="font-semibold text-gray-700">Base Images</h3>
                    <span class="bg-purple-100 text-purple-800 text-sm px-2 py-0.5 rounded-full">{{ images|length }}</span>
                </div>
                <ul class="space-y-2">
                    {% for image in images[:6] %}
                    <li class="flex items-center justify-between text-sm">
                        <span class="text-gray-600">{{ image.name }}</span>
                        <span class="text-gray-400 text-xs">{{ image.supported_until|datetime }}</span>
                    </li>
                    {% endfor %}
                    {% if images|length > 6 %}
                    <li class="text-sm text-gray-400">... and {{ images|length - 6 }} more</li>
                    {% endif %}
                </ul>
            </div>
        </div>
    </section>

    <!-- SDK Features Info -->
    <section class="bg-gradient-to-r from-cs-dark to-cs-secondary rounded-lg shadow-lg p-8 text-white">
        <h2 class="text-xl font-semibold mb-4">SDK Features Demonstrated</h2>
        <div class="grid grid-cols-2 md:grid-cols-4 gap-4 text-sm">
            <div class="space-y-1">
                <h4 class="font-medium text-indigo-200">Teams</h4>
                <ul class="text-indigo-100 space-y-0.5">
                    <li>• List teams</li>
                    <li>• View details</li>
                    <li>• Manage domains</li>
                    <li>• Usage tracking</li>
                </ul>
            </div>
            <div class="space-y-1">
                <h4 class="font-medium text-indigo-200">Workspaces</h4>
                <ul class="text-indigo-100 space-y-0.5">
                    <li>• Create/Delete</li>
                    <li>• Status monitoring</li>
                    <li>• Execute commands</li>
                    <li>• Environment vars</li>
                </ul>
            </div>
            <div class="space-y-1">
                <h4 class="font-medium text-indigo-200">Pipeline</h4>
                <ul class="text-indigo-100 space-y-0.5">
                    <li>• Deploy profiles</li>
                    <li>• Start stages</li>
                    <li>• Monitor status</li>
                    <li>• Stream logs</li>
                </ul>
            </div>
            <div class="space-y-1">
                <h4 class="font-medium text-indigo-200">Git</h4>
                <ul class="text-indigo-100 space-y-0.5">
                    <li>• View HEAD</li>
                    <li>• Pull changes</li>
                    <li>• Branch info</li>
                </ul>
            </div>
        </div>
    </section>
</div>
{% endblock %}