{% from "partials/components.html" import collapse %}
{% from "partials/icons.html" import circle_check %}
{% if orphaned or migrations or not_started %}
{% call collapse("Pending Operations", id="pending-collapse", checked=expanded|default(true)) %}
    {% if orphaned %}
    <h4 class="font-semibold mt-2 mb-1">Orphaned Stacks (will be stopped)</h4>
    <ul class="list-disc list-inside mb-4">
        {% for svc, host in orphaned.items() %}
        <li><a href="/stack/{{ svc }}" class="badge badge-warning hover:badge-primary">{{ svc }}</a> on {{ host }}</li>
        {% endfor %}
    </ul>
    {% endif %}

    {% if migrations %}
    <h4 class="font-semibold mt-2 mb-1">Stacks Needing Migration</h4>
    <ul class="list-disc list-inside mb-4">
        {% for svc in migrations %}
        <li><a href="/stack/{{ svc }}" class="badge badge-info hover:badge-primary">{{ svc }}</a></li>
        {% endfor %}
    </ul>
    {% endif %}

    {% if not_started %}
    <h4 class="font-semibold mt-2 mb-1">Stacks Not Started</h4>
    <ul class="menu menu-horizontal bg-base-200 rounded-box mb-2">
        {% for svc in not_started | sort %}
        <li><a href="/stack/{{ svc }}">{{ svc }}</a></li>
        {% endfor %}
    </ul>
    {% endif %}
{% endcall %}
{% else %}
<div role="alert" class="alert alert-success mb-4">
    <span class="shrink-0">{{ circle_check(24) }}</span>
    <span>All stacks are in sync with configuration.</span>
</div>
{% endif %}