{% 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>

            <!-- Gradient: dark at top AND bottom, transparent in middle -->
            <div class="absolute inset-0 bg-gradient-to-b from-black/70 via-black/10 to-black/80"></div>

            <!-- Icon + Title pinned to top -->
            <div class="absolute top-0 left-0 right-0 flex items-center p-5">
                <div class="w-12 h-12 rounded-full flex items-center justify-center mr-3 flex-shrink-0"
                     style="background-color: {{ app.color }};">
                    <i class="{{ app.icon }} text-white text-xl"></i>
                </div>
                <h3 class="text-2xl font-bold text-white leading-tight">{{ app.name }}</h3>
            </div>

            <!-- Description + Button pinned to bottom -->
            <div class="absolute bottom-0 left-0 right-0 p-6 text-white">
                <p class="text-gray-200 text-sm mb-4 leading-relaxed">{{ app.description }}</p>
                {% if app.url != "#" %}
                <a href="{% url app.url %}"
                   class="inline-flex items-center justify-center w-full 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 w-full 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>
        </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 %}