{% extends 'base.html' %}
{% load i18n %}

{% block content %}
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
    <!-- Header Section -->
    <div class="text-center mb-12">
        <h1 class="text-4xl font-bold text-gray-900 mb-4">
            <i class="fas fa-rocket mr-3 text-blue-600"></i>
            {% trans "Mini Apps" %}
        </h1>
        <p class="text-xl text-gray-600 max-w-3xl mx-auto">
            {% trans "Discover a collection of powerful mini applications designed to enhance your productivity and creativity." %}
        </p>
    </div>

    <!-- Apps Grid -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-16">
        {% for app in mini_apps %}
        <div class="group relative overflow-hidden rounded-2xl shadow-lg hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-2 mb-8">
            <!-- Thumbnail -->
            <div class="aspect-video overflow-hidden">
                <img src="{{ app.thumbnail }}"
                     alt="{{ app.name }}"
                     class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-300">
            </div>

            <!-- Overlay Gradient -->
            <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-transparent to-transparent"></div>

            <!-- Content -->
            <div class="absolute inset-0 flex flex-col justify-end p-6 text-white">
                <!-- Icon and Title -->
                <div class="flex items-center mb-3">
                    <div class="w-12 h-12 rounded-full flex items-center justify-center mr-3"
                         style="background-color: {{ app.color }};">
                        <i class="{{ app.icon }} text-white text-xl"></i>
                    </div>
                    <h3 class="text-2xl font-bold">{{ app.name }}</h3>
                </div>

                <!-- Description -->
                <p class="text-gray-200 text-sm mb-4 leading-relaxed">
                    {{ app.description }}
                </p>

                <!-- Action Button -->
                {% if app.url != "#" %}
                <a href="{% url app.url %}"
                   class="inline-flex items-center justify-center px-6 py-3 rounded-lg font-medium transition-all duration-200 transform hover:scale-105"
                   style="background-color: {{ app.color }};">
                    <i class="fas fa-play mr-2"></i>
                    {% trans "Launch App" %}
                </a>
                {% else %}
                <div class="inline-flex items-center justify-center px-6 py-3 rounded-lg font-medium bg-gray-600 cursor-not-allowed">
                    <i class="fas fa-lock mr-2"></i>
                    {% trans "Coming Soon" %}
                </div>
                {% endif %}
            </div>

            <!-- Hover Effect -->
            <div class="absolute inset-0 bg-gradient-to-t from-transparent via-transparent to-white/10 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none"></div>
        </div>
        {% endfor %}
    </div>

</div>

<style>
@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
}

.group:hover .float {
    animation: float 2s ease-in-out infinite;
}
</style>
{% endblock %}