{% load i18n %}

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
    {% for index in indices %}
    <div class="bg-gray-50 rounded-lg p-4 border border-gray-200 hover:shadow-md transition-shadow duration-200">
        <div class="flex items-center justify-between mb-2">
            <div>
                <h4 class="font-semibold text-gray-900">{{ index.name }}</h4>
                <p class="text-sm text-gray-500">{{ index.symbol }}</p>
            </div>
            <div class="text-right">
                <div class="text-lg font-bold text-gray-900">{{ index.value|floatformat:2 }}</div>
                <div class="flex items-center {% if index.status == 'positive' %}text-green-600{% else %}text-red-600{% endif %}">
                    <i class="fas {% if index.status == 'positive' %}fa-arrow-up{% else %}fa-arrow-down{% endif %} text-xs mr-1"></i>
                    <span class="text-sm font-medium">{{ index.change|floatformat:2 }} ({{ index.change_percent|floatformat:2 }}%)</span>
                </div>
            </div>
        </div>
        <div class="w-full bg-gray-200 rounded-full h-2">
            <div class="bg-gradient-to-r {% if index.status == 'positive' %}from-green-400 to-green-600{% else %}from-red-400 to-red-600{% endif %} h-2 rounded-full transition-all duration-500"
                 style="width: {% if index.change_percent > 0 %}{{ index.change_percent|add:50 }}{% else %}{{ 50|add:index.change_percent }}{% endif %}%"></div>
        </div>
    </div>
    {% endfor %}
</div>

<div class="mt-4 text-center text-sm text-gray-500">
    {% translate "Last updated" %}: {{ last_updated }}
</div>