{% for category, workflows in workflows_by_category.items %}
    <div class="card mb-3">
        <div class="card-header d-flex justify-content-between align-items-center">
            <button class="btn btn-link workflow-group-toggle p-0 text-start" type="button" aria-expanded="true" aria-controls="workflow-category-{{ forloop.counter }}">
                <i class="mdi mdi-chevron-down" data-workflow-collapse-icon="true"></i>
                <span class="ms-1"><strong>{{ category }}</strong></span>
                <span class="badge bg-secondary ms-1">{{ workflows|length }}</span>
            </button>
            {% if category != "Uncategorized" and not selected_category %}
                <a href="?category={{ category|urlencode }}" class="btn btn-sm btn-secondary">
                    <i class="mdi mdi-filter"></i> Show {{ category }} only
                </a>
            {% endif %}
        </div>
        <div id="workflow-category-{{ forloop.counter }}" class="collapse show workflow-category-collapse">
            <div class="table-responsive">
                <table class="table table-hover mb-0">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Description</th>
                            <th>Last Run</th>
                            <th>Last Run By</th>
                            <th>Last Status</th>
                            <th class="text-end">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for wf in workflows %}
                            <tr>
                                <td>
                                    <strong>{{ wf.name }}</strong>
                                </td>
                                <td>
                                    {% if wf.description %}
                                        {{ wf.description|truncatechars:180 }}
                                    {% else %}
                                        <span class="text-muted">No description</span>
                                    {% endif %}
                                </td>
                                <td>
                                    {% if wf.last_run_started %}
                                        <small>{{ wf.last_run_started|date:"M d, Y H:i" }}</small>
                                    {% else %}
                                        <small class="text-muted">Never</small>
                                    {% endif %}
                                </td>
                                <td>
                                    {% if wf.last_run_requested_by %}
                                        <small>{{ wf.last_run_requested_by }}</small>
                                    {% else %}
                                        <small class="text-muted">-</small>
                                    {% endif %}
                                </td>
                                <td>
                                    {% if wf.last_run_status == "success" %}
                                        <span class="badge bg-success"><i class="mdi mdi-check"></i> Success</span>
                                    {% elif wf.last_run_status == "failed" %}
                                        <span class="badge bg-danger"><i class="mdi mdi-close"></i> Failed</span>
                                    {% elif wf.last_run_status == "running" %}
                                        <span class="badge bg-primary"><i class="mdi mdi-play"></i> Running</span>
                                    {% elif wf.last_run_status == "pending" %}
                                        <span class="badge bg-warning text-dark"><i class="mdi mdi-clock"></i> Pending</span>
                                    {% elif wf.last_run_status == "pending_approval" %}
                                        <span class="badge nwe-status-pending-approval"><i class="mdi mdi-account-check"></i> Pending Approval</span>
                                    {% elif wf.last_run_status == "scheduled" %}
                                        <span class="badge bg-info text-dark"><i class="mdi mdi-calendar-clock"></i> Scheduled</span>
                                    {% elif wf.last_run_status == "canceled" %}
                                        <span class="badge bg-secondary"><i class="mdi mdi-cancel"></i> Canceled</span>
                                    {% elif wf.last_run_status == "partial" %}
                                        <span class="badge bg-warning text-dark"><i class="mdi mdi-alert"></i> Partial</span>
                                    {% else %}
                                        <span class="text-muted">-</span>
                                    {% endif %}
                                </td>
                                <td class="text-end">
                                    {% if can_execute_workflows %}
                                        <a href="{% url 'plugins:nautobot_workflow_engine:workflow_launch' key=wf.key %}" class="btn btn-sm btn-primary">
                                            <i class="mdi mdi-play"></i> Launch Workflow
                                        </a>
                                    {% else %}
                                        <button class="btn btn-sm btn-secondary" disabled>
                                            <i class="mdi mdi-lock"></i> Workflow Launch Disabled
                                        </button>
                                    {% endif %}
                                </td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
{% endfor %}