{% extends "dashboard/base.html" %}
{% set active_page = 'overview' %}

{% block title %}Dashboard - CmdForge{% endblock %}

{% block dashboard_content %}
<!-- Stats Cards -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
    <div class="bg-white rounded-lg border border-gray-200 p-6">
        <div class="flex items-center">
            <div class="p-3 bg-indigo-100 rounded-lg">
                <svg class="w-6 h-6 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"/>
                </svg>
            </div>
            <div class="ml-4">
                <p class="text-sm text-gray-500">Published Tools</p>
                <p class="text-2xl font-bold text-gray-900">{{ stats.tools_count }}</p>
            </div>
        </div>
    </div>

    <div class="bg-white rounded-lg border border-gray-200 p-6">
        <div class="flex items-center">
            <div class="p-3 bg-green-100 rounded-lg">
                <svg class="w-6 h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M9 19l3 3m0 0l3-3m-3 3V10"/>
                </svg>
            </div>
            <div class="ml-4">
                <p class="text-sm text-gray-500">Total Downloads</p>
                <p class="text-2xl font-bold text-gray-900">{{ stats.total_downloads|format_number }}</p>
            </div>
        </div>
    </div>

    <div class="bg-white rounded-lg border border-gray-200 p-6">
        <div class="flex items-center">
            <div class="p-3 bg-cyan-100 rounded-lg">
                <svg class="w-6 h-6 text-cyan-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z"/>
                </svg>
            </div>
            <div class="ml-4">
                <p class="text-sm text-gray-500">API Tokens</p>
                <p class="text-2xl font-bold text-gray-900">{{ stats.tokens_count }}</p>
            </div>
        </div>
    </div>
</div>

<!-- Recent Tools -->
<div class="bg-white rounded-lg border border-gray-200">
    <div class="px-6 py-4 border-b border-gray-200 flex items-center justify-between">
        <h2 class="text-lg font-semibold text-gray-900">Your Tools</h2>
        <a href="{{ url_for('web.docs', path='publishing') }}"
           class="text-sm text-indigo-600 hover:text-indigo-800">
            + Publish New Tool
        </a>
    </div>

    {% if tools %}
    <ul class="divide-y divide-gray-200">
        {% for tool in tools[:5] %}
        <li class="px-6 py-4 flex items-center justify-between">
            <div>
                <a href="{{ url_for('web.tool_detail', owner=tool.owner, name=tool.name) }}"
                   class="font-medium text-gray-900 hover:text-indigo-600">
                    {{ tool.name }}
                </a>
                <p class="text-sm text-gray-500">v{{ tool.version }}</p>
            </div>
            <div class="text-right">
                <p class="text-sm text-gray-900">{{ tool.downloads|format_number }} downloads</p>
                <p class="text-xs text-gray-500">{{ tool.published_at|timeago }}</p>
            </div>
        </li>
        {% endfor %}
    </ul>
    {% if tools|length > 5 %}
    <div class="px-6 py-4 border-t border-gray-200">
        <a href="{{ url_for('web.dashboard_tools') }}"
           class="text-sm text-indigo-600 hover:text-indigo-800">
            View all {{ tools|length }} tools
        </a>
    </div>
    {% endif %}
    {% else %}
    <div class="px-6 py-12 text-center">
        <svg class="mx-auto w-12 h-12 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"/>
        </svg>
        <p class="mt-4 text-gray-600">You haven't published any tools yet.</p>
        <a href="{{ url_for('web.docs', path='publishing') }}"
           class="mt-4 inline-flex items-center px-4 py-2 text-sm font-medium text-white bg-indigo-600 rounded-md hover:bg-indigo-700">
            Publish Your First Tool
        </a>
    </div>
    {% endif %}
</div>

<!-- Recent Activity -->
{% if recent_activity %}
<div class="mt-6 bg-white rounded-lg border border-gray-200">
    <div class="px-6 py-4 border-b border-gray-200">
        <h2 class="text-lg font-semibold text-gray-900">Recent Activity</h2>
    </div>
    <ul class="divide-y divide-gray-200">
        {% for activity in recent_activity[:5] %}
        <li class="px-6 py-4 flex items-start">
            <div class="flex-shrink-0">
                {% if activity.type == 'download' %}
                <div class="w-8 h-8 bg-green-100 rounded-full flex items-center justify-center">
                    <svg class="w-4 h-4 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M9 19l3 3m0 0l3-3m-3 3V10"/>
                    </svg>
                </div>
                {% elif activity.type == 'publish' %}
                <div class="w-8 h-8 bg-indigo-100 rounded-full flex items-center justify-center">
                    <svg class="w-4 h-4 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"/>
                    </svg>
                </div>
                {% endif %}
            </div>
            <div class="ml-4">
                <p class="text-sm text-gray-900">{{ activity.description }}</p>
                <p class="text-xs text-gray-500">{{ activity.timestamp|timeago }}</p>
            </div>
        </li>
        {% endfor %}
    </ul>
</div>
{% endif %}
{% endblock %}