= gitlab_ui_form_for [@project, @protected_branch], html: { class: 'new-protected-branch js-new-protected-branch' } do |f|
  %input{ type: 'hidden', name: 'update_section', value: 'js-protected-branches-settings' }
  = render Pajamas::CardComponent.new(card_options: { class: "gl-mb-5" }) do |c|
    - c.header do
      = s_("ProtectedBranch|Protect a branch")
    - c.body do
      = form_errors(@protected_branch)
      .form-group.row
        = f.label :name, s_('ProtectedBranch|Branch:'), class: 'col-sm-12'
        .col-sm-12
          = render partial: "protected_branches/shared/dropdown", locals: { f: f, toggle_classes: 'gl-w-full! gl-form-input-lg' }
          .form-text.text-muted
            - wildcards_url = help_page_url('user/project/protected_branches', anchor: 'configure-multiple-protected-branches-by-using-a-wildcard')
            - wildcards_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: wildcards_url }
            = (s_("ProtectedBranch|%{wildcards_link_start}Wildcards%{wildcards_link_end} such as %{code_tag_start}*-stable%{code_tag_end} or %{code_tag_start}production/*%{code_tag_end} are supported.") % { wildcards_link_start: wildcards_link_start, wildcards_link_end: '</a>', code_tag_start: '<code>', code_tag_end: '</code>' }).html_safe
      .form-group.row
        = f.label :merge_access_levels_attributes, s_("ProtectedBranch|Allowed to merge:"), class: 'col-sm-12'
        .col-sm-12
          = yield :merge_access_levels
      .form-group.row
        = f.label :push_access_levels_attributes, s_("ProtectedBranch|Allowed to push:"), class: 'col-sm-12'
        .col-sm-12
          = yield :push_access_levels
      .form-group.row
        = f.label :allow_force_push, s_("ProtectedBranch|Allowed to force push:"), class: 'col-sm-12'
        .col-sm-12
          = render Pajamas::ToggleComponent.new(classes: 'js-force-push-toggle',
            label: s_("ProtectedBranch|Allowed to force push"),
            label_position: :hidden) do
            - force_push_docs_url = help_page_url('topics/git/git_rebase', anchor: 'force-push')
            - force_push_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: force_push_docs_url }
            = (s_("ProtectedBranch|Allow all users with push access to %{tag_start}force push%{tag_end}.") % { tag_start: force_push_link_start, tag_end: '</a>' }).html_safe
      = render_if_exists 'protected_branches/ee/code_owner_approval_form', f: f
    - c.footer do
      = f.submit s_('ProtectedBranch|Protect'), disabled: true, data: { qa_selector: 'protect_button' }, pajamas_button: true