<.table id="invitations" rows={@streams.invitations}>
<:col :let={{_id, invitation}} label="Name">
{invitation.name || "Unnamed"}
<:col :let={{_id, invitation}} label="Created">
{Calendar.strftime(invitation.inserted_at, "%b %d, %Y")}
<:col :let={{_id, invitation}} label="Expires">
{expires_at(invitation)}
<:col :let={{_id, invitation}} label="Usage">
{invitation.joined_count}
{if invitation.joined_count == 1, do: "user", else: "users"}
<:col :let={{id, invitation}} label="Invitation Link">
<.link
class="text-blue-600 hover:text-blue-800 text-sm font-mono truncate max-w-xs"
href={token_link(invitation)}
target="_blank"
>
{token_link(invitation) |> token_link_display_value()}
<.button
id={"copy-invitation-token-link-#{id}"}
variant="light"
class="text-zinc-700 bg-zinc-100 hover:bg-zinc-200 px-2 py-1"
phx-hook="CopyToClipboard"
data-clipboard-text={token_link(invitation)}
title="Copy invitation link"
>
<.icon name="hero-clipboard" class="h-4 w-4" />
<:action :let={{_id, invitation}}>
<.link patch={usher_path([invitation.id, :edit])}>
<.button
variant="light"
class="text-blue-700 bg-blue-100 hover:bg-blue-200 px-3 py-2"
title="Edit invitation"
>
<.icon name="hero-pencil" class="h-4 w-4" />
<.button
variant="light"
class="text-red-700 bg-red-100 hover:bg-red-200 px-3 py-2"
phx-click="delete_invitation"
phx-value-id={invitation.id}
title="Delete invitation"
>
<.icon name="hero-trash" class="h-4 w-4" />
<:empty_state>
<.icon name="hero-inbox" class="mx-auto h-12 w-12 text-zinc-400" />
No invitations yet
Get started by creating your first invitation.
<.link patch={usher_path([:new])}>
<.button variant="primary">
New Invitation
<.modal
:if={@live_action in [:new, :edit]}
id="invitation-modal"
show
on_cancel={JS.patch(usher_path())}
>
<.live_component
module={Usher.Web.Components.InvitationFormComponent}
id={@invitation.id || :new}
title={if @live_action == :new, do: "New Invitation", else: "Edit Invitation"}
action={@live_action}
invitation={@invitation}
/>
<.modal
:if={@delete_confirmation}
id="delete-confirmation-modal"
show={true}
on_cancel={JS.push("cancel_delete_invitation")}
>
Confirm Deletion
Are you sure you want to delete this invitation?
This action cannot be undone and will invalidate the invitation link.
<.button type="button" variant="light" phx-click="cancel_delete_invitation">
Cancel
<.button
type="button"
variant="danger"
phx-click="confirm_delete_invitation"
phx-value-id={@delete_confirmation.id}
>
<.icon name="hero-trash" class="h-4 w-4 mr-1" /> Delete