{% load i18n %}
{% load static %}

{% if dash_widgets %}
    <section class="grid gap-4" id="dash-widgets-section">
        <div class="flex items-center gap-3">
            <div class="flex h-8 w-8 items-center justify-center rounded-xl bg-primary/10 text-primary">
                <i class="fa-solid fa-chart-pie"></i>
            </div>
            <div>
                <h2 class="text-base font-bold tracking-tight">{% trans "Widgets" %}</h2>
                <p class="text-xs text-base-content/40">{% trans "Live charts built from your models." %}</p>
            </div>
        </div>

        <div class="grid grid-cols-12 gap-4">
            {% for item in dash_widgets %}
                {% with widget=item.widget payload=item.payload %}
                    <div class="{{ widget.column_width|default:'col-span-full md:col-span-6 lg:col-span-4' }}">
                        <div class="stat-card h-full flex flex-col p-5">

                            <div class="flex items-center justify-between mb-3">
                                <h3 class="text-sm font-semibold truncate">{{ widget.title }}</h3>
                                <div class="flex h-8 w-8 items-center justify-center rounded-lg bg-primary/10 text-primary shrink-0">
                                    {% if widget.chart_type == "number" %}
                                        <i class="fa-solid fa-hashtag"></i>
                                    {% elif widget.chart_type == "recent" %}
                                        <i class="fa-solid fa-list-ul"></i>
                                    {% elif widget.chart_type == "line" %}
                                        <i class="fa-solid fa-chart-line"></i>
                                    {% elif widget.chart_type == "pie" or widget.chart_type == "doughnut" or widget.chart_type == "polar" %}
                                        <i class="fa-solid fa-chart-pie"></i>
                                    {% else %}
                                        <i class="fa-solid fa-chart-column"></i>
                                    {% endif %}
                                </div>
                            </div>

                            {% if payload.kind == "chart" %}
                                <div class="relative flex-1 min-h-[220px]">
                                    <canvas data-dash-chart
                                            data-config-id="{{ item.config_id }}"
                                            aria-label="{{ widget.title }}"></canvas>
                                    {{ payload|json_script:item.config_id }}
                                </div>
                            {% elif payload.kind == "number" %}
                                <p class="dash-stat-value text-2xl mt-2">{{ payload.value|floatformat:"-2" }}</p>
                                {% if payload.url %}
                                    <a class="btn btn-ghost btn-xs mt-3 w-fit normal-case" href="{{ payload.url }}">
                                        {% trans "Manage" %} <i class="fa-solid fa-arrow-right ml-1 text-[10px]"></i>
                                    </a>
                                {% endif %}
                            {% elif payload.kind == "recent" %}
                                {% if payload.items %}
                                    <ul class="flex-1 space-y-1.5 overflow-y-auto max-h-[260px]">
                                        {% for entry in payload.items %}
                                            <li>
                                                {% if entry.url %}
                                                    <a href="{{ entry.url }}"
                                                       class="flex items-center gap-2 rounded-lg px-2 py-1.5 text-sm hover:bg-base-content/5 transition-colors">
                                                        <span class="truncate">{{ entry.label }}</span>
                                                    </a>
                                                {% else %}
                                                    <span class="block px-2 py-1.5 text-sm">{{ entry.label }}</span>
                                                {% endif %}
                                            </li>
                                        {% endfor %}
                                    </ul>
                                {% else %}
                                    <p class="text-sm text-base-content/40 flex-1">{% trans "No items yet." %}</p>
                                {% endif %}
                            {% elif payload.kind == "error" %}
                                <div role="alert" class="alert alert-error text-xs py-2">
                                    <i class="fa-solid fa-triangle-exclamation"></i>
                                    <span class="truncate" title="{{ payload.message }}">{{ payload.message }}</span>
                                </div>
                            {% else %}
                                <p class="text-sm text-base-content/40 flex-1">
                                    {% trans "No data source configured yet — edit this widget to add one." %}
                                </p>
                            {% endif %}

                        </div>
                    </div>
                {% endwith %}
            {% endfor %}
        </div>

        <script src="{% static 'admin/js/vendor/chartjs/chart.umd.min.js' %}"></script>
        <script src="{% static 'admin/js/dash_widgets.js' %}?v=3"></script>
    </section>
{% endif %}