{% load unfold %}

<!-- Widgets Section -->
<div class="space-y-8">
    <!-- Header -->
    <div class="flex items-center justify-between mb-6">
        <div>
            <h1 class="text-2xl font-bold theme-text flex items-center">
                <span class="material-icons mr-3 text-blue-500">widgets</span>
                {{ title|default:"Dashboard Widgets" }}
            </h1>
            <p class="text-gray-600 dark:text-gray-300 mt-2">
                {% if data.has_widgets %}
                    Showing {{ data.widgets_count }} widget{{ data.widgets_count|pluralize }}
                {% else %}
                    No widgets configured
                {% endif %}
            </p>
        </div>
    </div>

    {% if data.has_widgets %}
        <!-- Stats Widgets -->
        {% if stats_widgets %}
            {% for widget in stats_widgets %}
                <div class="theme-card rounded-lg shadow-sm border theme-border mb-6">
                    <!-- Widget Header -->
                    <div class="p-6 border-b theme-border">
                        <h2 class="text-lg font-semibold theme-text flex items-center">
                            <span class="material-icons text-blue-500 mr-2">dashboard</span>
                            {{ widget.title }}
                        </h2>
                    </div>

                        <!-- Widget Content: Stats Cards -->
                        <div class="p-6">
                            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
                                {% for card in widget.cards %}
                                    <div class="theme-card p-6 rounded-lg shadow-sm border theme-border">
                                        <div class="flex items-start justify-between mb-4">
                                            <div class="flex-1">
                                                <p class="text-sm text-gray-600 dark:text-gray-400 mb-2">
                                                    {{ card.title }}
                                                </p>
                                                <p class="text-2xl font-bold theme-text">
                                                    {{ card.value_template }}
                                                </p>
                                            </div>
                                            {% if card.icon %}
                                                <span class="material-icons text-{{ card.color }}-500 text-3xl">
                                                    {{ card.icon }}
                                                </span>
                                            {% endif %}
                                        </div>

                                        {% if card.description %}
                                            <p class="text-xs text-gray-500 dark:text-gray-400 mt-2">
                                                {{ card.description }}
                                            </p>
                                        {% endif %}

                                        {% if card.change %}
                                            <div class="mt-3 flex items-center">
                                                <span class="text-xs px-2 py-1 rounded
                                                    {% if card.change_type == 'positive' %}
                                                        bg-green-100 text-green-700 dark:bg-green-900/20 dark:text-green-400
                                                    {% elif card.change_type == 'negative' %}
                                                        bg-red-100 text-red-700 dark:bg-red-900/20 dark:text-red-400
                                                    {% else %}
                                                        bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-400
                                                    {% endif %}
                                                ">
                                                    {{ card.change }}
                                                </span>
                                            </div>
                                        {% endif %}
                                    </div>
                                {% endfor %}
                            </div>
                        </div>
                </div>
            {% endfor %}
        {% endif %}

        <!-- Chart Widgets (if any) -->
        {% if chart_widgets %}
            {% for widget in chart_widgets %}
                <div class="theme-card rounded-lg shadow-sm border theme-border p-6 mb-6">
                        <h2 class="text-lg font-semibold theme-text mb-4">
                            {{ widget.title }}
                        </h2>
                        <!-- Chart rendering would go here -->
                        <div class="h-64 flex items-center justify-center text-gray-400">
                            Chart widget rendering (TODO)
                    </div>
                </div>
            {% endfor %}
        {% endif %}

        <!-- Custom Widgets (if any) -->
        {% if custom_widgets %}
            {% for widget in custom_widgets %}
                <div class="theme-card rounded-lg shadow-sm border theme-border p-6 mb-6">
                        <h2 class="text-lg font-semibold theme-text mb-4">
                            {{ widget.title }}
                        </h2>
                        <!-- Custom widget rendering -->
                        <div class="text-gray-600 dark:text-gray-300">
                            Custom widget type: {{ widget.type }}
                    </div>
                </div>
            {% endfor %}
        {% endif %}

    {% else %}
        <!-- No Widgets State -->
        <div class="theme-card rounded-lg shadow-sm border theme-border p-12 text-center">
            <span class="material-icons text-gray-300 dark:text-gray-600 text-6xl mb-4">
                widgets
            </span>
            <h3 class="text-lg font-semibold text-gray-600 dark:text-gray-400 mb-2">
                No Widgets Configured
            </h3>
            <p class="text-sm text-gray-500 dark:text-gray-500">
                Widgets can be added in DashboardManager.get_widgets_config()
            </p>
        </div>
    {% endif %}
</div>