{% load i18n %}

{% if pipeline_items %}
<div id="aa-dashboard-panel-pipeline" class="col-12 mb-3">
    <div class="card h-100">
        <div class="card-body">
            {% translate "Pipeline Flows" as widget_title %}
            {% include "framework/dashboard/widget-title.html" with title=widget_title %}

            <ul class="list-group list-group-flush overflow-auto" style="max-height: 22rem;">
                {% for item in pipeline_items %}
                    <li class="list-group-item px-0 d-flex flex-column flex-sm-row align-items-sm-center gap-2 gap-sm-3">
                        <div class="flex-grow-1" style="min-width: 0;">
                            <a href="{% url 'pipeline:flow_detail' item.flow.slug %}" class="fw-semibold text-decoration-none">{{ item.flow.name }}</a>
                            {% if item.flow.description %}
                                <div class="small text-body-secondary text-truncate d-none d-sm-block">{{ item.flow.description }}</div>
                            {% endif %}
                        </div>
                        <div class="flex-shrink-0" style="width: 11rem; max-width: 100%;">
                            <div class="d-flex justify-content-between small text-body-secondary mb-1">
                                <span>{% blocktrans with done=item.completed count total=item.total %}{{ done }}/{{ total }} step{% plural %}{{ done }}/{{ total }} steps{% endblocktrans %}</span>
                                <span>{{ item.pct }}%</span>
                            </div>
                            <div class="progress" style="height: 0.375rem;" role="progressbar" aria-label="{% trans 'Progress' %}"
                                 aria-valuenow="{{ item.pct }}" aria-valuemin="0" aria-valuemax="100">
                                <div class="progress-bar {% if item.pct == 100 %}bg-success{% endif %}" style="width: {{ item.pct }}%"></div>
                            </div>
                        </div>
                        <a href="{% url 'pipeline:flow_detail' item.flow.slug %}" class="btn btn-sm btn-primary text-nowrap flex-shrink-0">
                            {% if item.assignment.status == 'in_progress' %}{% trans "Continue" %}{% else %}{% trans "Begin" %}{% endif %}
                        </a>
                    </li>
                {% endfor %}
            </ul>

            <div class="text-end mt-2">
                <a href="{% url 'pipeline:index' %}" class="small text-decoration-none">
                    {% trans "View all flows" %}<i class="fas fa-arrow-right fa-xs ms-1" aria-hidden="true"></i>
                </a>
            </div>
        </div>
    </div>
</div>
{% endif %}