{% load i18n %}
<div class="page-content">

    <div style="display: flex; justify-content: flex-end; margin-bottom: 0.75rem;">
        <button class="btn btn-secondary" style="border: 1px solid var(--color-border); font-size: 0.8125rem; display: inline-flex; align-items: center; gap: 0.4rem;"
                hx-get="/dashboard/customize/" hx-target="#main-content" hx-push-url="/dashboard/customize/" hx-indicator="#loader">
            <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/></svg>
            {% trans "Настроить дашборд" %}
        </button>
    </div>

    <div style="display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: flex-start;">
        {% for w in dashboard_widgets %}
            <div style="{% if w.width == 'half' %}flex: 1 1 calc(50% - 0.75rem); min-width: min(100%, 22rem);{% else %}flex: 1 1 100%; min-width: 0;{% endif %}">
                {% include w.template %}
            </div>
        {% empty %}
            <div style="flex: 1 1 100%; padding: 2rem; text-align: center; color: var(--color-muted-foreground); font-size: 0.875rem;">
                {% trans "Все виджеты скрыты." %}
                <a href="/dashboard/customize/" hx-get="/dashboard/customize/" hx-target="#main-content" hx-push-url="/dashboard/customize/" hx-indicator="#loader" style="color: var(--color-primary);">{% trans "Настроить дашборд" %}</a>
            </div>
        {% endfor %}
    </div>

</div>