<div class="flex flex-col justify-center items-start mx-auto space-y-4 max-w-3xl">
  <h1 class="text-xl">
    {gettext("contexts")}
  </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 @contexts |> Enum.empty?() do %>
    <h1 class="self-center text-primary-500">
      {gettext("no contexts found")}
    </h1>
  <% else %>
    <.live_component
      module={MemexWeb.Components.ContextsTableComponent}
      id="contexts-index-table"
      current_user={@current_user}
      contexts={@contexts}
    >
      <:actions :let={context}>
        <.link
          :if={@current_user}
          patch={~p"/contexts/#{context}/edit"}
          aria-label={dgettext("actions", "edit %{context_slug}", context_slug: context.slug)}
        >
          {dgettext("actions", "edit")}
        </.link>
        <.link
          :if={@current_user}
          href="#"
          phx-click="delete"
          phx-value-id={context.id}
          data-confirm={dgettext("prompts", "are you sure?")}
          aria-label={dgettext("actions", "delete %{context_slug}", context_slug: context.slug)}
        >
          {dgettext("actions", "delete")}
        </.link>
      </:actions>
    </.live_component>
  <% end %>

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

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