<div class="flex flex-col justify-center items-center text-center space-y-8">
  <h2 class="title text-xl text-primary-600">
    <%= @title %>
  </h2>

  <div class="flex flex-wrap justify-center items-center">
    <.link
      :for={tag <- @container.tags}
      href="#"
      class="mx-2 my-1 px-4 py-2 rounded-lg title text-xl"
      style={"color: #{tag.text_color}; background-color: #{tag.bg_color}"}
      phx-click="delete"
      phx-value-tag-id={tag.id}
      phx-target={@myself}
      data-confirm={
        dgettext(
          "prompts",
          "Are you sure you want to remove the %{tag_name} tag from %{container_name}?",
          tag_name: tag.name,
          container_name: @container.name
        )
      }
    >
      <%= tag.name %>
      <i class="fa-fw fa-sm fas fa-trash"></i>
    </.link>

    <h2 :if={@container.tags |> Enum.empty?()} class="title text-xl text-primary-600">
      <%= gettext("No tags") %>
      <%= display_emoji("😔") %>
    </h2>
  </div>

  <%= unless tag_options(@tags, @container) |> Enum.empty?() do %>
    <hr class="hr" />

    <.form
      :let={f}
      for={%{}}
      as={:tag}
      id="add-tag-to-container-form"
      class="flex flex-col space-y-4 sm:space-y-0 sm:grid sm:grid-cols-3 sm:gap-4 justify-center items-center"
      phx-target={@myself}
      phx-submit="save"
    >
      <%= select(f, :tag_id, tag_options(@tags, @container),
        class: "text-center col-span-2 input input-primary"
      ) %>
      <%= error_tag(f, :tag_id, "col-span-3 text-center") %>

      <%= submit(dgettext("actions", "Add"),
        class: "mx-auto btn btn-primary",
        phx_disable_with: dgettext("prompts", "Adding...")
      ) %>
    </.form>
  <% end %>
</div>
