<div class="grid">
  <%= render Components::Backend::Card.new(title: "backend users") do %>
    <%= form_with url: backend_users_path, method: :get, local: true do |f| %>
      <div class="form-row">
        <%= f.search_field :search, value: params[:search], placeholder: "search by email or name..." %>
        <%= render Components::Backend::ActionButton.new(hotkey: "↵") { "search" } %>
      </div>
    <% end %>
    <hr>
    <div class="table-container">
      <table>
        <thead>
          <tr>
            <th>user</th>
            <th>email</th>
            <th>roles</th>
            <th>active</th>
          </tr>
        </thead>
        <tbody>
          <% @users.each do |user| %>
            <tr>
              <td>
                <%= link_to backend_user_path(user) do %>
                  <%= user.display_name %>
                <% end %>
                <% if user.orphaned? %>
                  <span class="badge warning">⚠ orphaned</span>
                <% end %>
              </td>
              <td><%= user.email || "—" %></td>
              <td><%= user.pretty_roles %></td>
              <td><%= render_checkbox(user.active?) %></td>
            </tr>
          <% end %>
        </tbody>
      </table>
    </div>
    <hr>
    <%= render Components::Backend::Item.new(icon: "+", href: new_backend_user_path) do %>
      <b>grant backend access</b>
    <% end %>
  <% end %>
</div>
