{% extends "base/page.html" %}
{% load static %}
{% block page_title %}Workflows{% endblock %}
{% block css %}
<style>
code {
    color: rgb(0, 123, 255);
    display: inline-block;
    max-width: 1400px;
    padding: 10px;
}
</style>
{% endblock %}
{% block content %}
    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header ">
                    <p class="card-category">{{ BACKENDS_ENABLED }}</p>
                </div>
                <div class="card-body">
                    {% if workflows %}
                      <div style='padding-bottom:25px'>
                          <a type="button" role="button" class="btn btn-primary" href="{% url 'main:new_workflow' %}">New Workflow</a>
                      </div>
                      <table id="taskTable" class="table table-striped table-bordered"  width="100%">
                      <thead>
                           <th>Id</th>
                           <th>Status</th>
                           <th>Snakefile</th>
                           <th>Command</th>
                           <th>Actions</th>
                      </thead>
                      <tbody>{% for workflow in workflows %}
                          <tr>
                            <td>{{ workflow.id }}</td>
                            <td>{% include "fields/status.html" with status=workflow.retval %}</td>
                            <td>{{ workflow.snakefile }}</td>
                            <td><code>{{ workflow.command }}</code></td>
                            <td><button class="btn btn-primary"><a href="{% url 'main:view_workflow' workflow.id %}">View</a></button></td>
                          </tr>
                      {% endfor %}</tbody>
                    </table>{% else %}
                    <p class="alert alert-secondary">You don't have any Snakemake workflows. Why don't you <a href="{% url 'main:new_workflow' %}">create one</a>?</p>
                    {% endif %}
               </div>
              </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}
{% block scripts %}
<script>
$(document).ready(function(){
    {% if workflows %}$("#taskTable").DataTable();{% endif %}
});
</script>
{% endblock %}