{% extends "phoxtail_dashboard/base.html" %}
{% load i18n static %}
{% block extra_css %}
    {% for css_file in widget_css_files %}
        <link rel="stylesheet" href="{% static css_file %}">
    {% endfor %}
{% endblock extra_css %}
{% block head_title %}
    {% translate "Dashboard" %}
{% endblock head_title %}
{% block body %}
    <div class="dash-layout">
        {% include 'phoxtail_dashboard/navigation/sidebar.html' %}
        <div class="dash-main" data-phoxtail-bar-lane>
            {% include 'phoxtail_dashboard/navigation/drawer.html' %}
            <div class="dash-content phx-ground">
                {% block content %}
                    <div class="dash-page">
                        <div class="dash-page-inner">
                            {% include "phoxtail_dashboard/page_header.html" %}
                            {% if dashboard_widget_groups %}
                                <div class="dash-widget-groups">
                                    {% for group in dashboard_widget_groups %}
                                        <section class="dash-widget-group">
                                            <h2 class="dash-widget-group__title">{{ group.title }}</h2>
                                            <div class="dash-widgets">
                                                {% for widget in group.widgets %}
                                                    {% include widget.template_name with data=widget %}
                                                {% endfor %}
                                            </div>
                                        </section>
                                    {% endfor %}
                                </div>
                            {% else %}
                                <div class="phx-card">
                                    <div class="dash-empty-state">
                                        <h2 class="dash-empty-heading">{% translate "No widgets available yet" %}</h2>
                                        <p class="dash-empty-text">{% translate "Register widgets from your apps to bring this page to life." %}</p>
                                    </div>
                                </div>
                            {% endif %}
                        </div>
                    </div>
                {% endblock content %}
            </div>
            {% include 'phoxtail_dashboard/navigation/dock.html' %}
        </div>
    </div>
{% endblock body %}