<%=
  component_wrapper(data: wrapper_data_attributes) do
    flex_layout do |flex|
      flex.with_row(mt: 3) do
        render(Primer::Alpha::TextField.new(
          name: "project-custom-fields-mapping-filter",
          label: t('projects.settings.project_custom_fields.filter.label'),
          visually_hide_label: true,
          placeholder: t('projects.settings.project_custom_fields.filter.label'),
          leading_visual: {
            icon: :search,
            size: :small
          },
          show_clear_button: true,
          clear_button_id: "project-custom-fields-mapping-filter-clear-button",
          data: {
            action: "input->projects--settings--project-custom-fields-mapping-filter#filterLists",
            "projects--settings--project-custom-fields-mapping-filter-target": "filter"
          }
        ))
      end

      @project_custom_field_sections.each do |project_custom_field_section|
        flex.with_row do
          render(Projects::Settings::ProjectCustomFieldSections::ShowComponent.new(
            project: @project,
            project_custom_field_section:
          ))
        end
      end
    end
  end
%>