.row

.large-8.columns
  h1.workflow-title
    = @workflow.class
    '
    small = @workflow.id
    '
    small
      a href="/" Back to list
.large-4.columns
  br
  - if !@workflow.started?
    a.button.split.success.small.radius.start-workflow data-action="start" data-workflow-id=@workflow.id
      | Start workflow
      span data-dropdown="drop"
  - else
    a.button.split.alert.small.radius.start-workflow data-action="stop" data-workflow-id=@workflow.id
      | Stop workflow
      span data-dropdown="drop"
  ul#drop.f-dropdown data-dropdown-content=true
    li
      a.retry-workflow data-workflow-id=@workflow.id href="#" Restart failed jobs
    li
      a.destroy-workflow data-workflow-id=@workflow.id href="#" Delete workflow

.row

.large-12.columns
  svg data-workflow-id=@workflow.id width="100%" height="400" id="canvas-#{@workflow.id}"
    g class="viewport"

.row

.large-12.columns
  h2 Jobs
  dl.sub-nav.jobs-filter
    dt Filter:
    dd.active
      a data-filter="all" All
    dd
      a data-filter="waiting" Waiting
    dd
      a data-filter="enqueued" Enqueued
    dd
      a data-filter="failed" Failed
    dd
      a data-filter="finished" Finished
  table.jobs
    thead
      th Name
      th Status
      th Started at
      th Finished at
    tbody

script

== "var jobs = #{JSON.dump(@jobs)};"
== "var links = #{JSON.dump(@links)};"

javascript:

graph = new Graph("canvas-#{@workflow.id}")
graph.populate(jobs, links)
graph.render()