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

  <%= if @invites |> Enum.empty?() do %>
    <h1 class="text-xl text-center title text-primary-400">
      {gettext("no invites 😔")}
    </h1>

    <.link patch={~p"/invites/new"} class="ml-auto btn btn-primary">
      {dgettext("actions", "new invite")}
    </.link>
  <% end %>

  <div class="flex flex-col justify-center items-stretch space-y-4">
    <.invite_card
      :for={invite <- @invites}
      invite={invite}
      current_user={@current_user}
      use_count={Map.get(@use_counts, invite.id)}
    >
      <:code_actions>
        <form phx-submit="copy_to_clipboard">
          <button
            type="submit"
            class="mx-2 my-1 btn btn-secondary"
            phx-click={JS.dispatch("memex:clipcopy", to: "#code-#{invite.id}")}
            aria-label={
              dgettext("actions", "copy invite link for %{invite_name}", invite_name: invite.name)
            }
          >
            {dgettext("actions", "copy")}
          </button>
        </form>
      </:code_actions>
      <.link
        patch={~p"/invites/edit/#{invite}"}
        class="text-primary-400 link"
        aria-label={
          dgettext("actions", "edit invite for %{invite_name}", invite_name: invite.name)
        }
      >
        <i class="fa-fw fa-lg fas fa-edit"></i>
      </.link>

      <.link
        href="#"
        class="text-primary-400 link"
        phx-click="delete_invite"
        phx-value-id={invite.id}
        data-confirm={
          dgettext("prompts", "are you sure you want to delete the invite for %{invite_name}?",
            invite_name: invite.name
          )
        }
        aria-label={
          dgettext("actions", "delete invite for %{invite_name}", invite_name: invite.name)
        }
      >
        <i class="fa-fw fa-lg fas fa-trash"></i>
      </.link>

      <.link
        href="#"
        class="btn btn-secondary"
        phx-click={if invite.disabled_at, do: "enable_invite", else: "disable_invite"}
        phx-value-id={invite.id}
      >
        {if invite.disabled_at, do: gettext("enable"), else: gettext("disable")}
      </.link>

      <.link
        :if={!invite.disabled_at and !!invite.uses_left}
        href="#"
        class="btn btn-secondary"
        phx-click="set_unlimited"
        phx-value-id={invite.id}
        data-confirm={
          dgettext("prompts", "are you sure you want to make %{invite_name} unlimited?",
            invite_name: invite.name
          )
        }
      >
        {gettext("set unlimited")}
      </.link>
    </.invite_card>

    <.link :if={@invites != []} patch={~p"/invites/new"} class="ml-auto btn btn-primary">
      {dgettext("actions", "create invite")}
    </.link>
  </div>

  <%= unless @admins |> Enum.empty?() do %>
    <hr class="hr" />

    <h1 class="text-xl title text-primary-400">
      {gettext("admins")}
    </h1>

    <div class="flex flex-col justify-center items-stretch space-y-4">
      <.user_card :for={admin <- @admins} user={admin}>
        <.link
          href="#"
          class="text-primary-400 link"
          phx-click="delete_user"
          phx-value-id={admin.id}
          data-confirm={
            dgettext(
              "prompts",
              "are you sure you want to delete %{email}? this action is permanent!",
              email: admin.email
            )
          }
        >
          <i class="fa-fw fa-lg fas fa-trash"></i>
        </.link>
      </.user_card>
    </div>
  <% end %>

  <%= unless @users |> Enum.empty?() do %>
    <hr class="hr" />

    <h1 class="text-xl title text-primary-400">
      {gettext("users")}
    </h1>

    <div class="flex flex-col justify-center items-stretch space-y-4">
      <.user_card :for={user <- @users} user={user}>
        <.link
          href="#"
          class="text-primary-400 link"
          phx-click="delete_user"
          phx-value-id={user.id}
          data-confirm={
            dgettext(
              "prompts",
              "are you sure you want to delete %{email}? this action is permanent!",
              email: user.email
            )
          }
        >
          <i class="fa-fw fa-lg fas fa-trash"></i>
        </.link>
      </.user_card>
    </div>
  <% end %>
</div>

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