<div class="mx-auto md:w-4/5 w-full">
  <div class="flex justify-between items-center mb-6">
    <h1 class="font-bold text-3xl">User Management</h1>
    <div class="text-sm text-gray-600">
      Total users: <%= @users.count %>
    </div>
  </div>

  <% 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 overflow-hidden sm:rounded-md">
    <ul class="divide-y divide-gray-200">
      <% @users.each do |user| %>
        <li>
          <div class="px-4 py-4 sm:px-6 hover:bg-gray-50">
            <div class="flex items-center justify-between">
              <div class="flex items-center">
                <div class="flex-shrink-0">
                  <div class="h-10 w-10 rounded-full bg-gray-300 flex items-center justify-center">
                    <span class="text-sm font-medium text-gray-700">
                      <%= user.email_address.first.upcase %>
                    </span>
                  </div>
                </div>
                <div class="ml-4">
                  <div class="text-sm font-medium text-gray-900">
                    <%= user.email_address %>
                  </div>
                  <div class="text-sm text-gray-500">
                    Joined <%= user.created_at.strftime("%B %d, %Y") %>
                  </div>
                </div>
              </div>
              <div class="flex items-center space-x-2">
                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium
                  <% if user.admin? %>bg-purple-100 text-purple-800
                  <% elsif user.viewer? %>bg-gray-100 text-gray-800
                  <% else %>bg-blue-100 text-blue-800<% end %>">
                  <%= user.role.capitalize %>
                </span>
                <%= link_to "Edit", edit_user_path(user),
                    class: "inline-flex items-center px-3 py-1.5 border border-gray-300 shadow-sm text-xs font-medium rounded text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500" %>
              </div>
            </div>
          </div>
        </li>
      <% end %>
    </ul>
  </div>

  <% if @users.empty? %>
    <div class="text-center py-12">
      <p class="text-gray-500">No users found.</p>
    </div>
  <% end %>
</div>
