<!-- xl_dashboard/templates/xl_dashboard/xl_dashboard.html -->

{% load static %}
<div class="xl-dashboard">
    <div class="fr flex-wrap" style="gap: .7rem">
        {% for section_name, items in sections %}
            <section class="xl-section p-2 maxw-250px"
                     style="background: #0003; border-radius: .3rem">
                <h5 class="mb-1 pb-1" style="opacity: 92%; white-space: break-spaces;">{{ section_name }}</h5>
                <ul class="fr flex-wrap" style="gap: .4rem">
                    {% for item_name, link in items %}
                        <li class="hover-scale-3">
                            <h5 class="mb-0 bg-white-10 py-1 px-2" style="width: fit-content; border-radius: .3rem;">
                                <a style="white-space: normal" href="{{ link }}">{{ item_name }}</a>
                            </h5>
                        </li>
                    {% endfor %}
                </ul>
            </section>
        {% endfor %}
    </div>

    <!-- Экшены (кнопки) -->
    {% if actions %}
        <section class="xl-actions mt-3">
            <h5>Actions</h5>
            <ul>
                {% for action_name, func in actions.items %}
                    <li>
                        <form method="POST"
                              action="{% url 'xl_dashboard:dashboard_action' action_name=action_name %}"
                              style="display:inline;">
                            {% csrf_token %}
                            <button type="submit" class="border-0 rounded-3"
                                    style="background: #0003; border-radius: .3rem; ">{{ action_name }}</button>
                        </form>
                    </li>
                {% endfor %}
            </ul>
        </section>
    {% endif %}
</div>
