sure/app/views/admin/sso_providers/index.html.erb

<%= content_for :page_title, "SSO Providers" %>

<div class="space-y-4">
  <p class="text-secondary mb-4">
    Manage single sign-on authentication providers for your instance.
    <% unless FeatureFlags.db_sso_providers? %>
      <span class="text-warning">Changes require a server restart to take effect.</span>
    <% end %>
  </p>

  <%= settings_section title: "Configured Providers" do %>
    <% if @sso_providers.any? %>
      <div class="divide-y divide-primary">
        <% @sso_providers.each do |provider| %>
          <div class="flex items-center justify-between py-3 first:pt-0 last:pb-0">
            <div class="flex items-center gap-3">
              <% if provider.icon.present? %>
                <%= icon provider.icon, class: "w-5 h-5 text-secondary" %>
              <% else %>
                <%= icon "key", class: "w-5 h-5 text-secondary" %>
              <% end %>
              <div>
                <p class="font-medium text-primary"><%= provider.label %></p>
                <p class="text-sm text-secondary"><%= provider.strategy.titleize %> · <%= provider.name %></p>
              </div>
            </div>
            <div class="flex items-center gap-2">
              <% if provider.enabled? %>
                <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-green-100 text-green-800">
                  Enabled
                </span>
              <% else %>
                <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-surface text-secondary">
                  Disabled
                </span>
              <% end %>
              <%= link_to edit_admin_sso_provider_path(provider), class: "p-1 text-secondary hover:text-primary", title: "Edit" do %>
                <%= icon "pencil", class: "w-4 h-4" %>
              <% end %>
              <%= button_to toggle_admin_sso_provider_path(provider), method: :patch, class: "p-1 text-secondary hover:text-primary", title: provider.enabled? ? "Disable" : "Enable", form: { data: { turbo_confirm: "Are you sure you want to #{provider.enabled? ? 'disable' : 'enable'} this provider?" } } do %>
                <%= icon provider.enabled? ? "toggle-right" : "toggle-left", class: "w-4 h-4" %>
              <% end %>
              <%= button_to admin_sso_provider_path(provider), method: :delete, class: "p-1 text-destructive hover:text-destructive", title: "Delete", form: { data: { turbo_confirm: "Are you sure you want to delete this provider? This action cannot be undone." } } do %>
                <%= icon "trash-2", class: "w-4 h-4" %>
              <% end %>
            </div>
          </div>
        <% end %>
      </div>
    <% else %>
      <div class="text-center py-6">
        <%= icon "key", class: "w-12 h-12 mx-auto text-secondary mb-3" %>
        <p class="text-secondary">No SSO providers configured yet.</p>
      </div>
    <% end %>

    <div class="pt-4 border-t border-primary">
      <%= link_to new_admin_sso_provider_path, class: "inline-flex items-center gap-2 text-sm font-medium text-primary hover:text-secondary" do %>
        <%= icon "plus", class: "w-4 h-4" %>
        Add Provider
      <% end %>
    </div>
  <% end %>

  <% if @legacy_providers.any? %>
    <%= settings_section title: t("admin.sso_providers.index.legacy_providers_title"), collapsible: true, open: true do %>
      <div class="bg-amber-50 border border-amber-200 rounded-lg p-3 mb-4">
        <div class="flex gap-2">
          <%= icon "alert-triangle", class: "w-5 h-5 text-amber-600 shrink-0" %>
          <p class="text-sm text-amber-800">
            <%= t("admin.sso_providers.index.legacy_providers_notice") %>
          </p>
        </div>
      </div>

      <div class="divide-y divide-primary">
        <% @legacy_providers.each do |provider| %>
          <div class="flex items-center justify-between py-3 first:pt-0 last:pb-0">
            <div class="flex items-center gap-3">
              <% provider_icon = provider[:icon].presence || "key" %>
              <%= icon provider_icon, class: "w-5 h-5 text-secondary" %>
              <div>
                <p class="font-medium text-primary"><%= provider[:label].presence || provider[:name] %></p>
                <p class="text-sm text-secondary">
                  <%= provider[:strategy].to_s.titleize %> · <%= provider[:name] %>
                  <% if provider[:issuer].present? %>
                    · <span class="text-xs"><%= provider[:issuer] %></span>
                  <% end %>
                </p>
              </div>
            </div>
            <div class="flex items-center gap-2">
              <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-amber-100 text-amber-800">
                <%= t("admin.sso_providers.index.env_configured") %>
              </span>
            </div>
          </div>
        <% end %>
      </div>
    <% end %>
  <% end %>

  <%= settings_section title: "Configuration Mode", collapsible: true, open: false do %>
    <div class="space-y-3">
      <div class="flex items-center justify-between">
        <div>
          <p class="font-medium text-primary">Database-backed providers</p>
          <p class="text-sm text-secondary">Load providers from database instead of YAML config</p>
        </div>
        <% if FeatureFlags.db_sso_providers? %>
          <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-green-100 text-green-800">
            Enabled
          </span>
        <% else %>
          <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-surface text-secondary">
            Disabled
          </span>
        <% end %>
      </div>
      <p class="text-sm text-secondary">
        Set <code class="bg-surface px-1 py-0.5 rounded text-xs">AUTH_PROVIDERS_SOURCE=db</code> to enable database-backed providers.
        This allows changes without server restarts.
      </p>
    </div>
  <% end %>
</div>