<div class="flex flex-col justify-center items-start mx-auto space-y-4 max-w-3xl">
  <h1 class="text-xl">
    {gettext("pipelines")}
  </h1>

  <.form
    :let={f}
    for={%{}}
    as={:search}
    phx-change="search"
    phx-submit="search"
    class="flex flex-col items-stretch self-stretch"
  >
    {text_input(f, :search_term,
      class: "input input-primary",
      value: @search,
      role: "search",
      phx_debounce: 300,
      placeholder: gettext("search")
    )}
  </.form>

  <%= if @pipelines |> Enum.empty?() do %>
    <h1 class="self-center text-primary-500">
      {gettext("no pipelines found")}
    </h1>
  <% else %>
    <.live_component
      module={MemexWeb.Components.PipelinesTableComponent}
      id="pipelines-index-table"
      current_user={@current_user}
      pipelines={@pipelines}
    >
      <:actions :let={pipeline}>
        <.link
          :if={@current_user}
          patch={~p"/pipelines/#{pipeline}/edit"}
          aria-label={dgettext("actions", "edit %{pipeline_slug}", pipeline_slug: pipeline.slug)}
        >
          {dgettext("actions", "edit")}
        </.link>
        <.link
          :if={@current_user}
          href="#"
          phx-click="delete"
          phx-value-id={pipeline.id}
          data-confirm={dgettext("prompts", "are you sure?")}
          aria-label={
            dgettext("actions", "delete %{pipeline_slug}", pipeline_slug: pipeline.slug)
          }
        >
          {dgettext("actions", "delete")}
        </.link>
      </:actions>
    </.live_component>
  <% end %>

  <.link :if={@current_user} patch={~p"/pipelines/new"} class="self-end btn btn-primary">
    {dgettext("actions", "new pipeline")}
  </.link>
</div>

<.modal :if={@live_action in [:new, :edit]} return_to={~p"/pipelines"}>
  <.live_component
    module={MemexWeb.PipelineLive.FormComponent}
    id={@pipeline.id || :new}
    current_user={@current_user}
    title={@page_title}
    action={@live_action}
    pipeline={@pipeline}
    return_to={~p"/pipelines"}
  />
</.modal>
