frenzy/lib/frenzy_web/live/edit_pipeline_live.html.leex

<h1>Edit <%= @pipeline.name %></h1>

<a href="<%= Routes.pipeline_path(FrenzyWeb.Endpoint, :edit, @pipeline.id, json: "") %>" class="btn btn-primary">Edit as JSON</a>

<%= for {stage, index} <- Enum.with_index(@pipeline.stages) do %>
  <div class="card mt-4">
    <div class="card-header container-fluid">
      <div class="row">
        <div class="col">
          <h4 class="m-0"><%= stage["module_name"] %></h4>
        </div>
        <div class="col text-right">
          <%= content_tag :button, "Move Up", [phx_click: :move_up, phx_value_index: index, disabled: index == 0, class: "btn btn-secondary btn-sm"] %>

          <%= content_tag :button, "Move Down", [phx_click: :move_down, phx_value_index: index, disabled: index == length(@pipeline.stages) - 1, class: "btn btn-secondary btn-sm"] %>

          <button phx-click="delete_stage" phx-value-index="<%= index %>" class="btn btn-danger btn-sm">Delete</button>
        </div>
      </div>
    </div>
    <div class="card-body">
      <%= component_for(@socket, stage, index) %>
    </div>
  </div>
<% end %>

<%= f = form_for :stage, "#", [class: "mt-4 mb-4", phx_submit: :add_stage] %>
  <div class="form-group row">
    <label class="col-sm-2 col-form-label" for="module_name">Module</label>
    <div class="col-sm-10">
      <%= select f, :module_name, @stages, class: "custom-select" %>
    </div>
  </div>
  <%= submit "Add Stage", class: "btn btn-primary" %>
</form>