<Layouts.app flash={@flash} current_user={@current_user}>
  <.header>
    {gettext("Listing Roles")}
    <:subtitle>
      {gettext("Manage user roles and their permission sets.")}
    </:subtitle>
    <:actions>
      <%= if can?(@current_user, :create, Mv.Authorization.Role) do %>
        <.button variant="primary" navigate={~p"/admin/roles/new"}>
          <.icon name="hero-plus" /> {gettext("New Role")}
        </.button>
      <% end %>
    </:actions>
  </.header>

  <.table
    id="roles"
    rows={@roles}
    row_click={fn role -> JS.navigate(~p"/admin/roles/#{role}") end}
    row_tooltip={gettext("Click for role details")}
  >
    <:col :let={role} label={gettext("Name")}>
      <div class="flex items-center gap-2">
        <span class="font-medium">{role.name}</span>
        <.badge :if={role.is_system_role} variant="warning" size="sm">
          {gettext("System Role")}
        </.badge>
      </div>
    </:col>

    <:col :let={role} label={gettext("Description")}>
      <%= if role.description do %>
        <span class="text-sm">{role.description}</span>
      <% else %>
        <span class="text-base-content/70">{gettext("No description")}</span>
      <% end %>
    </:col>

    <:col :let={role} label={gettext("Permission Set")}>
      <.badge variant={permission_set_badge_variant(role.permission_set_name)} size="sm">
        {role.permission_set_name}
      </.badge>
    </:col>

    <:col :let={role} label={gettext("Type")}>
      <.badge :if={role.is_system_role} variant="warning" size="sm">
        {gettext("System")}
      </.badge>
      <.badge :if={!role.is_system_role} variant="neutral" size="sm">
        {gettext("Custom")}
      </.badge>
    </:col>

    <:col :let={role} label={gettext("Users")}>
      <.badge variant="neutral">{get_user_count(role, @user_counts)}</.badge>
    </:col>
  </.table>
</Layouts.app>
