<div class="mx-auto md:w-2/3 w-full">
  <div class="flex items-center mb-6">
    <%= link_to "← Back to Users", users_path, class: "text-blue-600 hover:text-blue-800" %>
  </div>

  <h1 class="font-bold text-3xl mb-6">Edit User</h1>

  <% if notice = flash[:notice] %>
    <p class="py-2 px-3 bg-green-50 mb-5 text-green-500 font-medium rounded-lg inline-block" id="notice"><%= notice %></p>
  <% end %>

  <% if alert = flash[:alert] %>
    <p class="py-2 px-3 bg-red-50 mb-5 text-red-500 font-medium rounded-lg inline-block" id="alert"><%= alert %></p>
  <% end %>

  <div class="bg-white shadow rounded-lg p-6">
    <div class="mb-6">
      <h2 class="text-lg font-medium text-gray-900 mb-4">User Information</h2>

      <div class="grid grid-cols-1 gap-4">
        <div>
          <label class="block text-sm font-medium text-gray-700">Email Address</label>
          <div class="mt-1 text-sm text-gray-900"><%= @user.email_address %></div>
        </div>

        <div>
          <label class="block text-sm font-medium text-gray-700">Created</label>
          <div class="mt-1 text-sm text-gray-900"><%= @user.created_at.strftime("%B %d, %Y at %I:%M %p") %></div>
        </div>
      </div>
    </div>

    <%= form_with(model: @user, class: "contents") do |form| %>
      <div class="mb-6">
        <h2 class="text-lg font-medium text-gray-900 mb-4">Role Assignment</h2>

        <div class="space-y-3">
          <div class="flex items-center">
            <%= form.radio_button :role, "admin", class: "h-4 w-4 text-purple-600 focus:ring-purple-500 border-gray-300" %>
            <%= form.label :role_admin, "Admin", class: "ml-3 block text-sm font-medium text-gray-700" %>
            <span class="ml-2 text-sm text-gray-500">- Full system access, user management, project creation</span>
          </div>

          <div class="flex items-center">
            <%= form.radio_button :role, "user", class: "h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300" %>
            <%= form.label :role_user, "User", class: "ml-3 block text-sm font-medium text-gray-700" %>
            <span class="ml-2 text-sm text-gray-500">- Read/write access to projects</span>
          </div>

          <div class="flex items-center">
            <%= form.radio_button :role, "viewer", class: "h-4 w-4 text-gray-600 focus:ring-gray-500 border-gray-300" %>
            <%= form.label :role_viewer, "Viewer", class: "ml-3 block text-sm font-medium text-gray-700" %>
            <span class="ml-2 text-sm text-gray-500">- Read-only access to all projects</span>
          </div>
        </div>
      </div>

      <div class="flex justify-end">
        <%= form.submit "Update User", class: "rounded-md px-3.5 py-2.5 bg-blue-600 hover:bg-blue-500 text-white font-medium cursor-pointer" %>
      </div>
    <% end %>
  </div>
</div>
