<div class="max-w-7xl mx-auto">
  <div class="mb-6">
    <h1 class="text-3xl font-bold text-gray-900">Contacts</h1>
    <p class="mt-2 text-gray-600">View contacts for <%= current_website.subdomain %></p>
  </div>

  <!-- Search Form -->
  <div class="mb-6 bg-white rounded-lg shadow p-4">
    <%= form_with url: site_admin_contacts_path, method: :get, local: true, class: "flex gap-4" do |f| %>
      <div class="flex-1">
        <%= f.text_field :search, value: params[:search], placeholder: "Search by email or name...", class: "w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" %>
      </div>
      <%= f.submit "Search", class: "px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700" %>
    <% end %>
  </div>

  <!-- Contacts Table -->
  <div class="bg-white rounded-lg shadow overflow-hidden">
    <table class="min-w-full divide-y divide-gray-200">
      <thead class="bg-gray-50">
        <tr>
          <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Email</th>
          <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Name</th>
          <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th>
          <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
        </tr>
      </thead>
      <tbody class="bg-white divide-y divide-gray-200">
        <% if @contacts.any? %>
          <% @contacts.each do |contact| %>
            <tr>
              <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                <%= contact.primary_email.presence || 'N/A' %>
              </td>
              <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                <%= [contact.first_name, contact.last_name].compact.join(' ').presence || 'N/A' %>
              </td>
              <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                <%= format_date(contact.created_at) %>
              </td>
              <td class="px-6 py-4 whitespace-nowrap text-sm">
                <%= link_to 'View', site_admin_contact_path(contact), class: 'text-blue-600 hover:text-blue-800' %>
              </td>
            </tr>
          <% end %>
        <% else %>
          <tr>
            <td colspan="4" class="px-6 py-4 text-center text-gray-500">
              No contacts found
            </td>
          </tr>
        <% end %>
      </tbody>
    </table>
  </div>
</div>
