<%=
  component_wrapper(class: "op-project-custom-field-section-container", data: { test_selector: "project-custom-field-section-container-#{@project_custom_field_section.id}" }) do
    render(border_box_container(mt: 3, data: drag_and_drop_target_config)) do |component|
      component.with_header(font_weight: :bold) do
        flex_layout(justify_content: :space_between, align_items: :center) do |section_header_container|
          section_header_container.with_column(flex_layout: true, align_items: :center) do |content_container|
            content_container.with_column(mr: 2) do
              render(Primer::OpenProject::DragHandle.new(classes: 'handle'))
            end
            content_container.with_column do
              render(Primer::Beta::Text.new(font_weight: :bold)) do
                @project_custom_field_section.name
              end
            end
          end
          section_header_container.with_column(flex_layout: true, justify_content: :flex_end) do |actions_container|
            actions_container.with_column do
              render(Primer::Alpha::ActionMenu.new(data: { test_selector: "project-custom-field-section-action-menu" })) do |menu|
                menu.with_show_button(icon: "kebab-horizontal", 'aria-label': t("settings.project_attributes.label_section_actions"), scheme: :invisible)
                edit_action_item(menu)
                move_actions(menu)
                if @project_custom_fields.empty?
                  delete_action_item(menu)
                else
                  disabled_delete_action_item(menu)
                end
              end
            end
            actions_container.with_column do
              render(Primer::Alpha::Dialog.new(
                id: "project-custom-field-section-dialog#{@project_custom_field_section.id}", title: t('settings.project_attributes.label_new_section'),
                size: :medium_portrait
              )) do |dialog|
                render(Settings::ProjectCustomFieldSections::DialogBodyFormComponent.new(project_custom_field_section: @project_custom_field_section))
              end
            end
          end
        end
      end
      if @project_custom_fields.empty?
        component.with_row(data: { 'empty-list-item': true }) do
          flex_layout(align_items: :center, justify_content: :space_between) do |empty_list_container|
            empty_list_container.with_column(ml: 4, mr: 2) do
              render(Primer::Beta::Text.new(color: :subtle)) { t("settings.project_attributes.label_no_project_custom_fields") }
            end
            empty_list_container.with_column do
              render(Primer::Beta::Button.new(
                  tag: :a,
                  href: new_admin_settings_project_custom_field_path(
                    type: "ProjectCustomField", custom_field_section_id: @project_custom_field_section.id
                  ),
                  scheme: :secondary,
                  data: { turbo: "false", test_selector: "new-project-custom-field-button" }
                )) do |button|
                  button.with_leading_visual_icon(icon: :plus)
                  t('settings.project_attributes.label_new_attribute')
                end
            end
          end
        end
      else
        first_and_last = [@project_custom_fields.first, @project_custom_fields.last]
        @project_custom_fields.each do |project_custom_field|
          component.with_row(
            data: draggable_item_config(project_custom_field)
          ) do
            render(
              ::Settings::ProjectCustomFieldSections::CustomFieldRowComponent.new(
                project_custom_field:,
                first_and_last:
              )
            )
          end
        end
      end
    end
  end
%>