{% extends "modern/base.html" %}

{% block title %}Workflows - BLOOM LIMS{% endblock %}

{% block content %}
<div class="page-header">
  <div>
    <h1>Workflows</h1>
    <p class="text-muted">View and manage workflow instances</p>
  </div>
  <div class="page-actions">
  </div>
</div>

<!-- Stats Row -->
<div class="grid grid-4 mb-lg">
  <div class="stat-card">
    <div class="card-icon info">
      <i class="fas fa-list"></i>
    </div>
    <div class="stat-content">
      <div class="stat-value">{{ workflows | length }}</div>
      <div class="stat-label">Total Workflows</div>
    </div>
  </div>
  <div class="stat-card">
    <div class="card-icon warning">
      <i class="fas fa-spinner"></i>
    </div>
    <div class="stat-content">
      <div class="stat-value">{{ workflow_status_totals.get('in_progress', 0) }}</div>
      <div class="stat-label">In Progress</div>
    </div>
  </div>
  <div class="stat-card">
    <div class="card-icon success">
      <i class="fas fa-check-circle"></i>
    </div>
    <div class="stat-content">
      <div class="stat-value">{{ workflow_status_totals.get('complete', 0) }}</div>
      <div class="stat-label">Complete</div>
    </div>
  </div>
  <div class="stat-card">
    <div class="card-icon error">
      <i class="fas fa-exclamation-triangle"></i>
    </div>
    <div class="stat-content">
      <div class="stat-value">{{ workflow_status_totals.get('exception', 0) }}</div>
      <div class="stat-label">Exceptions</div>
    </div>
  </div>
</div>

<!-- Workflows Table -->
<div class="card">
  <div class="card-header">
    <h3 class="card-title"><i class="fas fa-project-diagram"></i> Workflow Instances</h3>
    <div class="filter-search">
      <input type="text" class="form-input" placeholder="Search..." id="search-input" onkeyup="searchTable(this.value)">
    </div>
  </div>
  <div class="card-body">
    <div class="table-container">
      <table class="table" id="workflows-table">
        <thead>
          <tr>
            <th>EUID</th>
            <th>Type</th>
            <th>Name</th>
            <th>Status</th>
            <th>Created</th>
            <th>Actions</th>
          </tr>
        </thead>
        <tbody>
          {% for wf in workflows %}
          {% set wf_status = wf.bstatus if wf.bstatus else 'queued' %}
          {% if wf.json_addl is mapping %}
            {% set wf_status = wf.json_addl.get('status') or wf_status %}
          {% endif %}
          <tr>
            <td><a href="/euid_details?euid={{ wf.euid }}" class="badge badge-euid">{{ wf.euid }}</a></td>
            <td>{{ wf.subtype }}</td>
            <td>{{ wf.name | default('-') }}</td>
            <td>
              <span class="badge badge-{% if wf_status == 'complete' %}success{% elif wf_status == 'exception' %}error{% elif wf_status == 'in_progress' %}warning{% else %}info{% endif %}">
                {{ wf_status }}
              </span>
            </td>
            <td class="text-muted text-sm">{{ wf.created_dt.strftime('%Y-%m-%d %H:%M') if wf.created_dt else '-' }}</td>
            <td>
              <a href="/workflow_details?workflow_euid={{ wf.euid }}" class="btn btn-outline btn-sm" title="View details">
                <i class="fas fa-eye"></i>
              </a>
            </td>
          </tr>
          {% else %}
          <tr>
            <td colspan="6" class="text-center text-muted">No workflows found</td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
</div>
{% endblock %}

{% block extra_css %}
<style>
.filter-search {
  max-width: 250px;
}
</style>
{% endblock %}

{% block extra_js %}
<script>
function searchTable(query) {
  const table = document.getElementById('workflows-table');
  const rows = table.querySelectorAll('tbody tr');
  const q = query.toLowerCase();
  
  rows.forEach(row => {
    const text = row.textContent.toLowerCase();
    row.style.display = text.includes(q) ? '' : 'none';
  });
}
</script>
{% endblock %}