<!-- Modern Card Component -->
{% macro render_modern_card(title, icon, value, subtitle="", color="blue", trend=None) %}
<div class="bg-white rounded-2xl shadow-lg border border-gray-100 overflow-hidden hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1">
    <div class="p-6">
        <div class="flex items-center justify-between">
            <div class="flex items-center space-x-4">
                <div class="flex items-center justify-center w-14 h-14 bg-gradient-to-br from-{{ color }}-400 to-{{ color }}-600 rounded-2xl shadow-lg">
                    <i class="{{ icon }} text-white text-xl"></i>
                </div>
                <div>
                    <h3 class="text-sm font-semibold text-gray-600 uppercase tracking-wider">{{ title }}</h3>
                    <p class="text-3xl font-black text-gray-900 mt-1">{{ value }}</p>
                    {% if subtitle %}
                    <p class="text-sm text-gray-500 mt-1">{{ subtitle }}</p>
                    {% endif %}
                </div>
            </div>
            {% if trend %}
            <div class="flex items-center space-x-1">
                {% if trend > 0 %}
                <i class="fas fa-arrow-up text-green-500"></i>
                <span class="text-sm font-semibold text-green-600">+{{ trend }}%</span>
                {% elif trend < 0 %}
                <i class="fas fa-arrow-down text-red-500"></i>
                <span class="text-sm font-semibold text-red-600">{{ trend }}%</span>
                {% else %}
                <i class="fas fa-arrow-right text-gray-400"></i>
                <span class="text-sm font-semibold text-gray-500">0%</span>
                {% endif %}
            </div>
            {% endif %}
        </div>
    </div>
    <div class="bg-gradient-to-r from-{{ color }}-50 to-{{ color }}-100 px-6 py-3">
        <div class="flex items-center justify-between">
            <span class="text-xs font-medium text-{{ color }}-700">Last updated</span>
            <span class="text-xs text-{{ color }}-600">{{ moment().format('MMM DD, YYYY') if moment else 'Now' }}</span>
        </div>
    </div>
</div>
{% endmacro %}

<!-- Action Button Component -->
{% macro render_action_button(text, icon, url, color="blue", size="md") %}
{% set size_classes = {
    'sm': 'px-4 py-2 text-sm',
    'md': 'px-6 py-3 text-base',
    'lg': 'px-8 py-4 text-lg'
} %}
<a href="{{ url }}" class="inline-flex items-center {{ size_classes[size] }} bg-gradient-to-r from-{{ color }}-500 to-{{ color }}-600 hover:from-{{ color }}-600 hover:to-{{ color }}-700 text-white font-semibold rounded-2xl shadow-lg hover:shadow-xl transform hover:-translate-y-0.5 transition-all duration-300 group">
    <i class="{{ icon }} mr-3 group-hover:scale-110 transition-transform duration-300"></i>
    {{ text }}
</a>
{% endmacro %}

<!-- Status Badge Component -->
{% macro render_status_badge(status, text=None) %}
{% set status_colors = {
    'active': 'bg-green-100 text-green-800 border-green-200',
    'inactive': 'bg-red-100 text-red-800 border-red-200',
    'pending': 'bg-yellow-100 text-yellow-800 border-yellow-200',
    'approved': 'bg-blue-100 text-blue-800 border-blue-200',
    'admin': 'bg-purple-100 text-purple-800 border-purple-200'
} %}
<span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold border {{ status_colors.get(status, 'bg-gray-100 text-gray-800 border-gray-200') }}">
    {{ text or status.title() }}
</span>
{% endmacro %}

<!-- Modern Table Header -->
{% macro render_table_header(columns) %}
<thead class="bg-gradient-to-r from-gray-50 to-gray-100 border-b border-gray-200">
    <tr>
        {% for column in columns %}
        <th class="px-6 py-4 text-left text-xs font-bold text-gray-600 uppercase tracking-wider">{{ column }}</th>
        {% endfor %}
    </tr>
</thead>
{% endmacro %}