<div class="max-w-4xl mx-auto">
  <%= form_with(model: [:admin, user], class: "space-y-4") do |form| %>
    <% if user.errors.any? %>
      <div class="bg-red-50 border border-red-200 rounded-lg p-3">
        <div class="flex items-start">
          <svg class="w-5 h-5 text-red-400 mt-0.5 mr-3 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"/>
          </svg>
          <div class="flex-1">
            <h3 class="text-sm font-semibold text-red-800 mb-2">
              <%= pluralize(user.errors.count, "error") %> prohibited this user from being saved:
            </h3>
            <ul class="text-sm text-red-700 space-y-1">
              <% user.errors.each do |error| %>
                <li><%= error.full_message %></li>
              <% end %>
            </ul>
          </div>
        </div>
      </div>
    <% end %>

    <!-- Form Content Card -->
    <div class="bg-white rounded-lg border border-gray-200 shadow-sm">
      <div class="px-4 py-3 border-b border-gray-200">
        <h2 class="text-lg font-semibold text-gray-900"><%= user.new_record? ? "Create User" : "Edit User" %></h2>
        <p class="text-sm text-gray-600 mt-1"><%= user.new_record? ? "Create a new user account" : "Update user account details" %></p>
      </div>

      <div class="p-4 space-y-4">
        <!-- First Name -->
        <div>
          <%= form.label :first_name, class: "block text-sm font-medium text-gray-700 mb-2" %>
          <%= form.text_field :first_name,
              class: "block w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm",
              placeholder: "Enter first name" %>
        </div>

        <!-- Last Name -->
        <div>
          <%= form.label :last_name, class: "block text-sm font-medium text-gray-700 mb-2" %>
          <%= form.text_field :last_name,
              class: "block w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm",
              placeholder: "Enter last name" %>
        </div>

        <!-- Email -->
        <div>
          <%= form.label :email, class: "block text-sm font-medium text-gray-700 mb-2" %>
          <%= form.email_field :email,
              class: "block w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm",
              placeholder: "Enter email address" %>
        </div>

        <!-- Password -->
        <div>
          <%= form.label :password, class: "block text-sm font-medium text-gray-700 mb-2" %>
          <%= form.password_field :password,
              class: "block w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm",
              placeholder: user.new_record? ? "Enter password" : "Leave blank to keep current password",
              autocomplete: "new-password" %>
          <% unless user.new_record? %>
            <p class="text-xs text-gray-500 mt-1">Leave blank to keep the current password</p>
          <% end %>
        </div>

        <!-- Password Confirmation -->
        <div>
          <%= form.label :password_confirmation, class: "block text-sm font-medium text-gray-700 mb-2" %>
          <%= form.password_field :password_confirmation,
              class: "block w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm",
              placeholder: "Confirm password",
              autocomplete: "new-password" %>
        </div>
      </div>
    </div>

    <!-- Form Actions -->
    <div class="flex items-center justify-between pt-2">
      <div class="flex space-x-3">
        <%= link_to "Cancel", (user.persisted? ? user_path(user) : users_path), class: "btn-secondary" %>
      </div>
      <div class="flex space-x-3">
        <%= form.submit user.new_record? ? "Create User" : "Update User", class: "btn-primary" %>
      </div>
    </div>
  <% end %>
</div>
