{% load dashboard_tags %}
<div class="card card-{{ component.color|default:'primary' }} {% if component.data_source_json %}card-async{% endif %}" 
     {% if component.data_source_json %}data-component-id="{{ component.component_id }}" data-data-source="{{ component.data_source_json }}"{% endif %}>
    <div class="card-icon">
        <i class="{{ component.icon_class|default:'ri-bar-chart-2-line' }}"></i>
    </div>
    <div class="card-content">
        <div class="card-title">{{ component.title }}</div>
        
        {% if component.data_source_json %}
            <div class="card-value-loading">
                <div class="card-value">加载中...</div>
            </div>
        {% else %}
            {% if component.values and component.values|length > 1 %}
                <div class="card-multi-value">
                    {% for value in component.values %}
                    <div class="card-value-item">
                        {% if component.links and forloop.counter0 < component.links|length and component.links|index:forloop.counter0 %}
                        <a href="{{ component.links|index:forloop.counter0 }}" class="card-value-link">
                            <span class="card-value">{{ value }}</span>
                        </a>
                        {% else %}
                        <span class="card-value">{{ value }}</span>
                        {% endif %}
                        {% if component.value_labels and forloop.counter0 < component.value_labels|length %}
                        <span class="card-value-label">{{ component.value_labels|index:forloop.counter0 }}</span>
                        {% endif %}
                    </div>
                    {% if not forloop.last %}<span class="card-value-separator">/</span>{% endif %}
                    {% endfor %}
                </div>
            {% else %}
                {% if component.link %}
                <a href="{{ component.link }}" class="card-value-link">
                    <div class="card-value">{{ component.value }}</div>
                </a>
                {% else %}
                <div class="card-value">{{ component.value }}</div>
                {% endif %}
            {% endif %}
        {% endif %}
        
        {% if component.change %}
        <div class="card-change card-change-{{ component.trend|default:'neutral' }}">
            {{ component.change }}
        </div>
        {% endif %}
    </div>
</div>