{% if searched_pipelines %}

    <table class="table table-dark table-bordered rounded">
        <thead>
            <tr>
                <th scope="col">Work Flow Name</th>
                <th scope="col">Start Time</th>
                <th class='text-center narrow-col' scope="col">Status</th>
                <th class='text-center narrow-col' scope="col">Metadata</th>
                <th scope="col"></th>
            </tr>
        </thead>
        <tbody>
            {% for pipeline in searched_pipelines %}
            <tr class='align-middle' style="font-size: 0.8rem;">
                <td >{{ pipeline.pipeline_name_snapshot }}</td>
                <td>{{ pipeline.start_time }}</td>
                <!-- <td class="text-center"> -->
                    <!-- <span class="badge {{ pipeline.status }} text-dark">{{ pipeline.get_status_display }}</span> -->
                <!-- </td> -->
                <!-- Add this cell in your table row -->
                
                {% include 'django_flow_forge/components/status_td.html' %}

                <td class="text-center">
                    <span>{{ pipeline.meta|slice:":300" }}{% if pipeline.meta|length > 300 %}...{% endif %}</span>

                </td>
                <td class="text-center">
                    <button name='executed_pipeline_option' value='{{ pipeline.id }}' class="btn btn-primary badge btn-sm" 
                    hx-get="{% url 'django-flow-forge:tasks_run_viz' %}" hx-target="#cytoscape-and_ml-outer-row" hx-swap="innerHTML">
                        <i class="fas fa-play"></i> Draw Graph
                    </button>
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>

{% else %}
    <h3 class="ui header center aligned">No results!</h3>               
{% endif %}
<div id="load-more">
    {% if searched_pipelines.has_next %}
        <div class="ui divider"></div>
        <button
            class="ui button primary"
            hx-get="{% url 'django-flow-forge:search_pipeline_runs' %}" 
            hx-vals='{"page": "{{ searched_pipelines.next_page_number }}", "search": "{{ search }}"}'
            hx-target="#load-more" 
            hx-swap="outerHTML"
        >
            Load more
        </button>
    {% endif %}
</div>