{% extends "base.html" %}
{% load i18n %}
{% block title %}{% trans "Companies" %}{% endblock %}

{% block content %}
<div class="min-h-screen bg-gradient-to-br from-teal-50 via-cyan-50 to-amber-50">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
        
        <!-- Header Section -->
        <div class="flex justify-between items-center mb-12">
            <div>
                <h1 class="text-4xl font-bold bg-gradient-to-r from-teal-600 via-cyan-600 to-amber-600 bg-clip-text text-transparent mb-2">
                    {% trans "Your Companies" %}
                </h1>
                <p class="text-gray-600">{% blocktrans count counter=companies.count %}{{ counter }} company registered{% plural %}{{ counter }} companies registered{% endblocktrans %}</p>
            </div>
            <a href="{% url 'companies:create_company_wizard' %}" 
               class="inline-flex items-center px-6 py-3 bg-gradient-to-r from-teal-500 to-cyan-500 text-white font-semibold rounded-xl shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-300">
                <i class="fas fa-plus mr-2"></i>
                {% trans "New Company" %}
            </a>
        </div>

        <!-- Companies Grid -->
        {% if companies %}
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {% for company in companies %}
            <div class="group relative bg-white rounded-2xl shadow-lg hover:shadow-2xl transform hover:-translate-y-2 transition-all duration-300 overflow-hidden border border-teal-100/50">
                
                <!-- Logo Section -->
                <div class="h-40 bg-gradient-to-br from-teal-400/20 via-cyan-400/20 to-amber-400/20 overflow-hidden relative">
                    {% if company.logo %}
                        <img src="{{ company.logo.url }}" alt="{{ company.name }}" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-300">
                    {% else %}
                        <div class="w-full h-full flex items-center justify-center">
                            <div class="text-6xl text-teal-200">
                                <i class="fas fa-building"></i>
                            </div>
                        </div>
                    {% endif %}
                    
                    <!-- Status Badge -->
                    <div class="absolute top-3 right-3">
                        {% if company.status == 'active' %}
                            <span class="px-3 py-1 bg-green-500/90 text-white text-xs font-semibold rounded-full">{% trans "Active" %}</span>
                        {% elif company.status == 'pending' %}
                            <span class="px-3 py-1 bg-amber-500/90 text-white text-xs font-semibold rounded-full">{% trans "Pending" %}</span>
                        {% else %}
                            <span class="px-3 py-1 bg-gray-500/90 text-white text-xs font-semibold rounded-full">{{ company.get_status_display }}</span>
                        {% endif %}
                    </div>
                </div>
                
                <!-- Content Section -->
                <div class="p-6">
                    <h3 class="text-xl font-bold text-gray-900 mb-1 line-clamp-1">{{ company.name }}</h3>
                    <p class="text-sm text-teal-600 font-medium mb-3">{{ company.legal_name }}</p>
                    
                    {% if company.description %}
                    <p class="text-gray-600 text-sm mb-4 line-clamp-2 min-h-10">{{ company.description }}</p>
                    {% endif %}
                    
                    <!-- Contact Info -->
                    <div class="space-y-2 mb-4 text-sm text-gray-600">
                        {% if company.email %}
                        <div class="flex items-center">
                            <i class="fas fa-envelope text-cyan-500 w-4 mr-2"></i>
                            <span class="truncate">{{ company.email }}</span>
                        </div>
                        {% endif %}
                        {% if company.phone %}
                        <div class="flex items-center">
                            <i class="fas fa-phone text-teal-500 w-4 mr-2"></i>
                            <span>{{ company.phone }}</span>
                        </div>
                        {% endif %}
                    </div>
                    
                    <!-- Team Members Count -->
                    <div class="mb-4 flex items-center text-sm text-gray-600">
                        <i class="fas fa-users text-amber-500 mr-2"></i>
                        <span>{% blocktrans count counter=company.team_members.count %}{{ counter }} team member{% plural %}{{ counter }} team members{% endblocktrans %}</span>
                    </div>
                    
                    <!-- Actions -->
                    <div class="flex gap-2 pt-4 border-t border-gray-200">
                        <a href="{% url 'companies:detail' company.pk %}" 
                           class="flex-1 px-4 py-2 bg-gradient-to-r from-teal-50 to-cyan-50 text-teal-700 font-semibold rounded-lg hover:from-teal-100 hover:to-cyan-100 transition-all duration-300 text-center text-sm">
                            <i class="fas fa-eye mr-1"></i>{% trans "View" %}
                        </a>
                        <a href="{% url 'companies:edit' company.pk %}" 
                           class="flex-1 px-4 py-2 bg-gradient-to-r from-amber-50 to-orange-50 text-amber-700 font-semibold rounded-lg hover:from-amber-100 hover:to-orange-100 transition-all duration-300 text-center text-sm">
                            <i class="fas fa-edit mr-1"></i>{% trans "Edit" %}
                        </a>
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>
        {% else %}
        <!-- Empty State -->
        <div class="bg-white rounded-2xl border-2 border-dashed border-teal-200 py-16 px-6 text-center">
            <div class="text-6xl text-teal-200 mb-4">
                <i class="fas fa-briefcase"></i>
            </div>
            <h3 class="text-2xl font-bold text-gray-900 mb-2">{% trans "No companies yet" %}</h3>
            <p class="text-gray-600 mb-6">{% trans "Create your first company to get started with ERICA" %}</p>
            <a href="{% url 'companies:create_company_wizard' %}" 
               class="inline-flex items-center px-6 py-3 bg-gradient-to-r from-teal-500 to-cyan-500 text-white font-semibold rounded-xl shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-300">
                <i class="fas fa-plus mr-2"></i>
                {% trans "Create Your First Company" %}
            </a>
        </div>
        {% endif %}
    </div>
</div>

{% endblock %}

{% block extra_js %}
<script>
    // Animation au chargement
    document.addEventListener('DOMContentLoaded', function() {
        const cards = document.querySelectorAll('[class*="bg-white"][class*="rounded-2xl"]');
        cards.forEach((card, index) => {
            card.style.opacity = '0';
            card.style.transform = 'translateY(20px)';
            setTimeout(() => {
                card.style.transition = 'all 0.6s ease-out';
                card.style.opacity = '1';
                card.style.transform = 'translateY(0)';
            }, index * 100);
        });
    });
</script>
{% endblock %}