{% load i18n %}

{% if pipeline_items %}
<div id="aa-dashboard-panel-pipeline" class="col-12 col-xl-8 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 %}

            <div>
                <div style="height: 300px; overflow-y:auto;">
                    <table class="table">
                        <thead>
                            <tr>
                                <th class="text-start">{% trans "Activity" %}</th>
                                <th class="text-center">{% trans "Progress" %}</th>
                                <th class="text-end">{% trans "Action" %}</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for item in pipeline_items %}
                            <tr>
                                <td class="align-middle text-start">
                                    <strong>
                                        <a href="{% url 'pipeline:flow_detail' item.flow.slug %}" class="text-decoration-none">
                                            {{ item.flow.name }}
                                        </a>
                                    </strong>
                                    {% if item.flow.description %}
                                    <div class="small text-body-secondary mt-1 d-none d-sm-block">{{ item.flow.description|truncatewords:20 }}</div>
                                    {% endif %}
                                </td>
                                <td class="align-middle text-center" style="width: 25%;">
                                    <div class="d-flex justify-content-between align-items-center small text-body-secondary mb-1">
                                        <span>{{ item.completed }} / {{ item.total }} {% trans "steps" %}</span>
                                        <span>{{ item.pct }}%</span>
                                    </div>
                                    <div class="progress" style="height: 4px;">
                                        <div class="progress-bar {% if item.pct == 100 %}bg-success{% else %}bg-primary{% endif %}"
                                             style="width: {{ item.pct }}%"
                                             role="progressbar" aria-valuenow="{{ item.pct }}" aria-valuemin="0" aria-valuemax="100">
                                        </div>
                                    </div>
                                </td>
                                <td class="align-middle text-end" style="width: 15%;">
                                    <a href="{% url 'pipeline:flow_detail' item.flow.slug %}" class="btn btn-sm {% if item.assignment.status == 'completed' %}btn-success{% elif item.assignment.status == 'in_progress' %}btn-info{% else %}btn-primary{% endif %} text-nowrap">
                                        {% if item.assignment.status == 'completed' %}
                                        {% trans "Review" %}
                                        {% elif item.assignment.status == 'in_progress' %}
                                        {% trans "Continue" %}
                                        {% else %}
                                        {% trans "Begin" %}
                                        {% endif %}
                                    </a>
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
            
            <div class="text-end mt-3">
                <a href="{% url 'pipeline:index' %}" class="small text-body-secondary text-decoration-none">
                    {% trans "View all flows" %} <i class="fas fa-arrow-right fa-xs"></i>
                </a>
            </div>
        </div>
    </div>
</div>
{% endif %}