<details class="group w-full">
  <summary class="flex cursor-pointer list-none items-center gap-2 text-sm font-medium text-n-slate-12">
    <span><%= t('super_admin.captain_model_overrides.show.summary') %></span>
    <svg class="h-4 w-4 transition-transform duration-200 group-open:rotate-180" viewBox="0 0 20 20" fill="currentColor">
      <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
    </svg>
  </summary>

  <div class="mt-3 w-full">
    <div class="grid grid-cols-1 gap-3">
      <% field.feature_rows.each do |feature| %>
        <div class="p-3 bg-white rounded-md outline outline-n-container outline-1 shadow-sm">
          <div class="flex items-center justify-between gap-4">
            <div>
              <div class="text-sm font-medium text-n-slate-12"><%= feature[:name] %></div>
              <div class="text-xs text-n-slate-11"><%= feature[:key] %></div>
            </div>
            <span class="<%= feature[:source] == :account_override ? 'bg-green-400 text-white' : 'bg-slate-50 text-slate-800' %> rounded-full px-2 py-1 text-xs">
              <%= feature[:source_label] %>
            </span>
          </div>

          <div class="mt-3 grid grid-cols-1 md:grid-cols-2 gap-3 text-sm">
            <div>
              <div class="text-xs uppercase text-n-slate-10"><%= t('super_admin.captain_model_overrides.show.provider') %></div>
              <div class="text-n-slate-12">
                <%= feature[:provider] %>
                <span class="text-n-slate-10">(<%= feature[:provider_id] %>)</span>
              </div>
            </div>
            <div>
              <div class="text-xs uppercase text-n-slate-10"><%= t('super_admin.captain_model_overrides.show.model') %></div>
              <div class="text-n-slate-12">
                <%= feature[:model] %>
                <span class="text-n-slate-10">(<%= feature[:model_id] %>)</span>
              </div>
            </div>
          </div>
        </div>
      <% end %>
    </div>
  </div>
</details>
