<div class="flex flex-col justify-center items-stretch mx-auto 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} />

  <div :if={@pipeline_backlinks != []} class="flex flex-wrap justify-end items-center self-end">
    <p>{gettext("Backlinked by:")}</p>
    <.link
      :for={backlink <- @pipeline_backlinks}
      class="m-1 hover:underline"
      patch={~p"/pipeline/#{backlink}"}
    >
      {gettext("[%{slug}]", slug: backlink.slug)}
    </.link>
  </div>

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

  <div class="flex self-end pb-4 space-x-4">
    <.link :if={@current_user} class="btn btn-primary" patch={~p"/pipeline/#{@pipeline}/edit"}>
      {dgettext("actions", "edit")}
    </.link>
    <button
      :if={@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="self-center pt-2 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 @current_user do %>
          <div class="flex justify-between items-center space-x-4">
            <%= if position <= 0 do %>
              <i class="text-xl opacity-25 cursor-not-allowed fas fa-chevron-up"></i>
            <% else %>
              <button
                type="button"
                class="flex justify-center items-center cursor-pointer"
                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="text-xl fas fa-chevron-up"></i>
              </button>
            <% end %>

            <%= if position >= length(@steps) - 1 do %>
              <i class="text-xl opacity-25 cursor-not-allowed fas fa-chevron-down"></i>
            <% else %>
              <button
                type="button"
                class="flex justify-center items-center cursor-pointer"
                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="text-xl fas 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={@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 %>
