<div class="flex flex-col justify-center items-center px-8 py-4 space-y-4 rounded-lg border border-zinc-400 shadow-lg transition-all duration-300 ease-in-out bg-primary-900 hover:shadow-md">
  <h1 class="text-xl title">
    {@invite.name}
  </h1>

  <%= if @invite.disabled_at do %>
    <h2 class="title text-md">
      {gettext("invite disabled")}
    </h2>
  <% else %>
    <h2 class="title text-md">
      <%= if @invite.uses_left do %>
        {gettext(
          "uses left: %{uses_left_count}",
          uses_left_count: @invite.uses_left
        )}
      <% else %>
        {gettext("uses left: unlimited")}
      <% end %>
    </h2>
  <% end %>

  <.qr_code
    content={url(MemexWeb.Endpoint, ~p"/users/register?invite=#{@invite.token}")}
    filename={@invite.name}
  />

  <h2 :if={@use_count && @use_count != 0} class="title text-md">
    {gettext("uses: %{uses_count}", uses_count: @use_count)}
  </h2>

  <div class="flex flex-row flex-wrap justify-center items-center">
    <code
      id={"code-#{@invite.id}"}
      class="px-4 py-2 mx-2 my-1 text-xs text-center break-all rounded-lg text-primary-400 bg-primary-800"
      phx-no-format
    ><%= url(MemexWeb.Endpoint, ~p"/users/register?invite=#{@invite.token}") %></code>
    {if @code_actions, do: render_slot(@code_actions)}
  </div>

  <div :if={@inner_block} class="flex justify-center items-center space-x-4">
    {render_slot(@inner_block)}
  </div>
</div>
