{% extends "_layouts/cp" %}
{% set title = "Dashboard"|t('app') %}

{% block actionButton %}
    <div class="buttons">
        <div class="newwidget btngroup">
            <button type="button" id="newwidgetmenubtn" class="btn menubtn add icon">{{ 'New widget'|t('app') }}</button>
            <div class="menu newwidgetmenu">
                <ul>
                    {% for type, info in widgetTypes if info.selectable %}
                        <li>
                            <a data-type="{{ type }}" data-name="{{ info.name }}">
                                <span class="icon" aria-hidden="true">{{ svg(info.iconSvg, sanitize=false) }}</span>
                                {{ info.name }}
                            </a>
                        </li>
                    {% endfor %}
                </ul>
            </div>
        </div>

        <button type="button" id="widgetManagerBtn" class="btn settings icon" title="{{ 'Settings'|t('app') }}" aria-label="{{ 'Settings'|t('app') }}"></button>
    </div>
{% endblock %}


{% block main %}
    <div id="dashboard-grid" class="grid">
        {% for widget in widgets %}
            <div class="item" data-colspan="{{ widget.colspan }}">
                <div id="widget{{ widget.id }}" class="widget {{ widget.type|lower }}" data-id="{{ widget.id }}" data-type="{{ widget.type }}" data-title="{{ widget.title }}">
                    <div class="front">
                        <div class="pane">
                            <div class="spinner body-loading"></div>
                            {% if widget.title or widget.subtitle %}
                                <div class="widget-heading">
                                    {% if widget.title %}
                                        <h2>{{ widget.title }}</h2>
                                    {% endif %}
                                    {% if widget.subtitle %}
                                        <h5>{{ widget.subtitle }}</h5>
                                    {% endif %}
                                </div>
                            {% endif %}
                            <div class="body">
                                {{ widget.bodyHtml|raw }}
                            </div>
                            <div class="settings icon hidden"></div>
                        </div>
                    </div>
                    <div class="back hidden">
                        <form class="pane">
                            {{ hiddenInput('widgetId', widget.id) }}
                            <h2 class="first">{{ "{type} Settings"|t('app', { type: widget.name }) }}</h2>
                            <div class="settings"></div>
                            <hr>
                            <div class="buttons clearafter">
                                <button type="submit" class="btn submit">{{ 'Save'|t('app') }}</button>
                                <button type="button" class="btn">{{ 'Cancel'|t('app') }}</button>
                                <div class="spinner hidden"></div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        {% endfor %}
    </div>
{% endblock %}
