{% extends "base.html" %}

{% block title %}Snapshots - AWS Inventory Browser{% endblock %}

{% block content %}
<div class="space-y-6">
    <div class="md:flex md:items-center md:justify-between">
        <div class="min-w-0 flex-1">
            <h1 class="text-2xl font-bold leading-7 text-gray-900 sm:truncate sm:text-3xl">Snapshots</h1>
        </div>
    </div>

    <!-- Snapshots Grid -->
    <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
        {% for snapshot in snapshots %}
        <div class="relative bg-white rounded-lg shadow hover:shadow-md transition-shadow">
            <div class="p-5">
                <div class="flex items-center justify-between">
                    <h3 class="text-lg font-medium text-gray-900 truncate">
                        <a href="/snapshots/{{ snapshot.name }}" class="hover:text-blue-600">
                            {{ snapshot.name }}
                        </a>
                    </h3>
                    {% if snapshot.name == active_snapshot %}
                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
                        Active
                    </span>
                    {% endif %}
                </div>

                <div class="mt-4 space-y-2">
                    <div class="flex items-center text-sm text-gray-500">
                        <svg class="flex-shrink-0 mr-2 h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/>
                        </svg>
                        {{ snapshot.resource_count | format_number }} resources
                    </div>
                    <div class="flex items-center text-sm text-gray-500">
                        <svg class="flex-shrink-0 mr-2 h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
                        </svg>
                        {{ snapshot.created_at }}
                    </div>
                    <div class="flex items-center text-sm text-gray-500">
                        <svg class="flex-shrink-0 mr-2 h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/>
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
                        </svg>
                        {{ snapshot.regions | join(', ') if snapshot.regions else 'N/A' }}
                    </div>
                </div>

                <div class="mt-4 flex space-x-2">
                    <a href="/snapshots/{{ snapshot.name }}"
                       class="flex-1 text-center px-3 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50">
                        View
                    </a>
                    {% if snapshot.name != active_snapshot %}
                    <button hx-post="/api/snapshots/{{ snapshot.name }}/activate"
                            hx-swap="none"
                            hx-on::after-request="window.location.reload()"
                            class="flex-1 text-center px-3 py-2 border border-transparent rounded-md text-sm font-medium text-white bg-blue-600 hover:bg-blue-700">
                        Set Active
                    </button>
                    {% endif %}
                </div>
            </div>
        </div>
        {% else %}
        <div class="col-span-full text-center py-12">
            <svg class="mx-auto h-12 w-12 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z"/>
            </svg>
            <h3 class="mt-2 text-sm font-medium text-gray-900">No snapshots</h3>
            <p class="mt-1 text-sm text-gray-500">Create your first snapshot with the CLI:</p>
            <code class="mt-2 inline-block bg-gray-100 px-4 py-2 rounded text-sm">
                awsinv snapshot create my-baseline --regions us-east-1
            </code>
        </div>
        {% endfor %}
    </div>
</div>
{% endblock %}