<div class="container mx-auto px-4 py-8">
  <div class="max-w-4xl mx-auto">
    <div class="bg-base-200 rounded-lg p-6">
      <div class="flex items-center justify-between mb-6">
        <h1 class="text-2xl font-bold text-base-content">
          <%= t('family_invitations.index.title', default: 'Family Invitations') %>
        </h1>
        <%= link_to family_path,
              class: "btn btn-neutral" do %>
          <%= t('family_invitations.index.back_to_family', default: 'Back to Family') %>
        <% end %>
      </div>

      <% if @pending_invitations.any? %>
        <div class="space-y-4">
          <% @pending_invitations.each do |invitation| %>
            <div class="flex items-center justify-between p-4 bg-base-100 rounded-lg">
              <div>
                <div class="font-medium text-base-content"><%= invitation.email %></div>
                <div class="text-sm text-base-content opacity-60">
                  <%= t('family_invitations.index.invited_on', default: 'Invited') %>
                  <%= invitation.created_at.strftime('%B %d, %Y') %>
                </div>
                <div class="text-xs text-base-content opacity-50">
                  <%= t('family_invitations.index.expires_on', default: 'Expires') %>
                  <%= invitation.expires_at.strftime('%B %d, %Y at %I:%M %p') %>
                </div>
              </div>

              <div class="flex space-x-2">
                <button type="button"
                        data-controller="clipboard"
                        data-clipboard-text-value="<%= public_invitation_url(invitation.token) %>"
                        data-action="click->clipboard#copy"
                        class="btn btn-ghost btn-sm text-primary">
                  <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
                  </svg>
                  <%= t('family_invitations.index.copy_link', default: 'Copy Link') %>
                </button>

                <%= link_to public_invitation_path(invitation.token),
                      class: "btn btn-ghost btn-sm text-info" do %>
                  <%= t('family_invitations.index.view_invitation', default: 'View') %>
                <% end %>

                <% if policy(@family).manage_invitations? %>
                  <%= link_to family_invitation_path(invitation.token),
                        method: :delete,
                        confirm: t('family_invitations.index.cancel_confirm', default: 'Are you sure you want to cancel this invitation?'),
                        class: "btn btn-ghost btn-sm text-error" do %>
                    <%= t('family_invitations.index.cancel', default: 'Cancel') %>
                  <% end %>
                <% end %>
              </div>
            </div>
          <% end %>
        </div>
      <% else %>
        <div class="text-center py-8">
          <p class="text-base-content opacity-50 text-lg">
            <%= t('family_invitations.index.no_invitations', default: 'No pending invitations') %>
          </p>
        </div>
      <% end %>
    </div>
  </div>
</div>