<div class="max-w-4xl mx-auto">
  <div class="mb-6">
    <%= link_to '← Back to Contacts', site_admin_contacts_path, class: 'text-blue-600 hover:text-blue-800' %>
  </div>

  <div class="bg-white rounded-lg shadow overflow-hidden">
    <div class="px-6 py-4 border-b border-gray-200">
      <h1 class="text-2xl font-bold text-gray-900">Contact Details</h1>
    </div>

    <div class="p-6">
      <dl class="grid grid-cols-1 gap-x-4 gap-y-6 sm:grid-cols-2">
        <div>
          <dt class="text-sm font-medium text-gray-500">Email</dt>
          <dd class="mt-1 text-sm text-gray-900"><%= @contact.primary_email.presence || 'N/A' %></dd>
        </div>

        <div>
          <dt class="text-sm font-medium text-gray-500">Name</dt>
          <dd class="mt-1 text-sm text-gray-900"><%= [@contact.first_name, @contact.last_name].compact.join(' ').presence || 'N/A' %></dd>
        </div>

        <div>
          <dt class="text-sm font-medium text-gray-500">Created</dt>
          <dd class="mt-1 text-sm text-gray-900"><%= format_date(@contact.created_at) %></dd>
        </div>

        <div>
          <dt class="text-sm font-medium text-gray-500">Updated</dt>
          <dd class="mt-1 text-sm text-gray-900"><%= format_date(@contact.updated_at) %></dd>
        </div>
      </dl>
    </div>
  </div>
</div>
