<%
  header_title t(".title", family: @invitation.family.name)
%>

<div class="space-y-1 mb-6 text-center">
  <p class="text-secondary">
    <%= t(".message",
          inviter: @invitation.inviter.display_name,
          role: t("invitations.new.role_#{@invitation.role}", default: @invitation.role.to_s.humanize)) %>
  </p>
</div>

<div class="space-y-4">
  <%= link_to new_registration_path(invitation: @invitation.token),
      class: "block w-full rounded-md border border-secondary bg-container px-4 py-3 text-center text-sm font-medium text-primary hover:bg-secondary transition" do %>
    <%= t(".create_account") %>
  <% end %>

  <%= link_to new_session_path(invitation: @invitation.token),
      class: "block w-full rounded-md border border-secondary bg-container px-4 py-3 text-center text-sm font-medium text-primary hover:bg-secondary transition" do %>
    <%= t(".sign_in_existing") %>
  <% end %>
</div>
