memEx/lib/memex_web/live/pipeline_live/show.html.heex

<div class="mx-auto flex flex-col justify-center items-stretch space-y-4 max-w-3xl">
  <h1 class="text-xl">
    <%= @pipeline.slug %>
  </h1>

  <div class="flex flex-wrap space-x-1">
    <.link :for={tag <- @pipeline.tags} navigate={~p"/pipelines/#{tag}"} class="link">
      <%= tag %>
    </.link>
  </div>

  <.pipeline_content pipeline={@pipeline} />

  <p class="self-end">
    <%= gettext("Visibility: %{visibility}", visibility: @pipeline.visibility) %>
  </p>

  <div class="pb-4 self-end flex space-x-4">
    <.link
      :if={Pipelines.is_owner?(@pipeline, @current_user)}
      class="btn btn-primary"
      patch={~p"/pipeline/#{@pipeline}/edit"}
    >
      <%= dgettext("actions", "edit") %>
    </.link>
    <button
      :if={Pipelines.owner_or_admin?(@pipeline, @current_user)}
      type="button"
      class="btn btn-primary"
      phx-click="delete"
      data-confirm={dgettext("prompts", "are you sure?")}
      aria-label={dgettext("actions", "delete %{pipeline_slug}", pipeline_slug: @pipeline.slug)}
    >
      <%= dgettext("actions", "delete") %>
    </button>
  </div>

  <hr class="hr" />

  <h2 class="pt-2 self-center text-lg">
    <%= gettext("steps:") %>
  </h2>

  <%= if @steps |> Enum.empty?() do %>
    <h3 class="self-center text-md text-primary-600">
      <%= gettext("no steps") %>
    </h3>
  <% else %>
    <%= for %{id: step_id, position: position, title: title} = step <- @steps do %>
      <div class="flex justify-between items-center space-x-4">
        <h3 class="text-md">
          <%= gettext("%{position}. %{title}", position: position + 1, title: title) %>
        </h3>

        <%= if Pipelines.is_owner?(@pipeline, @current_user) do %>
          <div class="flex justify-between items-center space-x-4">
            <%= if position <= 0 do %>
              <i class="fas text-xl fa-chevron-up cursor-not-allowed opacity-25"></i>
            <% else %>
              <button
                type="button"
                class="cursor-pointer flex justify-center items-center"
                phx-click="reorder_step"
                phx-value-direction="up"
                phx-value-step-id={step_id}
                aria-label={dgettext("actions", "move %{step_title} up", step_title: step.title)}
              >
                <i class="fas text-xl fa-chevron-up"></i>
              </button>
            <% end %>

            <%= if position >= length(@steps) - 1 do %>
              <i class="fas text-xl fa-chevron-down cursor-not-allowed opacity-25"></i>
            <% else %>
              <button
                type="button"
                class="cursor-pointer flex justify-center items-center"
                phx-click="reorder_step"
                phx-value-direction="down"
                phx-value-step-id={step_id}
                aria-label={
                  dgettext("actions", "move %{step_title} down", step_title: step.title)
                }
              >
                <i class="fas text-xl fa-chevron-down"></i>
              </button>
            <% end %>

            <.link
              class="self-end btn btn-primary"
              patch={~p"/pipeline/#{@pipeline}/#{step_id}"}
              aria-label={dgettext("actions", "edit %{step_title}", step_title: step.title)}
            >
              <%= dgettext("actions", "edit") %>
            </.link>

            <button
              type="button"
              class="btn btn-primary"
              phx-click="delete_step"
              phx-value-step-id={step_id}
              data-confirm={dgettext("prompts", "are you sure?")}
              aria-label={dgettext("actions", "delete %{step_title}", step_title: step.title)}
            >
              <%= dgettext("actions", "delete") %>
            </button>
          </div>
        <% end %>
      </div>

      <.step_content step={step} />
    <% end %>
  <% end %>

  <.link
    :if={Pipelines.is_owner?(@pipeline, @current_user)}
    class="self-end btn btn-primary"
    patch={~p"/pipeline/#{@pipeline}/add_step"}
  >
    <%= dgettext("actions", "add step") %>
  </.link>
</div>

<%= case @live_action do %>
  <% :edit -> %>
    <.modal return_to={~p"/pipeline/#{@pipeline}"}>
      <.live_component
        module={MemexWeb.PipelineLive.FormComponent}
        id={@pipeline.id}
        current_user={@current_user}
        title={@page_title}
        action={@live_action}
        pipeline={@pipeline}
        return_to={~p"/pipeline/#{@pipeline}"}
      />
    </.modal>
  <% action when action in [:add_step, :edit_step] -> %>
    <.modal return_to={~p"/pipeline/#{@pipeline}"}>
      <.live_component
        module={MemexWeb.StepLive.FormComponent}
        id={@pipeline.id || :new}
        current_user={@current_user}
        title={@page_title}
        action={@live_action}
        pipeline={@pipeline}
        step={@step}
        return_to={~p"/pipeline/#{@pipeline}"}
      />
    </.modal>
  <% _ -> %>
<% end %>