{% extends "admin/base.html" %}
{% from "admin/components/icons.html" import icon %}
{% block title %}{{ _(dashboard.title) }}{% endblock %}
{% block content %}
{% set widget_icons = {
  "admin/widgets/metric.html": "metric",
  "admin/widgets/progress.html": "progress",
  "admin/widgets/table.html": "table",
  "admin/widgets/chart.html": "chart",
  "admin/widgets/activity.html": "activity",
  "admin/widgets/donut.html": "donut",
  "admin/widgets/stat.html": "stat",
  "admin/widgets/timeline.html": "timeline",
  "admin/widgets/tabs.html": "tabs",
} %}
<div class="grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-3">
  {% for widget in widgets %}
  {% set widget_data = widget.get_data() %}
  <div class="{{ ui('widget') }} {% if widget.size == 'lg' %}{{ ui('widget', 'span-lg') }}{% endif %}">
    <div class="{{ ui('widget', 'header') }}">
      <span class="{{ ui('widget', 'icon') }}">
        {{ icon(widget_icons.get(widget.template, "metric"), "w-5 h-5") }}
      </span>
      <h2 class="{{ ui('widget', 'title') }}">{{ _(widget.title) }}</h2>
    </div>
    {# Bounded, so a widget with hundreds of rows scrolls inside its own
       card instead of stretching every card beside it. #}
    <div class="{{ ui('widget', 'body') }}">{% include widget.template %}</div>
  </div>
  {% endfor %}
  {% if not widgets %}
  <p class="{{ ui('text', 'muted') }}">{{ _("No widgets configured.") }}</p>
  {% endif %}
</div>
{% endblock %}