{% load i18n %}
{% comment %}
One flow on the Pipeline index. Takes `item` ({flow, assignment, total, completed, pct}).
{% endcomment %}
{% with status=item.assignment.status %}
<div class="col-12 col-md-6 col-xxl-4">
    <div class="card h-100 pipeline-flow-card{% if not item.assignment %} border-dashed{% endif %}">
        <div class="card-body d-flex flex-column">
            <div class="d-flex align-items-center justify-content-between gap-2 mb-2">
                <span class="badge pipeline-badge-type pipeline-type-{{ item.flow.flow_type }}">{{ item.flow.get_flow_type_display }}</span>
                {% if status == "completed" %}
                    <span class="badge rounded-pill text-bg-success"><i class="fas fa-check me-1" aria-hidden="true"></i>{% trans "Complete" %}</span>
                {% elif status == "in_progress" %}
                    <span class="badge rounded-pill text-bg-primary">{% trans "In progress" %}</span>
                {% elif status == "assigned" %}
                    <span class="badge rounded-pill text-bg-secondary">{% trans "Not started" %}</span>
                {% endif %}
            </div>

            <h3 class="card-title h5 mb-1">
                <a href="{% url 'pipeline:flow_detail' item.flow.slug %}">{{ item.flow.name }}</a>
            </h3>
            {% if item.flow.description %}
                <p class="card-text text-body-secondary small pipeline-clamp-2 mb-3">{{ item.flow.description }}</p>
            {% endif %}

            <div class="mt-auto">
                {% if item.assignment %}
                    <div class="d-flex justify-content-between small text-body-secondary mb-1">
                        <span>{% blocktrans with done=item.completed count total=item.total %}{{ done }} of {{ total }} step{% plural %}{{ done }} of {{ total }} steps{% endblocktrans %}</span>
                        <span>{{ item.pct }}%</span>
                    </div>
                    <div class="progress pipeline-thin" 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>
                {% else %}
                    <div class="small text-body-secondary">
                        <i class="fas fa-list-ol fa-fw me-1" aria-hidden="true"></i>{% blocktrans count total=item.total %}{{ total }} step{% plural %}{{ total }} steps{% endblocktrans %}
                    </div>
                {% endif %}
            </div>
        </div>
        <div class="card-footer bg-transparent border-top-0 pt-0 pb-3">
            <a href="{% url 'pipeline:flow_detail' item.flow.slug %}"
               class="btn btn-sm w-100 {% if status == 'completed' %}btn-outline-success{% elif item.assignment %}btn-primary{% else %}btn-quiet{% endif %}">
                {% if status == "completed" %}
                    <i class="fas fa-eye fa-fw me-1" aria-hidden="true"></i>{% trans "Review" %}
                {% elif status == "in_progress" %}
                    <i class="fas fa-play fa-fw me-1" aria-hidden="true"></i>{% trans "Continue" %}
                {% elif status == "assigned" %}
                    <i class="fas fa-play fa-fw me-1" aria-hidden="true"></i>{% trans "Begin" %}
                {% else %}
                    <i class="fas fa-arrow-right fa-fw me-1" aria-hidden="true"></i>{% trans "View" %}
                {% endif %}
            </a>
        </div>
    </div>
</div>
{% endwith %}