{% extends "base/base.html" %}
{% from "base/ui/state.html" import state_badge %}

{% block head %}
  {{ super() }}
  <script src="/static/workflow/vis-network.min.js"></script>
{% endblock %}

{% block content %}
<div>
  <h1 class="h3 mb-3">Workflow</h1>
  <div class="card mb-3">
    <div class="card-header text-bg-info">
      Workflow Details
    </div>
    <table class="table table-bordered table-striped mb-0">
      <tbody>
        <tr>
          <th>ID</th>
          <td>{{ workflow.id }}</td>
        </tr>
        <tr>
          <th>Name</th>
          <td>{{ workflow.name }}</td>
        </tr>
        <tr>
          <th>State</th>
          <td>
            {{ state_badge(workflow.state.value) }}
          </td>
        </tr>
      </tbody>
    </table>
  </div>
  <div
      id="workflow-graph"
      class="bg-body-tertiary border border-1 border-info-subtle"></div>
  <div class="card mt-3">
    <div class="card-header text-bg-info">
      Workflow Steps
    </div>
    <table class="table table-bordered table-striped mb-0">
      <thead>
      <tr>
        <th>Step ID</th>
        <th>State</th>
        <th>Job ID</th>
        <th>Dependencies</th>
      </tr>
      </thead>
      <tbody>
      {% for step in workflow.steps.values() %}
        <tr>
          <td>{{ step.step_id }}</td>
          <td>
            {{ state_badge(step.state.value) }}
          </td>
          <td>
            {% if step.job_id %}
              <a href="{{ url_for("job", job_id=step.job_id) }}">
                {{ step.job_id }}
              </a>
            {% else %}
              <span class="text-warning">-</span>
            {% endif %}
          </td>
          <td>{{ step.dependencies }}</td>
        </tr>
      {% endfor %}
      </tbody>
    </table>
  </div>
<script type="text/javascript">
  let data  = {
    nodes: new vis.DataSet([
      {% for step in workflow.steps.values() %}
        {
          id: {{ step.step_id|tojson }},
          label: "*{{ step.step_id }}*",
          title: "{{ step.state }}",
          shape: "box",
          margin: 20,
          font: {
            multi: "md"
          },
          "color": {
            {% if step.state.value == "running" %}
              background: "#007bff",
              border: "#0056b3",
              highlight: {
                background: "#0056b3",
                border: "#003c6b"
              }
            {% elif step.state.value == "succeeded" %}
              background: "#28a745",
              border: "#218838",
              highlight: {
                background: "#218838",
                border: "#1e7e34"
              }
            {% elif step.state.value == "failed" %}
              background: "#dc3545",
              border: "#c82333",
              highlight: {
                background: "#c82333",
                border: "#bd2130"
              }
            {% else %}
              background: "#6c757d",
              border: "#495057",
              highlight: {
                background: "#495057",
                border: "#343a40"
              }
            {% endif %}
          }
        },
      {% endfor %}
    ]),
    edges: new vis.DataSet([
      {% for step in workflow.steps.values() %}
        {% for dependency in step.dependencies %}
          {to: {{ step.step_id|tojson }}, from: {{ dependency|tojson }}},
        {% endfor %}
      {% endfor %}
    ])
  };
  var options = {
    layout: {
      hierarchical: {
        direction: 'LR',  // UD for top-to-bottom, DU for bottom-to-top, LR for left-to-right
        sortMethod: 'directed',  // Respects the direction of the edges
        levelSeparation: 150,  // Vertical space between levels
        nodeSpacing: 100,  // Horizontal space between nodes
      }
    },
    edges: {
      arrows: {
        to: { enabled: true, scaleFactor: 1, type: 'arrow' }
      }
    },
    physics: false,
    height: '500px',
  };
  let network = new vis.Network(document.getElementById("workflow-graph"), data, options);
</script>
{% endblock %}