{% extends "phoxtail_dashboard/base.html" %}
{% load 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 %}
    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">
                {% block content %}
                    {% if dashboard_widget_groups %}
                        <div class="dash-page">
                            <div class="dash-page-inner">
                                <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>
                            </div>
                        </div>
                    {% else %}
                        <div class="dash-empty-state dash-empty-state--centered">
                            <div class="dash-empty-icon">{% include 'phoxtail_core/svgs/dashboard.html' %}</div>
                            <h2 class="dash-empty-heading">No widgets available yet</h2>
                            <p class="dash-empty-text">Register widgets from your apps to bring this page to life.</p>
                        </div>
                    {% endif %}
                {% endblock content %}
            </div>
            {% include 'phoxtail_dashboard/navigation/dock.html' %}
        </div>
    </div>
{% endblock body %}