<%= turbo_frame_tag workflow do %>
  <article class="panel" style="--panel-size: 40ch;">
    <div class="flex gap-half align-center justify-starts">
      <%= turbo_frame_tag dom_id(workflow, :header) do %>
        <%= link_to edit_workflow_path(workflow) do %>
          <h3 class="txt-large txt-nowrap margin-none overflow-ellipsis"><%= workflow.name %></h3>
        <% end %>
      <% end %>
    </div>

    <hr class="separator--horizontal flex-item-grow" style="--border-color: var(--color-ink-medium);" aria-hidden="true">

    <div class="flex flex-column gap-half margin-block-start">
      <%= turbo_frame_tag dom_id(workflow, :stages) do %>
        <%= render partial: "workflows/stages/stage", collection: workflow.stages %>

        <%= turbo_frame_tag dom_id(workflow, :new_stage) do %>
          <%= link_to new_workflow_stage_path(workflow), class: "btn txt-small" do %>
            <%= icon_tag "add" %>
            <span class="for-screen-reader">New stage</span>
          <% end %>
        <% end %>
      <% end %>
    </div>
  </article>
<% end %>
