memEx/lib/memex_web/live/invite_live/index.html.heex

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

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

    <.link patch={~p"/invites"} class="btn btn-primary">
      <%= dgettext("actions", "invite someone new!") %>
    </.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 |> is_nil() and not (invite.uses_left |> is_nil())}
        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="btn btn-primary ml-auto">
      <%= dgettext("actions", "create invite") %>
    </.link>
  </div>

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

    <h1 class="title text-xl 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="title text-xl 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>