{% extends "index.html" %}

{% block main_info %}

<div class="card">
  <div class="card-header"><strong>workflow {{workflow.id}} {{" finished after "+ (workflow.completed_at-workflow.started_at)|formatdelta if workflow.completed_at else "" }}</strong></div>
  <table class="informTable table text-center table-responsive-sm table-outline mb-0">
    <thead class="thead-light">
    <tr>
      <th class="text-center">Id</th>
      <th class="text-center">Name</th>
      <th class="text-center">Date</th>
      <th class="text-center">Steps</th>
      <th class="text-center">Actions</th>
    </tr>
    </thead>
    <tbody>
    <tr>
      <td class="text-center">
        {{ workflow.id }}
      </td>
      <td class="text-center">
        {{ workflow.name }}
      </td>
      <td class="text-center">
        <a> {{ workflow.started_at|formatdatetime }} </a>
      </td>
      <td class="text-center">
        <a> {{ workflow.jobs_done }}/{{ workflow.jobs_total }} </a>
      </td>
        <td class="dt-nowrap">
            <button id="addBtn" title="Add workflow" class="btn btn-success add"><i class="fas fa-check fa-xs"></i></button>
            <button id="editBtn" title="Edit workflow"class="btn btn-success edit"><i class="fas fa-edit fa-xs"></i></button>
            <button id="deleteBtn" data-toggle="modal" data-target="#deleteConfirmationModal" title="Delete workflow" class="btn btn-danger delete"><i class="far fa-trash-alt fa-xs"></i></button>
        </td>
    </tr>
    </tbody>
  </table>
</div>

<div class="card">
  <div class="card-header">progress</div>
  <div class="card-body">
    <div class="progress">
      {% set progress_percent = "%.2f"|format((workflow.jobs_done|float)/(workflow.jobs_total|float)*100)|string %}
      <div class="progress-bar" role="progressbar" style="width: {{ progress_percent }}%;" aria-valuenow="75"
           aria-valuemin="0" aria-valuemax="100">{{ progress_percent }}%
      </div>
    </div>
  </div>
</div>

<div class="card">
  <div class="card-header"> workflow Jobs</div>
  <div class="card-body">
    <table id="jobsTable" class="fullTable table table-responsive-sm stripe table-outline mb-0">
      <thead>
      <tr>
        <th class="text-center">Id</th>
        <th class="text-center">Name</th>
        <th class="text-center">Status</th>
        <th class="text-center">Duration</th>
      </tr>
      </thead>
      <tbody>
      {% for job in get_jobs(workflow.id) %}
      <tr class="tableRow">
        <td >
          <a href='/workflow/{{ job.workflow_id }}/job/{{ job.jobid }}'> {{ job.jobid }} </a>
        </td>
        <td class="nameColumn">
          <a href='/workflow/{{ job.workflow_id }}/job/{{ job.jobid }}'> {{ job.name }} </a>
        </td>
        <td><span class="badge badge-{{ 'success' if job.status=='Done' else ('danger' if job.status=='Error' else ('info' if job.status=='Running' else 'light text-dark'))}}"> {{ job.status }} </span></td>
        <td>
         <a> {{ (job.completed_at-job.started_at)|formatdelta if job.completed_at else '-' }}</a>
        </td>
      </tr>
      {% endfor %}

      </tbody>
    </table>
  </div>
</div>


{% endblock %}